front-end/HTMI CSS

CSS Flexbox

Hoon0211 2023. 6. 25. 19:54
728x90

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는 박스가 가로로 여러줄일 때 박스들의 상하배치를 조절할 수 있는 속성

728x90