CSS Flex 레이아웃 컨테이너 적용 속성

 

 

CSS의 레이아웃을 구성하는 요소에는 여러 가지가 있다.

화면배치를 쉽고 유연하게 사용하기 위해서는 이러한 속성들을 이용한다.

이전에는 float나 inline-block 등을 이용한 방식들이 쓰였지만 

현재는 flex와 gird를 보편적으로 많이 쓴다.

 

 

❗참고❗

 

float란?

원래는 웹페이지에서 이미지를 어떻게 배치할 것인가에 대한 속성으로 쓰였지만,

현재는 레이아웃용으로 태그와 클래스 등의 요소들을 

웹페이지에서 어떻게 구성할 것인가로 많이 쓰인다.

 

inline-block란?

display속성에서 inline속성과 block속성의 특징을 모두 가지고 있는 속성

inline 속성 처럼 흐름을 따라 나열되지만,

block속성처럼 width, height를 이용해 크기 설정이 가능하다.

이를 활용하여 레이아웃을 구성하기도 한다.

 

 

 

 

Flex

---

레이아웃 배치 전용 기능으로 웹페이지의 레이아웃을 구성할 때 쓰인다.

레이아웃 전용 기능이기때문에

기존에 쓰던 float나 inline-block 등을 이용한 방식보다 편리하고 쉽게 사용할 수 있다.

 

예를 들어 이전 포스팅에서도 position을 이용하여 요소를 가운데로 배치하였다.

일일이 높이와 너비를 생각하고, calc(계산) 속성을 이용하여 배치를 하였다면

flex를 이용하면 이러한 불필요한 과정을 줄여준다. 

 

 

❗참고❗

flex와 grid의 차이

flex는 한 방향 레이아웃 시스템(1차원)

grid는 두 방향(가로-세로) 레이아웃 시스템(2차원)

 

 

flex레이아웃에 대해 감을 잡았으니

flex레이아웃을 어떻게 사용하는지에 대해 다뤄보도록 하겠다.

 

 

flex레이아웃의 구조는 부모 요소의 컨테이너가 있고,

그 속에 자식요소(item)들이 배치되어 있는 구조이다.

이를 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것이다.

flex 레이아웃 구조

 

 

flex레이아웃은 display를 flex로 지정하면

플렉스 방식으로 자식 요소들을 배치하게 된다.

{ display : flex}

 

 

flex를 구성하는 속성에는

---

1. 컨테이너에 적용하는 속성
2. 아이템에 적용하는 속성

 

이렇게 2가지로 나뉜다.

 

 

이번 포스팅에서는 컨테이너에 적용하는 속성에 대해서 알아보도록 하겠다.

그럼 본격적으로 컨테이너 속성을 이용하여

자식요소(item)을 어떻게 배치하는지에 대해 알아보겠다!!

 

 

 

1. flex-direction

자식 요소(item)들이 배치되는 축의 방향을 설정한다.

즉, 가로 세로축 중 어느 축 방향으로 적용할 것인지를 설정한다.

 

1️⃣  row

: 기본값으로 아이템들이 가로 방향으로 배치된다.

 

2️⃣ column

: 아이템들이 세로 방향으로 배치된다.

 

3️⃣row-reverse

: 가로 방향으로 역순으로 배치된다. (3-2-1)

 

4️⃣column-reverse

: 세로 방향으로 역순으로 배치된다.

 

row-reverse와 column-reverse

 

💻 CSS 코드

{
 flex-direction : row;
 flex-direction : column;
 flex-direction : row-reverse;
 felx-direction : column-reverse;
}

 

 

 

 

2. flex-wrap

: 아이템들이 컨테이너를 넘어갈 때 

아이템 줄바꿈을 어떻게 할 것인지에 대한 속성이다.

 

1️⃣nowrap

: 기본값으로 줄 바꿈을 하지 않는다.

 

2️⃣wrap

:  줄바꿈을 한다.

순서 : 1-2-3

 

2️⃣ wrap-reverse

: 줄 바꿈을 하는데 역순으로 배치한다.

순서 : 3-2-1

 

 

 

 

3. justify-content

: 메인 축에서 아이템들을 정렬할 방식을 정한다.

 

1️⃣flex-start

: 기본값으로 아이템들을 시작점으로 정렬한다.

flex-direction이 row일 때는 왼쪽, column일 때는 위쪽으로 정렬된다.

 

2️⃣center

: 아이템들이 가운데로 정렬된다.

 

3️⃣flex-end

: 아이템들을 끝에서부터 정렬한다.

flex-direction이 row일 때는 오른쪽, column일 때는 아래쪽으로 정렬된다.

 

4️⃣space-between

: 아이템들의 사이에 균일한 간격을 만들어 배치한다.

 

5️⃣space-around

:아이템들의 둘레에 균일한 간격을 만들어 배치한다.

 

6️⃣sapce-evenly

: 아이템들의 사이와 양 끝에 균일한 간격을 만들어준다.

 

1. space-between  2.space-around  3.space-evenly

 

💻 CSS 코드

{
 justify-content : flex-start;
 jusitfy-content : center;
 justify-content : flex-end;
 justify-content : space-between;
 justify-content : space-around;
 justify-content : space-evenly;
}

 

 

 

 

3. item-align

: 수직 축에서 아이템들을 정렬할 방식을 정한다.

 

1️⃣stretch

: 기본값으로 아이템들이 수직축 방향으로 자리를 차지한다.

즉, 박스모양처럼 아이템들이 수직축방향으로 쭉 늘어난 형태

 

2️⃣flex-start

: 아이템들을 시작점으로 정렬한다.

또한 요소의 크기만큼만 자리를 차지한다.

flex-direction이 row일 경우 위쪽, column일 경우 왼쪽으로 배치된다.

쉽게 말하면 stretch에서 크기만 줄어든 모양

 

3️⃣flex-end

: 아이템들을 끝으로 정렬한다.

마찬가지로 요소의 크기만큼만 자리를 차지한다.

flex-direction이 row일 경우 아래쪽, column일 경우 오른쪽으로 배치된다.

 

4️⃣center

: 아이템들을 가운데로 정렬한다.

 

1. flex-start  2.flex-end  3.center

 

 

💻 CSS 코드

{
 align-item : stretch;
 align-item : flex-strat;
 align-item : flex-end;
 align-item : center;
}

 

 

 

 

4. gap

: 아이템간에 간격을 줄 수 있으며 두 개의 값을 넣어서

가로 간격과 세로 간격을 다르게 지정할 수도 있다.

 %,em,px 단위를  쓸 수 있고 calc(20px + 10%)와 같이 계산식을 쓸 수도 있다.

 

💻 CSS 코드

{
 gap : 10px 20px;
}

 

 

 

 

방향에 따라 아이템들의 정렬이 달라지기 때문에

속성값을 달리해도 어떤 방향을  기준으로 설정했는지에 따라

같은 결과의 배치를 가질 수도 있다.

 

중요한 건 계속해서 연습해 보고 적용해 보면서 익히는 것이다.

이러한 내용들은 mdn보다는 강의 사이트들이 더 잘 나온 거 같아서 

특별히 공식자료보다는 얄코, 1분 코딩 자료를 보면서 공부를 하였다.

 

마지막으로 이에대한 출처 사이트들을 남기고 

다음시간에는 flex 아이템에 적용한느 속성들에 대해 포스팅을 하도록 하겠다.!!

(오늘 안에 하면 좋을 텐데.. 내일 하려나😰)

그럼 이만~~~~!!

 

 

 

 

 

---

 

 

 

지난 시간 리뷰

CSS의 position속성과 z-index에 대해 다뤄보았다.

 

position이란?

화면상에서 요소를 배치하는 방법으로 5가지가 있다.

1. position : static 

2. position : relative

3. position : absolute

4. position : sticky

5. position : fixed

 

z-index란?

요소들의 z축(위아래) 배치 순서를 지정한다.

 

더 자세한 position 속성과 z-index에 대해 알아보려면?

(아래링크를 통해 속성값과 예제들을 다뤄보기)