Flexbox 레이아웃 소개

jb kim·2021년 8월 15일
0

CSS

목록 보기
16/24

CSS3 의 최신 레이아웃 모델.

Display 속성을 사용함.

float 를 대체하며 더 효율적으로 사용.

가로 세로로 아이템들을 정렬.

아이템들의 순서나 비율등을 쉽게 적용.

⭐️ Flex란?

정렬을 위한 도구 Flex! 이는 내부 아이템 배치를, 쉽게 도와준다.

⭐️ Flex의 두 축

Flex는 두 개의 축으로 구성된다. 바로 주축(main-axis)과 교차(cross-axis)축이다.

Flex 컨테이너 속에 아이템을 넣으면, 주축 방향으로 쌓인다.

컨테이너에서 flex를 사용해 정렬하면 아래처럼 A,B,C,D 아이템들이 정렬

<div class="container">

      <div class="item">A</div>

      <div class="item">B</div>

      <div class="item">C</div>

      <div class="item">D</div>

</div>

profile
픽서

0개의 댓글