kingsubin

flex 

flex-container :: parent

여러 개의 플렉스 아이템을 포함한 부모 역할

 

flex-direction : 박스가 늘어나는 방향

flex-wrap : 박스가 다음 줄로 넘어가는 방식

align-item, justify-content : 자식 요소 정렬

 

flex-item :: children

컨테이너 안에 위치하면서 박스 하나 하나의 모양을 결정

 

flex-basis : 박스의 크기

flex-grow, flex-shrink : 그 크기가 변경되는 방식

order : 컨테이너 안에서 나열되는 순서

align-self : 보통은 컨테이너가 아이템을 정렬하지만, 아이템 스스로 정렬 방식을 선택할 수도 있음

 

---

flex-direction

.container {
	flex-direction: row(default) | row-reverse | column | column-reverse;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

flex-wrap

기본적으로 flex item들은 일렬로 놓인다.

근데 flex-wrap을 활용하면 줄바꿈을 할 수 있다.

.container {
	flex-wrap: nowrap(default) | wrap | wrap-reverse;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

nowrap (default) : 모든 flex item 들이 한 줄에 놓인다.

wrap : flex item들이 여러 줄에 놓인다. top to bot

wrap-reverse : flex item들이 여러 줄에 놓이는데 bot to top

 

# flex-flow

flex-direction 과 flex-wrap 속성을 한 번에 정의할 때

.container {
	flex-flow: column wrap;
}

 

justify-content

자식 요소 정렬

.container {
  justify-content: flex-start(default) | flex-end | 
        center | space-between | space-around | space-evenly | 
        start | end | left | right ... + safe | unsafe;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

 

align-items

justify-content의 교차 버전이라고 생각

.container {
  align-items: stretch(default) | flex-start | flex-end | center | 
        baseline | first baseline | last baseline | 
        start | end | self-start | self-end + ... safe | unsafe;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

align-content

.container {
  align-content: normal(default) | flex-start | flex-end | center | 
        space-between | space-around | space-evenly | stretch | 
        start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

---

 

order

.item {
  order: 5; /* default is 0 */
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

flex-grow

.item {
  flex-grow: 4; /* default 0 */
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

flex-shrink

flex-grow 의 반대 느낌

.item {
  flex-shrink: 3; /* default 1 */
}

 

flex-basis

박스의 크기

.item {
  flex-basis:  | auto; /* default auto */
}

 

 

flex

flex-grow, flex-shrink, flex-basis 를 한 번에 쓰기 위한 축약어 

이렇게 사용하는 것을 추천하는 바임.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

 

align-self

item에 대한 개별 정렬을 지정할 수 있음

float, clear, vertical-align 은 flex-item에 적용되지 않음.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

 

 

 

---

※ 출처

jeonghwan-kim.github.io/dev/2020/03/09/flex.html

css-tricks.com/snippets/css/a-guide-to-flexbox/

developer.mozilla.org/en-US/docs/Web/CSS