[CSS] 레이아웃을 더 편하게, Flexbox
1. Flexbox를 지원하는 브라우저
. Flexbox 모델을 사용하자
[Property #1] display: flex
display: flex;
dispaly: inline-flex;
flex-derection: row; (가로로 나열)
flex-basis: auto; (container 너비만큼 수축)
flex-wrap: nowrap; (개행하지 않음)
flex-grow: 0; (여분이 있어도 늘어나지 않음)
flex-shrink: 1; (container 너비가 좁아지면 수축).container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.item {
width: 80px;
height: 80px;
}
display: block;
[Property #2] flex-direction
flex-direction: row; ⇒ 가로 정렬 [初期値]
flex-direction: column; ⇒ 세로 정렬
flex-direction: row-reverse; ⇒ 가로로 정렬하되 순서를 역배치
flex-direction: column-reverse; ⇒ 세로로 정렬하되 순서를 역배치
flex-direction: row-reverse;
flex-direction: column-reverse;
[Property #3] flex-basis
.item:nth-child(1) {
flex-basis: 150px;
}
.item:nth-child(2) {
flex-basis: 50%;
}
.item:nth-child(3) {
flex-basis: 110px;
}
[Property #4] flex-wrap
flex-wrap: nowrap; ⇒ 개행 없음 [初期値]
flex-wrap: wrap; ⇒ flex container에 들어가도록 개행해서 표시
flex-wrap: wrap-reverse; ⇒ 개행하되 문자 방향을 역으로 표시
flex-wrap:nowrap;
flex-wrap:wrap;
flex-flow: 【flex-direction의 값】 【flex-wrap의 값】;
flex-flow: row-reverse wrap;
.item {
flex-grow: 1;
}
.item:nth-child(3) {
flex-grow: 3;
}
container의 너비가 900px이고, item의 각 너비가 80px인 상태
item 3에게 flex-gorw: 3을, 나머지에게 flex-grow: 1을 준 상태
.item:nth-child(1) {
flex-grow: 1;
}
.item:nth-child(2) {
flex-grow: 2;
}
.item:nth-child(3) {
flex-grow: 3;
}
item1~3에게만 각각 flex-grow:1~3을 주고, 나머지에게 flex-grow 값을 주지 않은 상태
.item:nth-child(1) {
flex-shrink: 1;
}
.item:nth-child(2) {
flex-shrink: 2;
}
.item:nth-child(3) {
flex-shrink: 3;
}
1~3번째 item에게 각각 flex-shrink: 1~3을 준 상태
를 쓰면 flex item을 정렬할 수 있습니다.
flex container에게 지정하며, 값은 다음 5개 입니다.
justify-content: flex-start; ⇒ 왼쪽 to 오른쪽 정렬, 또는 위 to 아래 정렬 [初期値]
justify-content: flex-end; ⇒ flex-start의 역순
justify-content: space-between; ⇒ flex item이 균일한 간격으로 정렬됨
justify-content: space-around; ⇒ flex item이 균일한 간격으로 정렬되나, 양 끝에 그 간격의 절반만큼의 여백이 생김
justify-content: center; ⇒ flex item이 container의 정중앙으로 정렬됨
justify-content: space-between
justify-content: space-around;
justify-content: center;
align-items: flex-start; ⇒ 위쪽 정렬
align-items: flex-end; ⇒ 아래쪽 정렬
align-items: cetner; ⇒ 상하좌우 가운데 정렬
align-items: baseline; ⇒ 첫 번째 flex item의 baseline에 맞춰 정렬
align-items: stretch; ⇒ container에 맞춰 flex item이 늘어남
.container {
align-items: center;
}
.item:nth-child(1) {
align-self: flex-start;
}
.item:nth-child(2) {
align-self: flex-start;
}
.item:nth-child(5) {
align-self: flex-end;
}
.item:nth-child(6) {
align-self: flex-end;
}
container에게 center && item 01,02에게 flex-start && item05, 06에게 flex-end를 준 모습
1) 반응형 폼 양식
https://codepen.io/nykim_/pen/WMzvBK
See the Pen Registration Form with Flex Box (Responsive) by NY KIM (@nykim_) on CodePen.
.form-list*2 > label.form-label + input.form-input + .form-background.form-list {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
.form-input {
-ms-flex-positive: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.form-background {
position: absolute;
}
}
.header > h1.logo + button.search + button.logout + button.burger + ul.nav
.search {
width: 60px;
height: 60px;
-webkit-box-ordinal-group: -1;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
search icon에 order:-1을 준 모습
.search { order: 2; }
.logout { order: 1; }