css / flexbox

Flexbox 속성중에서는 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 있다.

 

부모 요소에 적용해야하는 flexbox 속성들

---

• display: flex
• flex-direction
• flex-wrap
• justify-content
• align-items

 

 

 

 

 

flex-direction :정렬 축 정하기

flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다.

 

flex-direction: row/column ... 속성 값의 정렬 축 방향

 

 

flex-wrap

flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주지 않으면 줄 바꿈을 하지 않습니다(nowrap).

flex-wrap : nowrap...

 

 

 

 

 

 

justify-content : 축 수평 방향 정렬

자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.

flex-direction으로 축 방향이 정해진 상태에서, 축 방향으로 콘텐츠를 어떻게 정렬할 것인지.

• flex-direction: row 인 경우

 

• flex-direction: column인 경우

 

 

 

 

 

 

align-items: 축 수직 방향 정렬

요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다. (flex-direction에서 설정한 방향에서 수직으로)

align-items

 

 

flex-direction : row 인 경우 ↕️

 

flex-direction : column 인 경우 ↔

 

 

 

 

 

 

 

자식요소에 적용해야하는 flexbox 속성

---

부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex 는 요소가 차지하는 공간과 관련이 있습니다.

 

 

flex 속성의 값

flex 속성에는 세 가지 값을 지정해줄 수 있습니다. 각 값이 의미하는 것은 다음과 같습니다.

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다. flex: 0 1 auto;

 

 

grow: 자식박스는 얼마나 늘어날 수 있을까?

팽창지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합 의 비율로 빈 공간을 가져갑니다

팽창지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지하게 되는 것이죠.

 

flex 속성을 설정하기 전의 모습입니다. grow 의 기본 값인 0은 빈 공간이 있어도 늘어나지 않음을 의미합니다. 따라서 빈 공간이 있음에도 박스들이 늘어나지 않습니다. 그럼 grow 의 값을 변경하며 어떤 변화가 생기는지 확인해봅시다.

grow 설정 없을 때

grow는 box1 : box2 : box3 = 1 : 1 : 0 이므로 box1과 box2가 1:1로 공간을 나눠 가지고,

box1, box2 flex-grow가 1일 때

 

grow는 box1 : box2 : box3 = 1 : 1 : 1 이므로 세 박스가 1:1:1로 공간을 나눠 가진 것입니다.

모두 flex-grow 1일 때

 

자식 박스의 기본크기 (basis)

basis(기본 크기) 는 자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기입니다. flex-grow 가 0일 때, basis 크기를 지정하면 그 크기는 유지됩니다.

 

flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지됩니다. diplay 속성에 flex 가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라, basis 로 설정된 크기가 항상 유지되는 것은 아닙니다. flex-grow 속성의 값이 양수일 경우, 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수도 있습니다. 

 

주의

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
• 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
• (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.