Flexbox로 레이아웃 구성하기

내가 CSS, HTML을 입문할 때는 Float으로 띄우는 방식으로 배웠었다.

찾아보니 요새는 안쓴다고 한다. 그때도 Flexbox가 있긴 했던데 내가 구식으로 배웠었나보다. (씁쓸)

https://heropy.blog/2018/11/24/css-flexible-box/

https://codesandbox.io/s/hardcore-ully-tm0o1s?file=/flex.css

 

 

1. 부모 요소에 적용하는 속성

display: flex; (flex의 시작!) 

display: flex;

 

<div> 요소들은 별다른 설정을 해주지 않으면 위쪽에서부터 세로로 정렬되며,가로로 넓게 공간을 차지합니다.

display:flex;속성을 넣어주면 <div> 요소들이 왼쪽부터 가로로 정렬되며 내용만큼의 공간을 차지하도록 만들어줍니다.

 

 

flex-direction (정렬 방향 설정)

자식 요소들을 정렬할 방향을 결정합니다. 아무 설정도 해주지 않으면 기본적으로 flex-direction: row;입니다.

 

flex-direction: row; //가로 (왼 ->오)

flex-direction: column; //세로(위->아래)

flex-direction: row-reverse; //가로(오->왼)

flex-direction: column-reverse;(아래->위)

flex-wrap  (하위 요소들의 줄 바꿈 여부 설정)

하위 요소들의 크기가 상위 요소의 크기를 넘을 경우 flex-wrap을 넣어주면 자동 줄 바꿈이 됩니다.

아무 설정도 해주지 않으면 기본적으로 flex-wrap :nowrap;입니다.

 

flex-wrap: nowrap; //하위요소들 줄바꿈 x. 스크롤 생김

flex-wrap: wrap; // 하위요소들 줄바꿈.

flex-wrap: wrap; reverse; // 내림차순으로 줄바꿈. (10-9-8-7- ...)

 

전체적인 가로 & 세로 방향은 flex-direction에서 설정했으니

justify-content와 align-item으로 그 안에서 어떻게 정렬할 것인지를 설정합니다.

한글 문서 작성은 99% 가로 작성이지만 그 안에서 왼쪽 정렬, 오른쪽 정렬 등 여러 방식이 있는 것과 비슷합니다.

 

justify-content :(정렬 방식 설정 -가로)

가로 축을 기준으로 정렬 방식을 설정합니다.

 

flex-direction : row;

flex-direction : column;

두 경우 다 사용 가능합니다.

 

justify-content: flex-start ; //시작위치 -> 끝위치

justify-content: flex-end ; //끝위치 -> 시작위치

justify-content: center ; // 가운데 정렬

justify-content: space-between ; // 양 옆으로 펼쳐지는 정렬

justify-content: space-around ; // 양 옆으로 펼쳐지되 가운데 정렬

align-items (정렬 방식 설정 - 세로)

세로 축을 기준으로 정렬 방식을 설정합니다.

 

align-items: stretch ; //상위 요소 내에서 꽉꽉 채워줌

align-items: flex-start ; // 시작 지점에 붙게 만들어줌

align-items: flex-end ; // 끝부분에 붙게 만들어줌

align-items: center ; // 가운데 정렬

align-items: baseline ; // 하위 요소들의 내용이 가운데에 위치하도록 정렬

 

2. 자식 요소에 적용하는 속성

flex : grow shrink basis ; (하위 요소 크기 설정)

flex: 0 1 auto; // 설정안했을 때의 기본 값

grow : 요소의 크기가 늘어날 수 있는 크기

shrink : 요소의 크기가 줄어들 수 있는 크기

basis : 늘어나든 줄어들든 요소의 정해진 기본 크기

 

 

flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>

이렇게 3가지의 값을 넣어주어 하위 요소들의 크기를 설정해줍니다. 

 

 

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto; // 이렇게 따로 지정 가능

이렇게 따로 지정 가능합니다.