[css] display: flex 완벽 정리, flex container속성, flex item속성 2편

 

 

 목차

• flex-basis
• flex-shrink
• flex-grow
• flex
• align-self
• order

 

Flex  item에 적용되는 속성들

 

1. flex-basis (기본값 auto)

---

flex-basis: auto (default)

flex-basis: 0 / 50% / 300px/ 10rem / content  등이 올 수 있습니다.

 

flex-basis는 아이템의 기본 크기를 설정하는 것입니다. 

width와 heightd값과 별반 차이가 없어보이지만

 

flex-direction(flex container에 적용하는 속성) 값에 따라 축이 바뀝니다.

flex-direction:row로 설정하면 flex-basis는 가로 값이 되고

flex-direction:column으로 설정하면 flex-basis는 세로 값이 됩니다. 

 

 

1.1 flex-basis: 100px vs width: 100px차이점

.item {
	flex-basis: 100px;
}

width: 100px이 안되는 AAA, CCC는 100px만큼 늘어났고, 100px보다 넓은 BBBBBB는 가로값이 원래 그대로 유지 되었습니다.

 

 

.item {
	width: 100px;
}

반면 width: 100px인 값은  100px가 넘어가도   딱 100px만큼 영역을 차지 합니다.

아마 BBBBBBBB 요소에  word-wrap: break-word 처럼 줄바뀜 처리 스타일을 주지 않앗다면 일정 BBBBB는  옆으로 삐져나가게됩니다.

 

이처럼 flex-basis가 width보다 좀더 유연하게 대처할 수 있습니다.

 

 

 

2. flex-shrink (기본값: 1)

---

아이템이 가변너비가 아니거나, 값이 0 일 경우 효과가 없습니다.

 

flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정합니다.
flex-shrink에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아집니다.

기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있었습니다.

.item{
	flex-basis: 150px;
    flex-shrink: 1;
}

 

flex-shrink값이 0 보다 큰값 (기본값: 1)이 설정되면 아이템을 줄였을때 150px보다 작아질 수 있습니다.

 

flex-shrink를  0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 만들 수 있습니다. 

고정크기는 width로 셋팅합니다. 

 

 

 

 

 

3. flex-grow (기본값 0)

---

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지 결정하는 속성입니다. 

흔하게 비율로 많이 사용합니다.

.item.first {
	flex-grow: 1;
}

.item.second {
	flex-grow: 2;
}

.item.third {
	flex-grow: 1;
}

이렇게 비율로 1:2:1 비율로 셋팅할 수 있습니다. 

 

기본값은 0 이기 때문에 따로 적용하기 전까진 아이템이 늘어나지 않는다. 

각 아이템의 컨텐츠가 “AAAAA”, “B”, “CCC”로 원래의 크기가 다르기 때문에 전체 아이템의 크기가 살짝 애매한 비율로 보이지만, 여백의 비로 보면 정확하게 1:2:1입니다. 

여백의 비가 아닌 정확하게 전체크기가 1:2:1로 나눠지고 싶으면 "flex-basis:0"을 같이 설정하시면 됩니다.

 

4. flex

---

flex-grow, flex-shrink, flex-basis를 한번에 쓸 수 있는 축약형 속성입니다.

 

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

여기서 주의할 점은 "flex:1"이라고 하면 flex-basis의 기본값 auto로 설정될것 같지만  0 으로 설정됩니다. 

 

 

 

5. align-self (기본값: auto)

---

align-items는 Container내의 items  수직축에서 정렬방법을 설정한다면

align-self는 일부 item만 정렬방법을 변경할 경우 사용할 수 있습니다. 

이속성은 align-items 속성보다 우선으로 적용됩니다.

 

 

• auto(기본값): Container의 align-items 속성을 상속받음
• stretch: Container의 교차축을 채우기 위해 item을 늘림
• flex-start: 아이템을 각 줄 시작점으로 정렬
• flex-end:  아이템을 각 줄의 끝점으로 정렬
• center: 아이템을 가운데 정렬
• baseline: 아이템을 문자 기준선에 정렬

 

 

6. order(기본값: 0)

---

아이템의 순서를 설정합니다.

음수도 사용 가능하며 아이템에 숫자를 지정해서 숫자가 작은 순서대로 정렬할 수 있습니다.

(* HTML구조와 상관없이 순서를 변경할 수 있기 때문에 유용합니다.)

 

 

 

 

 

 

참고: https://heropy.blog/2018/11/24/css-flexible-box/

 

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡