[css]display: flex

flex-box 유연한 박스

 

1. container 박스에 주는 속성

*display: flex;

->block에서 flex로 변경

---

 

*flex-direction

-> 아이템의 배치방향(주축)을 지정

 

속성 값: row/column / row-reverse/ column-reverse

 

default(기본값) => row

 

---

​

*flex-wrap

-> 아이템의 배치를 1줄 또는 여러줄 지정

 

속성 값: wrap/no-wrap/wrap-reverse

여러줄/1줄/줄 반대로

 

default(기본값) => nowrap

---

​

*justify-content

-> 주축 방향 정렬

​

속성 값: flex-start/ flex-end/ center/ space-between/space-around

(space-between : 아이템들 사이 간격주고 부모(좌우)에는 붙음 float에 with25%느낌)

(space-around 컨테이너(바깥 여백와 아이템(이미지,리스트 등등) 사이에 같은 여백 만듬)

 

default(기본값) => flex-start

---

​

*align-items

->한줄 아이템의 교차축 정렬

 

속성 값: flex-start/ flex-end / center / stretch /baseline

(stetch는 길게 늘어지는것)

(baseline는 컨테이너(바깥쪽) 기준으로 정렬)

 

default(기본값) => stretch

---

​

align-content

->여러중의 아이템의 교차축 정렬

 

속성 값: flex-start/ flex-end/ center/ space-between/space-around

 

---

gap

-> 사이 간격

 

ex) gap: 10px;

 

---

 

flex-grow

-> 플렉스 박스안 요소를 가득 채우고 싶을 때

ex) flex-grow: 1

 

 

 

---

flex-shrink

-> 플렉스 박스안 요소를 우선순위?에 맞게 가득 채워줌 (0번이 젤 높음)

 

ex)flex-shrink: 0;

 

 

 

---

 

flex-basis

-> 플렉스 박스안 요소의 시작 크기를 지정할수 있음

 

ex) flex-basis: 300px;

 

 

 

 

2. item에게 주는 속성

order 아이템의 배치 순서를 지정

default => 0

음수도 가능