[CSS] Flexbox로 CSS 레이아웃 만들기

셩·2023년 2월 28일

CSS

목록 보기

1/1

속성과 인자의 종류가 많아서 항상 외우다가 잊어버리고 개발자도구 틀어서 제작하는 습관이 있어 이번에 flex를 정리하려고 해요.

크롬을 제외하고 IE, 엣지의 경우 버전에 따라 다르지만 flex를 지원하지 않는 경우도 있어 아직까지는 float과 inline-block으로 레이아웃을 잡는 방법도 함께 알고 있으면 좋아요. flex는 레이아웃 배치를 전용으로 고안되었기 때문에 기존 방식들 보다 기능도 다양하고 쉽게 제작할 수 있습니다.

FlexBox

Flex :: container 적용하기

flexBox는 container 영역에 display:flex;를 적용합니다.
.container {display:flex;}

주황색 부분은 container영역이며, 박스들은 items 영역입니다. 속성에 따라 적용하는 요소(Element)가 다릅니다.

🎈justify-content

container 내 items 가로축 정렬을 도와줍니다.

flex-start : 가로축 상으로 가장 왼쪽으로 정렬
flex-end : 가로축 상으로 가장 오른쪽으로 정렬
center : 가로축 상으로 가운데 정렬
spaca-between : container 끝까지 동일한 간격으로 정렬
space-around : container 끝을 비우고 동일한 간격으로 정렬

🎈align-items

container 내 items 세로축 정렬을 도와줍니다.

flex-start : 세로축 상으로 가장 왼쪽으로 정렬
flex-end : 세로축 상으로 가장 오른쪽으로 정렬
center : 세로축 상으로 가운데 정렬
baseline : container 시작위치에서 정렬
stretch : 세로축으로 container를 꽉 채움

🎈flex-direction

items의 정렬 방향을 지정합니다.

row : 가로 방향과 동일하게 정렬
row-reverse : 가로 역순 방향으로 정렬
column : 세로 방향으로 정렬
column-reverse : 세로 역순 방향으로 정렬

💡flex-direcion:column;의 경우 justify-content 방향은 세로로, align-items 방향은 가로 방향으로 변경됩니다.

🎈flex-wrap

items을 한줄 || 여러줄로 정렬 합니다.

nowrap : item을 한줄로 정렬
wrap : item을 여러줄로 정렬
wrap-reverse : item을 여러줄로 반대로 정렬

💡flex-wrap은 flex-direction과 flex-wrap 속성을 한줄로 쓸 수 있습니다. ex.flex-wrap:column wrap;

🎈align-content

items 줄사이 간격을 지정합니다.

flex-start : 여러줄로 배치된 item을 위쪽으로 정렬
flex-end : 여러줄로 배치된 item을 아래로 정렬
center : 여러줄로 배치된 item을 가운데 정렬
space-between : container 끝에 붙은 채로 동일한 간격으로 정렬
space-around : container 끝에 여백을 두고 동일한 간격으로 정렬
stretch : 여러줄의 item을 꽉 채워 정렬

Flex :: item 적용하기

flexBox는 container 영역 안에 item에 속성을 적용합니다.
.container > .item {속성}

🎈order

각 요소에 속성을 적용할 수 있습니다. 기본값은 0이며, 음수-양수로 인자값을 넣어줍니다.

.container {
      width:70%;
      height:240px;
      background:sandybrown;
      display:flex;
      margin:50px auto 0;
}

.container > div {
      width:80px;
      height:80px;
      background:#eee;
      text-align: center;
      line-height:80px;
      font-weight:600;
      font-size:36px;
}

.container > div:nth-child(odd) {
      background:#555;
      color:#fff;
}

.container > div:nth-child(3) {
       order:-1;
}

💡3번 item에 order 음수값을 넣어줬습니다. 결과는 3번 item 순서가 가장 앞으로 나오게 됩니다.

🎈align-self

요소에 개별적으로 align-items 속성을 적용할 수 있습니다.

.container .self {
     align-self:flex-end;
}

3번 요소만 따로 align-items:flex-end;를 적용했어요. 해당 요소만 개별적으로 속성이 적용됩니다.

https://flexboxfroggy.com/

셩

🙄