[CSS] 레이아웃 속성 ~Flex편~

chooing·2022년 4월 13일
2

CSS

목록 보기
8/10

앞서 요소들을 정렬할 때 float를 사용해 정렬할 수 있는 것을 배웠다. 하지만 float는 매번 부모 요소 밖으로 나가는 걸 단속해주고 고려해야하는 매우 귀찮은 점이있다. 그리고 귀찮은거 못참는 개발자들은 float에 대응할 CSS 레이아웃 속성들을 만들어 낸다!

flex 배워버렸지 뭐야~

CSS 레이아웃 속성 중 첫번째로 알아볼 flex는 flexbox, Flexible Box module라 불린다.

일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었습니다.
-mdn 'flexbox의 기본 개념' 서문

.container{
	display:flex;
 }
<div class="container">
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>

정렬하고 싶은 요소들의 부모에 display: flex을 주고 직계 자식들을 컨트롤하여 페이지의 레이아웃을 편리하고 깔끔하게 정리해준다. 위 구조에서 .container는 부모 요소로 Flex-container, .box는 자식요소로 Flex-item이라고 부른다.

flex 속성

Flex-itemaxis(중심축)을 기준으로 정렬하며 이 axis와 짝을 이루는 cross-axis가 있다. 이 둘은 다음과 같이 서로 반대되어 상태를 가진다.

axis가 row => cross-axis는 column
axis가 column => cross-axis는 row

정렬 방향을 결정하는 flex-direction

justify-content

flex-item의 axis(중심축)을 기준으로 배열의 위치를 조종하거나 자식요소 간의 간격을 설정한다.

align-items

flex-item의 cross-axis를 기준으로 이동한다.

flex-wrap

flex는 자식의 크기가 자신보다 크다고 해서 강제로 조절하지 않는다.
다만 flex-wrap 속성을 주면 부모요소의 넓이만큼 자식요소의 배치를 조절한다.

align-content

flex-container의 cross-axis 방향의 아이템들이 여러 줄일 때, 즉 부모 요소에 flex-wrap:wrap를 사용했을 때 두 줄 이상이라면 사용할 수 있다.

자식요소에 사용하는 속성들

flex-basis, flex-grow, flex-shrink, align-self, order가 있다.

⚠ 이 부분은 좀 더 공부한 후 추가하고자 한다.

하지만, IE를 고려한다면...

이렇게나 편한 flex지만 인터넷익스플로어(IE)를 고려해야한다면 float를 사용하는 것을 추천한다.

profile
멋찐 프론트엔드 개발자가 되기 위해 공부 중입니다

0개의 댓글