CSS - flex

CSS  - display : flex;

 

 

ㄴ 정의 : display : flex는 자식요소들의 정렬을 위해 사용한다

 

ㄴ 자식요소들이 inline인지 block인지에 상관없이 레이아웃 설정가능

 

ㄴ 부모에게 길이를 주고 자식들은 flex를 주어 정렬하는 방법을 많이 쓴

 

 

 

 

-       flex container (부모) 속성 : flex-direction, flex-wrap, justify-content, align-items, align-center

-       flex item (자식) 속성 : flex, flex-grow, flex-shrink, flex-basis, order

 

 

 

 

 

 

 

 

<부모>
     <div 자식1>
     <div 자식2>
</부모>


와 같은 상황에서 세로로 정렬을 하고 싶다면

flex를 이용한다

display:flex 를 이용하면 자식들이 세로로 정렬된다

여기서 자식1과 자식2의 길이를 조절하고 싶다면 

flex-basis를 이용한다 (width를 이용할 수도 있지만 위 방법이 더 좋다)


자식1{
flex-basis:100px;
}


자식2{
flex-basis:200px;
}



flex-basis를 정하면 자식 태그들이 쌓이는 방향(메인축 방향)으로 길이 지정

즉, 기본값이 flex-direction: row; (메인축: 행 , 수직축: 열) 로 되어있으므로 자식들의 width 를 정한다

(flex-direction: columns; (메인축: 열 , 수직축: 행) 로 지정하면 flex-basis는 자식들의 height 지정)


flex-direction이 기본 값일때 자식들의 width는 내용물의 길이만큼, height는 부모의 것을 따라간다


자식들의 height는 부모의 height를 그대로 채운다





flex-direction: row;

-> 하나의 행에 자식들을 수평으로 배치한다

 

ㄴ 행 방향으로 자식들을 쌓아가기

flex-direction: columns;

-> 하나의 열에 자식들을 수직으로 배치한다

 

ㄴ 열 방향으로 쌓아가기



justify-content

: 자식들의 배열 방법, 메인축 정렬, 메인축 방향으로는 기본값으로 content의 내용만큼만 차지한다

ㄴ 기본값: justify-content: start;

 

ㄴ end, center, space-between 등으로 지정


align-items

: 자식들의 배열 방법, 수직축 정렬, 수직축 방향으로는 기본값으로 부모값을 100% 차지한다,

ㄴ기본값: align-items: stretch;

 

ㄴ start, end, center 등으로 지정




flex-basis

: 주축방향으로 길이 지정, 기본 크기를 지정한다

 

ㄴflex-basis는 min-width 와 비슷한 개념이다 (최소값)

 

ㄴ 그래서 최소값과 비슷한의미로 flex-basis를 정해놓고, flex-grow로 길이를 더 늘려놓는


flex-grow 

: 남는 여백을 분배하는 방식을 정한다 

ㄴflex-grow : 0이면 여백이 남아도 그대로 유지

ㄴflex-grow : 1 부터는 그 숫자 비율만큼 여백을 가져간다 


flex-shrink

:  부족한 여백을 어떻게 각출할 것인지를 지정한다.

ㄴ flex-shink:0으로 정하면 여백이 부족해져도 그대로 유지

ㄴ flex-shrink:1 부터는 그 숫자 비율만큼 감소



flex-wrap

: 화면이 부족해질때 줄바꿈을 하는 방법

ㄴ 메인축 방향으로 화면이 부족해지면 수직축방향으로 축이 하나 더 생성된다

ㄴ flex-wrap: 줄바꿈 O

ㄴ flex- wrap: 줄바꿈 X

 

 

 

 

 

 

 

여백 만들기

 

- gap과 margin의 차이

 

gap

 

ㄴgap은 레이아웃 요소들 사이의 간격을 의미

 

ㄴgap: 50px 20px;

 

는 레이아웃 요소들 사이 상하간격은 50px, 좌우간격은 20px를 의미한다

 

 

margin

 

ㄴ 개별 요소간의 외부 여