[CSS] flexbox

flexbox: box와 item들을 행, 열로 자유자재로 배치시켜줄 수 있는 것

 

float

float: left item이 왼쪽에 배치

float: center item을 중간에 배치

float: right item을 오른쪽에 배치

 

 

flexbox

 

100 % vs 100vh

% : container가 들어있는 부모의 높이의 100%를 채우겠다는 의미

vh : 부모에 상관없이  viewport height의 100%를 사용하겠다는 의미

 

 

color tools

https://colorhunt.co/

Color Palettes for Designers and Artists - Color Hunt

 

 

display: flex;

item이 왼쪽에서 오른쪽으로 정렬된다.

flex-direction: row; (기본값)

row - 왼쪽에서 오른쪽으로 가는 방향

 

flex-direction: row-reverse;

(오른쪽에서 왼쪽으로 가는 방향)

 

flex-direction: column;

위에서 아래로 내려온다

flex-direction: column-reverse;

 

 

flex-wrap: nowrap; (기본값)

flex-wrap: warp;

item들이 한 줄에 꽉 차게 되면 자동적으로 다음 line으로 넘어간다.

flex-wrap: wrap-reverse;

위에서부터 반대로 wrapping

 

 

border: 1px solid black;

(width, style, color 각 속성의 값을 1줄로 작성)

flex-flow: flow-direction과 flex-wrap을 합침

 

flex-flow: column nowrap;

 

flex-direction: 수평이 중심축인지, 수직이 중심축인지 결정

flex-wrap: 한 줄에 내용물이 가득찼을 경우 다음 줄에 넘어갈 것인지 여부 결정

 

 

 

justify-content: item들을 어떻게 배치할 것인지 결정

justify-content: flex-start(기본값: 처음부터 왼쪽에서 오른쪽으로)

justify-content: flex-end(기본값: 오른쪽 축으로 배치)

item의 순서는 유지하되, 오른쪽으로 배치

justify-content: center;

 

justify-content: space-around; (박스를 둘러싸게 스페이싱을 넣어준다.)

justify-content: space-even;

똑같은 간격으로 넣어준다.

 

justify-content: space-between;

item을 왼쪽과 오른쪽을 화면에 맞게 배치해주고, 중간에만 간격을 넣어줌.

 

justify content: 중심축에서 item을 어떻게 배치할지 결정

 

 

align-items: 반대축에서 item을 배치하는 속성

align-items:center;  상자들을 수직적으로 중심에 배치하고 싶을 때

 

justify-content: 중심축에서 item 배치 결정

align-items: 반대축에서 item 배치 결정

 

 

출처: 유튜브 드림코딩