[CSS] flexbox 란? / 사용법

Languages/CSS

[CSS] flexbox 란? / 사용법

MOONCO 2021. 5. 28. 20:47

👉 flexbox란?

여러가지 요소들(html 태그)을, 자유 자재로 디자인 할 수 있도록 만든 박스

flexbox 내부의 요소들은, flexbox의 규칙을 기준으로 위치와, 크기를 결정한다.

display: flex; 를 사용하여 flexbox를 지정할 수 있다.

// HTML
<html>
  <head>
  </head>
  <body>
    <div class="container">
      <div>안녕</div>
      <div>하세요</div>
      <div>?</div>
    </div>
  </body>
</html>

// CSS
.container {
  display: flex;
}

사용전

👉 flex-shrink 란?

flexbox의 공간이 부족할때, 각 항목의 사이즈를 줄인다.

항목 : flex-item 요소 ( display : flex가 적용된 Container 내부 요소 )

flex-shrink 사용법

1. flex-shrink : 0 ( 줄이지 않고, 원본 사이즈로 사용 )

{
  flex-shrink: 0;
}

2. border-box ( 1만큼 줄여서 사용 )

{
  flex-shrink: 1;
}

👉 flex-grow 란?

flexbox의 공간이 부족할때 선택한 항목의 크기를 늘리고, 다른 항목의 크기를 줄인다.

( 나머지 요소의 n배가 되도록 )

항목 : flex-item 요소 ( display : flex가 적용된 Container 내부 요소 )

flex-grow 사용법

1. flex-grow : 1 ( 숫자가 커질수록, 해당항목의 크기가 커짐 )

{
  flex-grow: 1;
}

저작자표시 동일조건