The Web Developer 부트캠프 2023/CSS

반응형 CSS 및 Flexbox

tjdvyzl 2023. 5. 29. 20:29

Flexbox를 다루려면 주축과 교차축을 이해 해야한다.

주축은 flex-direction에 의해 정의되고 4개의 값을 가질 수 있다. 

 

row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행을 따른다.

  •  row로 설정한다면 주축은 왼쪽에서 오른쪽 방향이고, row-reverse는 반대이다.

column 혹은 column-reverse 을 선택하면 주축은 페이지 상단에서 하단으로 블록 방향을 따른다.

  • column으로 설정한다면 주축은 위에서 아래 방향이고, column-reverse는 반대이다.

 

교차축은 간단하다. 위에서 말한 주축과 수직되는 방향이다. 주축이 row면 교차축은 column, 주축이 column이면 교차축은 row다.

 

<!DOCTYPE html>
<html lang="en">
  <head>  
    <style>
      #container {
          background-color:#003049;
          width: 90%;
          height: 500px;
          margin: 0 auto;
          border: 5px solid #003049;
          display: flex;
          /* flex-direction: row; */
      }

      #container div {
          width: 200px;
          height: 200px;
      }
    </style>
  </head>

  <body>
    <section id="container">
      <div style="background-color:green;"></div>
      <div style="background-color:cyan;"></div>
      <div style="background-color:purple;"></div>
      <div style="background-color:blue;"></div>
      <div style="background-color:rgb(0,255,100);"></div>
    </section>
  </body>

</html>

 

flex-direction이 row일 때

 

flex-direction이 row-reverse일 때

 

flex-direction이 column일 때

 

flex-direction이 column-reverse일 때

Justify-Content

https://developer.mozilla.org/ko/docs/Web/CSS/justify-content

 

justify-content - CSS: Cascading Style Sheets | MDN

CSS의 justify-content 속성은 브라우저가 콘텐츠 항목 사이와 주변의 공간을 플렉스 컨테이너에서는 main-axis, 그리고 그리드 컨테이너에서는 인라인 축을 기준으로 어떻게 정렬할 것인지를 정의합니

developer.mozilla.org

Flex-Wrap

flex-direction: column;

Document

This is an example for flex-wrap:wrap

1
2
3


This is an example for flex-wrap:nowrap

1
2
3





This is an example for flex-wrap:wrap-reverse

1
2
3

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap

 

flex-wrap - CSS: Cascading Style Sheets | MDN

CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗

developer.mozilla.org

Align-Items

justify-content는 주축으로 했다면 align-items는 교차축을 중심으로 정렬한다고 생각하면 편하다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* Common Styles */
    .content, .content1, .content2 {
        color: #fff;
        font: 100 24px/100px sans-serif;
        height: 500px;
        text-align: center;
        flex-direction: column;
        align-content: space-between;
    }

    .content div,
    .content1 div,
    .content2 div {
        height: 200px;
        width: 200px;
    }
    .red {
        background: orangered;
    }
    .green {
        background: yellowgreen;
    }
    .blue {
        background: steelblue;
    }
    .purple {
      background-color: purple;
    }
    .yellow {
      color: black;
      background-color: yellow;
    }

    /* Flexbox Styles */
    .content {
        display: flex;
        flex-wrap: wrap;
    }
    .content1 {
        display: flex;
        flex-wrap: nowrap;
    }
    .content2 {
        display: flex;
        flex-wrap: wrap-reverse;
    }
  </style>
</head>
<body>
  <h4>This is an example for flex-wrap:wrap </h4>
  <div class="content">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
    <div class="purple">4</div>
    <div class="yellow">5</div>
  </div>
  <br>
  <br>
  <h4>This is an example for flex-wrap:nowrap </h4>
  <div class="content1">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
    <div class="purple">4</div>
    <div class="yellow">5</div>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h4>This is an example for flex-wrap:wrap-reverse </h4>
  <div class="content2">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
    <div class="purple">4</div>
    <div class="yellow">5</div>
  </div>
</body>
</html>

 

Document

This is an example for flex-wrap:wrap

1
2
3
4
5


This is an example for flex-wrap:nowrap

1
2
3
4
5





This is an example for flex-wrap:wrap-reverse

1
2
3
4
5

 

 

대표적으로 위의 예시같은 경우 주축은 위에서 아래 방향이고 교차축은 왼쪽에서 오른쪽이다.

align-items같은 경우 교차축을 기준으로 하기 때문에 align-items: space-between을 넣었을 경우 교차축을 기준으로 각 열 마다 일정한 간격을 생성한다.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

 

align-items - CSS: Cascading Style Sheets | MDN

The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

developer.mozilla.org

 

 

 

Align-self

아이템들의 교차축 여백이 auto라면 align-self는 무시된다. (실제로 해봤을 때 align-content: space-between 을 넣으면 align-self가 안됐다.)

https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

 

align-self - CSS: Cascading Style Sheets | MDN

The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

developer.mozilla.org

 

Flex-Basis 

요소가 배치되기 전에 요소의 최초 크기를 결정한다. (div의 크기를 200x200으로 설정했어도 flex-basis가 400px라면 주축의 길이는 400px 고정이 된다. 즉, flex-basis가 우선적으로 설정된다.) 

 

 

Flex-Grow

flex-grow는 요소가 그 공간을 얼마나 차지할지 정한다. (min-width와 max-width로 넓힐 수 있는 최소 최대값 설정 가능)

1과 2로 설정했을 때 늘어나는 양의 차이가 a : 2a 만큼 차이난다.

 

This is a Flex-Grow

A,B are flex-grow:0 . C is flex-grow:1 .
A
B
C
A,B are flex-grow:1 . C is flex-grow:2 .
A
B
C

 

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

 

flex-grow - CSS: Cascading Style Sheets | MDN

The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's main size.

developer.mozilla.org

 

 

Flex-Shirnk 

이것 또한 grow와 거의 똑같다. 

컨테이너에 충분한 공간이 없을 때 요소들이 줄어드는 비율을 통제한다.

https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink

 

flex-shrink - CSS: Cascading Style Sheets | MDN

flex-shrink CSS property는 flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-co

developer.mozilla.org

속기법 

 

https://developer.mozilla.org/ko/docs/Web/CSS/flex#%EA%B5%AC%EB%AC%B8

 

flex - CSS: Cascading Style Sheets | MDN

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니

developer.mozilla.org

미디어 쿼리 맛보기 

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    #t5 nav {
      font-size: 1.5em;
      display: flex;
      justify-content: space-between;
    }

    #t5 ul, li {
        display: inline;
        margin: 0;
        padding: 0;
    }

    #t5 ul {
        flex: 1;
        max-width:50%;
        display: flex;
        justify-content: space-evenly;
    }

    #t5 h1 {
        font-size: 6em;
        text-align: center;
    }

    @media (min-width: 500px) {
        #t5 h1 {
            color: orange;
        }
    }

    @media (max-width:768px){
        #t5 h1 {
            font-size: 4em;
        }
        #t5 nav, ul {
            flex-direction: column;
            align-items: center;
        }
    }

    @media (min-width: 1000px) {
        #t5 h1 {
            color: yellow;
        }
    }

    @media (min-width: 1500px) {
        #t5 h1 {
            color: green;
        }
    }
  </style>
</head>
<body id="t5">
  <nav>
    <a href="#home">Home</a>
    <ul>
      <li><a href="#Home">Learn More</a></li>
      <li><a href="#home">about</a></li>
      <li><a href="#home">contact</a></li>
    </ul>
    <a href="#signup">sign up</a>
  </nav>
  <h1>Media Queries</h1>
</body>
</html>