[CSS] CSS Basics # 6

simoniful·2021년 4월 6일

목록 보기

6/8

1분 코딩 및 네이버 부스트캠프 강의 관련 정리해봅니다. HTML과 CSS에서 놓치기 쉬운 포인트들을 복습하고 나아가 SCSS, 관련 애니메이션 등 확장적인 기능에 대하여 학습하고자 합니다.

Flex 아이템에 적용하는 설정

Flex-basis (유연한 박스의 기본 영역)

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

Flex 아이템의 기본 점유 크기를 설정 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이). 기본값 auto는 해당 아이템의 width값이나 설정하지 않았을 경우 컨텐츠의 크기를 사용합니다.

.item { flex-basis: 100px; }
100px이 안되는 AAA와 CCC는 100px로 늘어났고, 원래 100px이 넘는 BBB는 그대로 유지
.item { width: 100px; }
원래 100px을 넘는 BBB도 100px로 맞춤
.item { flex-basis: 100px; width: 100px; }
width 값을 설정한 것과 동일

Flex-grow (유연하게 늘리기)

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

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성입니다. 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 됩니다. 기본값이 0이기 때문에, 따로 적용하기 전까지는 아이템이 늘어나지 않습니다.

flex-grow: 0;
flex-grow: 1;

flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 지정된 숫자의 비율로 나누어 가진다고 생각하면 됩니다.

여백의 비!

/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

Flex-shrink (유연하게 줄이기)

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

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에, 고정 크기를 width로 설정하여 폭 고정형 레이아웃도 손쉽게 만드는 것이 가능합니다.

.container {
	display: flex;
    width: 100% | 250px
}
.item:nth-child(1) {
	flex-shrink: 0;
	width: 100px;
}
.item:nth-child(2) {
	flex-grow: 1;
}

Flex container의 폭을 100%와 250px로 변경하여도 flex-shrink: 0; 덕분에 컨테이너가 아무리 작아져도 첫번째 아이템은 찌그러지지 않고 폭이 100px로 유지된다.

.container { display: flex; width: 100%; }
.container { display: flex; width: 250px; }

Flex

.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-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다. flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 됩니다. 영역 자체를 원하는 비율로 분할하기를 원한다면 이렇게 flex-basis을 0으로 하면 손쉽게 처리할 수 있습니다.

예시 1)

.item {
	flex: 1 1 0;
}
.item:nth-child(2) {
	flex: 2 1 0;
}

flex-basis: 0; 으로, 기본 점유 크기를 0으로 만들어버려 전체 영역 크기를 나누어 가져서 1:2:1 비율로 설정되었습니다.

여백의 비가 아닌, 영역 자체를 원하는 비율로 분할하기를 원한다면 이렇게 flex-basis을 0으로 하면 손쉽게 처리 가능합니다.

.container {
	display: flex;
	flex-wrap: wrap;
}
.item {
	flex: 1 1 40%; | flex: 1 1 30%;
}

2단 컬럼의 사각형 목록 ( flex: 1 1 40%; )
3단 컬럼의 사각형 목록 ( flex: 1 1 30% )

Align-self (수직축으로 아이템 정렬)

.item {
	align-self: auto;
	/* align-self: stretch; */
	/* align-self: flex-start; */
	/* align-self: flex-end; */
	/* align-self: center; */
	/* align-self: baseline; */
}

align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬입니다. 기본값은 auto로, 기본적으로 align-items 설정을 상속 받습니다.

align-self는 align-items보다 우선권이 있습니다. 전체 설정보다 각각의 개별 설정이 우선권이 있는 점은 여타 요소들과 동일하게 작용 합니다.

Order (배치 순서)

.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */

각 아이템들의 시각적 나열 순서를 결정하는 속성입니다. 숫자값이 들어가며, 작은 숫자일 수록 먼저 배치됩니다. “시각적” 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의해야합니다.

Z-index

position에서의 z-index랑 똑같이 생각하시면 됩니다. 숫자가 클 수록 위로 올라옵니다.

Q&A

Q. Flexbox와 Grid의 차이

A.
Flexbox는 주로 1차원 레이아웃을 대상으로 하며 Grid는 2차원 레이아웃을 대상으로 합니다. Flexbox는 CSS에서 컨테이너 안에 있는 요소의 수직 가운데정렬, sticky footer 등과 같은 많은 일반적인 문제들을 해결합니다.
Bootstrap과 Bulma 등의 손쉬운 웹 사이트 제작을 위한 프레임 워크들은 Flexbox를 기반으로 하고, 최근 레이아웃을 구성하는데 빈번하게 사용되는 방법입니다.
flex-grow를 사용할 때 일부 브라우저에서 비호환성 문제(Safari)가 발생합니다. 따라서 사용에 있어서 확인이 필요합니다. Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적인 접근법으로 더 효율적이지만 현재 브라우저 지원은 넓지 않습니다.