CSS Layout - flexbox

intro

저번 포스팅에 이어 이번에는 css layout에 대한 정리를 해보겠습니다.

두번째 글도 힘내서 포스팅해볼게요

 

---

 

 

✏️플렉스박스란?

 

css에서 한 줄의 레이아웃을 유연하게 배치하기 위한 css레이아웃 모델 중 하나입니다. 참고로 grid라는 것도 있습니다. 실무에서는 flexbox를 더 많이 사용한다고 하네요.

 

 

---

 

 

✏️플렉스박스 만들기

display: flex;

 

---

✏️배치방향

 

flex-direction을 사용하면 기본 축의 방향을 정할 수 있습니다. 이때 기본 값은 row 입니다.

 

---

 

✏️기본 축 정렬

 

justify-content를 사용하면 기본 축 방향으로 정렬할 수 있습니다. 기본 값은 flex-start입니다.

 

 

 

 

---

 

✏️교차 축 정렬: align-items

 

교차 축 방향으로 정렬할 때는 align-items를 사용합니다. 기본 값은 stretch (늘려서 배치하기) 입니다.

 

 

 

 

 

---

✏️요소가 넘칠 때: flex-wrap

 

요소가 넘치는 경우 flex-wrap: wrap을 지정해주면 교차 축 방향으로 넘어가서 배치됩니다.

 

 

---

✏️간격: gap

 

숫자를 하나만 쓰면, 모든 방향의 간격을 지정할 수 있습니다.

 

 

세로, 가로 순서대로 숫자를 두 개 쓰면 세로 간격, 가로 간격을 지정할 수 있습니다. 이떄 셀와 가로는 기본 축 방향과는 상관없습니다.

 

---

 

✏️요소 늘려서 채우기: flex-grow

기본값은 0입니다. flex-grow값이 클수록 많이 늘어납니다.

 

 

 

 

 

 

 

---

 

✏️요소 줄여서 채우기: flex-shrink

만약 요소들의 크기가 커서 넘치는 경우, 요소의 크기를 줄여서 플렉스박스 안에 가득 채웁니다. flex-shrink의 기본 값이 1이기 때문에 기본적으로 요소를 줄여서 배치하고, 0으로 지정하면 크기가 줄어들지 않습니다. 그리고 flex-shrink값이 클수록 상대적으로 많이 줄어듭니다.

 

 

 

 

---

 

css플렉스박스에 대한 포스팅을 마치겠습니다. 감사합니다.