CSS 08. Flex 에서 헷갈리는 자식요소 적용 속성

숩딩·2022년 4월 14일

[멋쟁이 사자처럼] 프론트엔드 스쿨 2기

목록 보기

17/28

Flex 란?

<div class="container">
	<div class="item">flex</div>
	<div class="item">A-yo</div>
	<div class="item">Hello</div>
</div>

부모 요소인 div.container를 Flex Container라고 부르고,
자식 요소인 div.item들을 Flex Item 이라고 부른다.

Flex 의 영향을 받는 전체 공간은 Container 이다. Flex의 설정해주는 속성에 따라 각각의 아이템들이 배치된다.

개인적으로 Flex 에서 헷갈리는 요소들에 대해서 정리해 보았다.

flex item(자식요소)에 적용하는 속성

기본 크기 flex-basis

Flex 아이템의 기본 크기 설정
(flex-direction이 row일 때는 너비, column일 때는 높이)

.item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

flex-basis는

flex-item의 초기 크기(기본적으로 가져야 할 너비)를 지정한다.
기본값flex-basis:auto 는 해당 아이템의 width 값을 사용한다.
flex-basis 값이 적용되어 있다면 width, height 값은 무시된다.

 .container {
            display: flex;
            height: 100vh;
        }

        li {
        	flex-basis: 100px;
            flex-grow: 0;
            /*width: 100px;*/
            height: 50px;
            box-sizing: border-box;
            background-color: pink;
            border: 1px solid black;
        }

width:100px 이 없다면 width:100px을 강제하지 않고 flex-basis를 따른다.
원래의 크기가 100px 이 안되는 아이템은 100px로 늘어났고 , 원래 100px 이 넘는 아이템은 본인 크기를 그대로 유지한다. -> 강제하지 않는다.

반면에 flex-basis 를 설정해줬지만 width 값이 있을 경우 크기가 강제가 되어 원래 100px 이 넘는 아이템은 100px 로 맞춰진다.

둘 다 사용하면 100px 로 완전히 맞춰지겠죠 ?

🤚 여기서 잠깐

원래 100px(위 코드기준)을 넘는 아이템에게 flex-basis를 100px, width:100px 로 해줬을때 영역만 줄어들고 콘텐츠 내용은 옆으로 삐져나간다. 그럴 때 요소의 콘텐츠가 다음줄로 넘어가게 해주고 싶다면?
word-wrap: break-word; 을 써주면 된다 !

유연하게 늘어나는 flex grow

flex-grow 값의 기본값은 0 이다. 0보다 큰 값이 들어가면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다.

.item {
	flex-grow: 1;
	/* flex-grow: 0; */ /* 기본값 */
}

0 이상의 수가 들어가면 width 값을 무시하고 부모의 영역을 모두 차지한다.
width 값대로 그려지지만 줄어들었을 때 브라우저의 크기가 전체 넓이보다 줄어든다면 자식의 크기도 줄어든다
flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각하시면 됩

아래 그림을 보면 둘 다 같은 조건일 때 flex-grow 만 다르게 줬을 뿐인데 나눠갖는 값이 다르다

flex-grow:1

자식요소들이 모두 동일한 크기의 공간을 할당받는다

flex-grow:0

자신을 감싸는 컨텐츠의 넓이만큼 차지하고 있던 요소가 동일한 너비를 가진다. (그레이컬러는 남은 여백을 표현했습니다)
설명하자면 남는 너비를 나누는것!

유연하게 줄여주는 flex-shrink

아이템이 flex-basis 값보다 작아질 수 있는지 결정한다
0 보다 큰 값이 들어가면 아이템이 유연한 박스로 변하고 flex-basis보다 줄어든다
지금까지는 기본값이 1이기 때문에 따로 세탕하지 않았어도 아이템이 flex-basis 보다 작아질 수 있었던 것이다 !

축양형 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를 생략해서 쓰면 flex-basis의 값은 0이 된다
= 기본 넓이가 없다 !
원래 내가 가진 본연의 크기를 0으로 초기화 시킨다. 그래서 전체가 1의 비율 균등한 비율로 나눠가질 수 있다 !

배치 순서 order

tab눌렀을 때 순서를 바꿔줄 수 있음 !

 button:nth-child(1){
            order: 1;
        }
        button:nth-child(2){
            order: 2;
        }
        button:nth-child(3){
            order: 3;
        }
        button:nth-child(4){
            order: 6;
        }
        button:nth-child(5){
            order: 5;
        }
        button:nth-child(6){
            order: 4;
        }