[CSS] display: flex

Front-End/CSS 2022. 11. 24. 15:15

 

CSS의 flexbox는 기존 웹페이지의 오래된 레이아웃 지정 방식을 발전시켰다.

 

display: flex를 사용할 때와 사용하지 않았을 때 차이

<display: flex 사용하지 않은 경우>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="study.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
#container {
  width: 100%;
  height: 20vh;
  background-color: black;
}

.item {
  width: 20%;
  height: 4vh;
  margin-bottom: 10px;
  background-color: orange;
}

위와 같이 display: flex를 사용하지 않은 경우 id = "container"인 div 내부에 div item들이 아래로 정렬된 것을 확인할 수 있다. 

 

<display: flex를 사용한 경우>

#container {
  width: 100%;
  height: 20vh;
  background-color: black;
  display: flex;
}

.item {
  width: 20%;
  height: 4vh;
  margin: 10px;
  background-color: orange;
}

위의 예시처럼 부모 자식간 관계일 때 부모에 display: flex 속성을 주면 가로로 정렬되는 레이아웃을 확인할 수 있다.

참고로 display:flex는 부모 자식 관계에서 자식들을 정렬할 때 부모의 요소에 flex 속성을 줘야한다.

 

 

flex-direction

flex-direction 속성은 flex container 내 아이을 배치할 때 방향을 지정한다.

기본 값은 row로, flex-direction을 따로 지정하지 않으면 row 방향으로 지정된다.

 

row

: 글을 작성하는 방향인 왼쪽에서 오른쪽 방향으로 나열

: 가장 왼쪽부터 시작

flex-direction: row;

 

row-reverse

: row 처럼 진행되지만 역방향으로 나열

flex-direction: row-reverse;

 

column

: 여러줄이 쌓이는 방향대로 나열

flex-direction: column;

 

 

column-reverse

: column 처럼 진행되지만 역방향으로 나열

flex-direction: column-reverse;

 

justify-content

: 메인축 방향으로 아이템들을 정렬하는 속성

: 메인축의 수평 방향

: 만약 flex-direction이 row이면 row 방향으로, coulmn이면 column 방향으로 정렬됨.

 

flex-start

: 아이템들을 시작점에 정렬

: flex-direction이 row이면 왼쪽 방향에서 시작, column이면 가장 위에서 시작

justify-content: flex-start;

 

flex-end

: 아이템을 끝점에 정렬

: row이면 오른쪽, column이면 아래쪽에서 시작

justify-content: flex-end;

 

center

: 아이템 가운데 정렬

justify-content: center;

 

space-between

: 아이템과 아이템 사이가 동일한 간격

: 첫번째 아이템과 마지막 아이템은 가장 끝에 위치하게 됨.

justify-content: space-between;

 

 

space-around

: 아이템의 간격이 동일.

: 아이템의 왼쪽과 오른쪽의 공백이 동일하고 아이템과 아이템의 사이는 간격이 두 번 반복되게 됨.

justify-content: space-around;

 

aligin-items

: 메인 축의 수직 방향으로 container의 item의 공간을 줌.

  • flex-direction:row인 경우) justify-content는 가로 방향, aligin-items는 세로 방향으로 아이템 정렬
  • flex-direction: column인 경우) justify-content는 세로 방향, align-items는 가로 방향으로 아이템 정렬

즉 justify content는 flex-direction과 같은 방향으로 아이템 정렬, align-items는 flex-direction의 수직 방향인 교차 방향으로 아이템 정렬 속성을 지정.

 

flex-start

: 아이템을 시작점으로 정렬

 

flex-end

: 아이템을 끝점으로 정렬

 

center

: 아이템을 가운데로 정렬

 

baseline

: 아이템을 텍스트 베이스라인 기준으로 정렬

 

stretch

: 아이템을 수직축 방향으로 끝까지 정렬(뻗는 방식)

 

 

flex-wrap

: 아이템들의 너비의 합이 container의 너비를 초과할 때 어떻게 처리할 지 결정하는 속성

: 줄바꿈 속성

 

nowrap

: 기본값

: 브라우저 너비 초과해도 아이템들이 한 줄로 출력

 

wrap

: 너비를 초과한 아이템들을 줄 바꿈 하여 다음 줄로 넘김

 

wrap-reverse

: wrap과 같지만 아래에서 위쪽으로 배치

 

 

 

align-content

: flex-wrap: wrap이 설정된 상태에서 아이템이 2줄 이상 되었을 때 수직축 방향 정렬을 결정하는 속성

: 줄 사이 여백을 결정하는 속성

flex-start

: 아이템을 시작점으로 정렬

 

flex-end

: 아이템을 끝점으로 정렬

 

center

: 아이템을 가운데로 정렬

 

space-between

: 아이템의 줄 간격이 동일하며 첫 줄은 시작점, 마지막 줄은 끝 줄에 위치

 

space-around

: 아이템 한 구성 라인의 위아래 줄 간격이 동일

 

stretch

: 아이템을 수직축 방향으로 끝까지 정렬(뻗는 방식)

 

 

flex-flow

: flex-direction과 flex-wrap의 두 속성을 같이 설정할 수 있는 속성

flex-flow: row wrap;

 

 

 

 

 

반응형

'Front-End > CSS' 카테고리의 다른 글

[CSS] 가장 기본적인 사용  (0) 2022.11.25
[CSS] 다중 조건 셀렉터  (1) 2022.11.24
[CSS] 가상 셀렉터(Pseudo Selector)  (1) 2022.11.24
[CSS] 부모 자식 셀렉터  (0) 2022.11.24
[CSS] display: grid  (0) 2022.11.24