Flexbox?

행과 열의 레이아웃을 쉽게 구현하기 위한 메서드

구조

• (1) Flex Container : display: flex가 설정 된 부모 요소
• (2) Flex Items : Flex Container의 자식 요소

<div class="container"> <!-- Flex Container -->
	<div class="item"></div>
	</div> <!-- Flex Item-->
	<div class="item"></div> <!-- Flex Item-->
	<div class="item"></div> <!-- Flex Item-->
</div>

키워드

• (1) main-axis : flex-direction 의 방향
• (2) cross-axis : flex-direction 의 수직인 방향

주요 사용되는 속성

• (1) Flex Container

  • justify-content : main-axis 방향 flex items의 레이아웃
  • align-items : cross-axis 방향으로 flex items의 레이아웃

• (2) Flex Items

  <div class="container"> 
  	<div class="item"></div> flex-grow: 1; 1px
  	<div class="item"></div> flex-grow: 1; 1px
  	<div class="item"></div> flex-grow: 1; 1px
  </div>
  
  

  • flex-basis : main-axis 방향의 크기 (기본 값 : auto)

  • flex-grow : main-axis 방향으로 flex-container가 늘어날 때 증가하는 비율

    • 증가하는 비율 = flex-grow

  • flex-shrink : main-axis 방향으로 flex-container가 늘어날 때 감소하는 비율

    • 줄어드는 비율 : 요소의 너비 * flex-shrink (요소의 너비에 영향을 받는다)

    <div class="container"> 
    	<div class="item"></div> flex-shrink: 1; 1px
    	<div class="item"></div> flex-shrink: 1; 1px
    	<div class="item"></div> flex-shrink: 1; 1px
    </div>
    
    

  • align-self : cross-axis 방향으로 레이아웃 결정

예시flex-container 가 3px 늘어난 경우

https://codepen.io/dmcoxldj/pen/gOxdNRq

자주 만나는 이슈