[CSS] Flexbox

Flexbox

- 설정하고 싶은 요소들이 들어있는 박스 태그에 display :flex; 를 선언한다.

 

.flex {
   display: flex;
}

- flexbox는 기본축과 반대축으로 이루어져있다.

- 기본적으로 기본축은 가로줄, 반대축은 세로줄이다 (속성을 이용해 바꿀 수 있다.)

 

기본 축 방향 설정

- flex-direction

flex-direction : row (기본값)	왼쪽에서 오른쪽으로 정렬
flex-direction : row-reverse	오른쪽에서 왼쪽으로 정렬
flex-direction : column	위에서 아래로 정렬
flex-direction : column-reverse	아래에서 위로 정렬

 

줄 바꿈 설정

- flex-wrap

flex-wrap : nowrap(기본값)	한 줄에 정렬
flex-wrap : wrap	위에서 아래로 자동적으로 줄 바꿈
flex_wrap : wrap-reverse	아래에서 위로 자동으로 줄바꿈

 

축 방향과 줄 바꿈 한 번에 설정

- flex - flow : direction 속성 값 + wrap 속성 값

- 예) flex-flow : column wrap, flex-wrap : row-reverse wrap-reverse

 

 

 

박스들의 순서는 그대로 두고 중심축에서 배치

 

-justify-content

justify-content : flex-start(기본값)	왼쪽 축으로 배치
justify-content : flex-end	오른쪽 축으로 배치
justify-content : center	가운데 배치
justify-content : space-around	박스 바깥쪽에 약간의 여백을 줌
justify-content : space-evenly	박스 사이에 같은 간격을 줌
justify-content : space-between	박스 가운데만 간격을 줌

 

반대 축에서 배치

 

- align-items : center(가운데), baseline(박스 크기가 바뀌어도 텍스트 기준으로 배치)

- align-content : 5번의 요소들을 사용 가능

 

 

박스를 채워서 배치하는 방법

- flex-grow

각 요소에 { flex-grow : 비율(기본 값 0)}을 설정하여 박스를 채워서 자동적으로 크기 설정

 

- flex-shrink

각 요소에 { flex-shrink : 비율(기본 값0)}을 서정하여 박스가 줄어들거나 늘어나는 수치 비율을 조절

 

- flex-basis

{flex-basis : 차지할 퍼센트(기본 값 auto)} 얼마만큼을 차지할지 퍼센트로 표시

 

- align-self

요소 하나만 따로 배치하고 싶을 때, 예) align-self : center 이 속성이 들어간 요소만 가운데 정렬

 

 

 

 

 

flexbox연습하는 웹사이트🐸: https://flexboxfroggy.com/#ko