CSS Flexbox

1. Flexbox 란?

• 박스를 감싸는 부모 요소에게 display : flex를 사용
• 가로 정렬로 박스들의 배치
• 익스플로우 11 이상에서만 사용가능
  • 11 미만에서는 에러 발생

 

See the Pen Flexbox by 이승훈 (@miedsluo-the-typescripter) on CodePen.

 

 

2. Flexbox 세부속성

•  justify-content : center; 좌우정렬
•   align-items : center; 상하정렬
•  flex-direction : column; 세로정렬
  • 아래 코드에 입력 시 세로로 정렬되는 박스의 모습을 볼 수 있습니다.
• flex-wrap : wrap;  폭이 넘치는 요소 wrap 처리
• flex-grow : 2;  폭이 상대적으로 몇 배인지 결정

See the Pen Flexbox 세부속성 by 이승훈 (@miedsluo-the-typescripter) on CodePen.

 

 

 

- 박스 좌측 & 우측정렬 동시에 하는 법

• 첫번째 div는 좌측, 마지막 div는 우측 정렬 하는 방법으로
  • 가운데 div박스로 flex-grow: 1을 입력하면 좌우로 요소들이 정리되는 모습을 볼 수 있습니다. 

<div class="flex-container">
  <div class="box"></div>
  <div class="box" style="flex-grow : 1"></div>
  <div class="box"></div>
</div>

 

 

- justify-content과 align-content

• justify-content박스들의 배치를 조절할 수 있는 속성
• align-content는 박스가 가로로 여러줄일 때 박스들의 상하배치를 조절할 수 있는 속성