CSS Flex

 

float와 inline-block 의 구조 형태에서 Flex는 아마 구원자 같은 느낌이다 

 

엄청 손쉽게 레이아웃을 구성하는 방법으로 gird 또한 존재하지만 IE는.. 

 

그리하여 flex에 대한 정리를 해보려한다!

 

내가 작성하며 정리 하는 개념이라서 출처에 가보면 더 자세한 설명이 존재!

 

출처: studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

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

CSS Flex(Flexible Box) 완벽 가이드

 

---

<div class="container">
	<div class="item"> hello </div>
    <div class="item"> hello2 </div>
    <div class="item"> hello3 </div>
</div>    

 

 

부모인 컨테이너와 자식인 아이템으로 구분

 

컨테이너에 적용하는 속성

 

1. display:flex

.container{
	display:flex;
}

컨테이너에 display:flex; 를 설정함으로써 시작

 

 

2. flex-direction: ???

 

 

row (default): 아이템들이 가로 방향으로 정렬 (좌측에서 우측)

 

row-reverse: 아이템들이 가로방향인데 역순으로 정렬 (우측에서 좌측)

 

column: 아이템이 세로방향으로 정렬 (위에서 아래)

 

column-reverse : 아이템이 세로방향인데 역순으로 정렬(아래에서 위로)

 

 

3. flex-wrap : ???

 

 

 

 

nowrap (default) :  컨테이너의 값보다 크다면 삐져나감 overflow

 

wrap : 컨테이너의 값보다 크다면 줄바꿈을 하여 배열한다 

 

wrap-reverse: 역순으로 배열하여 컨테이너의 값보다 크면 위로 줄바꿈

 

 

다음으로 넘어가기전에 justify와 align의 차이는 차례로 메인축 방향과 수직축 방향이라는것이다.!

 

 

4. justify-content :  ???

 

flex-start (default): 시작점부터 정렬, flex-direction이 row면 왼쪽, column이면 위쪽 

 

flex-end : 끝점부터 정렬 , flex-direction이 row면 오른쪽, column이면 아래쪽 

 

center : 가운데 정렬

 

space-between : 아이템들 사이에 균일한 간격 만든다

 

space-around : 아이템들의 둘레에 균일한 간격

 

space-evenly: 아이템들 사이와 양 끝에 균일한 간격 , IE와 엣지에서 지원 안함 

 

 

 

 

5.  align-items : ???

 

stretch (default): 아이템들이 수직축 방향으로 쭉 늘어남

 

flex-start : 시작점 기준 , flex-direction 이 row면 위 column이면 왼쪽 ,크기 줄어듬

 

flext-end : 끝을 기준 ,  flex-direction 이 row면 위 column이면 왼쪽, 크기 줄어듬

 

center : 가운데 정렬 , 크기 줄어듬

 

 

justify-content:center; align-item:center => 한가운데 정렬

 

 

 

6.  align-content: ???  (flex-wrap:wrap 이라면!)

 

justify-content+align-items 

 

 

 

아이템에 적용하는 속성

 

1. order : ???

 

item 의 순서를 설정한다 ,숫자가 클수록 순서가 밀림 , 음수 허용

 

 

2. flex-basis :???

 

각종 단위의 값이 들어갈 수있다 , ex. ) flex-basis:100px; 이라고 하면 100px이 안되는 값은 100px로 세팅되고 원래 넘는 값은 그래도 유지

 

 

3. flex-grow :??? 

 

0보다 큰값이 세팅 되면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커지며 빈공간 메우게 된다

 

 

4. flex-shrink: ???

 

flex-shrink를 0으로 세팅하면 flex-basis보다 작아지지 않기 때문에 고정폭 컬럼 사용