[CSS] flex

기본적인 HTML 구조

<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
	<div class="item">helloflex</div>
</div>

 

Flex는 여러가지 속성들을 가지고 있다.

 

하지만, 크게 보면

• 컨테이너에 적용하는 속성
• 아이템에 적용하는 속성

으로 나눌 수 있다.

 

컨테이너에 적용하는 속성

display: flex;

.container {
	display: flex;
	/* display: inline-flex; */
}

item들의 width는 자신이 가진 컨텐츠의 크기만큼 커지고, height은 부모인 container의 높이 만큼 커진다.

inline-flex;는 container가 inline-box처럼 동작하게 할 수 있다.

 

 

flex-direction

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

 

 

flex-wrap

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

nowrap이 기본값

nowrap은 item들 width의 합이 container의 너비보다 커져도 item을 밑으로 보내지 않고 container의 너비가 커진다.

wrap은 넘치는 만큼 item을 밑으로 보낸다.

 

 

flex-flow

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

flex-direction과 flex-wrap을 같이 쓸 수 있는 단축 속성이다.

 

 

justify-content

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

 

 

align-items

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}

 

 

align-content

.container {
	flex-wrap: wrap;
	align-content: stretch;
	/* align-content: flex-start; */
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

아이템들의 행이 2줄 이상 되었을 때 사용하는 속성

 

 

아이템에 적용하는 속성들

flex-basis

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

아이템의 기본 크기를 설정하는 속성

기본값은 auto로 해당 아이템 안에 있는 컨텐츠의 너비를 의미한다. 따라서, 컨텐츠의 너비가 더 커지면 아이템의 너비도 따라서 커진다.

하지만, 값을 정해 놓는다면 아이템의 너비는 고정이다. 따라서 컨텐츠가 많아져도 너비가 커지는 것이 아니라 높이가 늘어나게 된다.

 

 

flex-grow

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

기본값은 0인데, 아이템의 현재 너비(width또는 flex-basis)만큼 차지하라는 뜻.

0보다 커지면 container의 빈 부분까지 모두 차지 (item에게 준 flex-grow 값의 비율로 차지)

하지만, 여백의 비율이다.

컨텐츠까지 포함한 비율로 늘리고 싶다면 flex-basis를 0으로 주면 된다.

 

 

flex-shrink

.item {
	flex-basis: 150px;
	flex-shrink: 1; /* 기본값 */
}

기본값은 1인데, item의 너비보다 작아질 수 있다는 뜻.

0을 주면 item에 준 너비보다 작아지지 않는다는 뜻.

 

 

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 단축 속성

 

 

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의 item버전

 

 

order

배치 순서

 

 

 

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자