수직, 수평 정렬을 위해 사용되는 속성이다.
display: inline-block
설정하면 block element처럼 width, height, margin, padding을 가질 수 있지만 아래 처럼 요소 간에 띄어쓰기가 적용된다..<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
border: 2px solid blue;
}
.item {
width: 100px;
height: 100px;
border: 2px solid black;
display: inline-block;
}
flex는 container와 item이라는 개념이 있다. container는 item들을 감싸고 있는 부모 요소가 된다. item을 정렬하기 위해서는 container가 필요하다.
display
, flex-flow
(flex-direction, flex-wrap), justify-content
, align-content
, align-items
flex
(flex-grow, flex-shrink, flex-basis), align-self
display
flex container를 정의한다.
flex
: block 특성을 가진 container -> 컨테이너가 수직 정렬inline-flex
: inline 특성을 가진 container -> 컨테이너가 수평 정렬flex-flow
flex-direction
, flex-wrap
의 단축 속성
flex-flow: 주축 줄바꿈
flex-direction
: flex item의 주축, 시작 방향 설정flex-wrap
: flex item의 줄 바꿈을 설정flex-direction
flex-wrap
flex container 안에 있는 item들은 container의 너비에 따라 크기가 바뀔 수 있다. (item들은 flex-basis: auto를 기본 값으로 가지고 있는데 이렇게 되면 가로. 세로 값이 바뀔 수 있는 형태이다.)
<div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> </div>
.container { border: 2px solid blue; display: flex; } .item { width: 200px; height: 100px; border: 2px solid black; }
둘 다 width: 200px로 정의했는데 display: flex를 하면 row 방향으로 한 줄 표시되면서 item의 width가 줄어든다.
justify-content
주축의 정렬 방법 설정
flex-start
(defualt value): 시작점을 기준으로 정렬flex-direction: row-reverse(주축: row, 시작점은 끝에서 부터), justify-content: flex-start
flex-end
: 주축의 끝나는 점을 기준으로 정렬center
: 주축을 기준으로 가운데 정렬space-between
: 첫번째와 마지막 item을 container의 시작점, 끝점에 맞추고 남은 공간을 통해 item들을 정렬space-around
: item들 사이의 여백을 균등하게 분배하여 정렬align-content
교차 축의 정렬 방법 설정
flex-wrap
으로 줄 바꿈 설정이 되어있고, 교차 축 방향으로 여백이 있는 경우에만 사용 가능 (item이 한 줄인 경우에는 align-items
사용)
stretch
(defualt value): container의 교차 축을 채우기 위해 item을 늘린다. (item의 높이가 지정되어 있지 않은 경우).container {
height: 300px;
border: 2px solid blue;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.item {
width: 100px;
height: auto; /* or 100px */
border: 2px solid black;
}
flex-start
: 교차 축의 시작점을 기준으로 정렬flex-end
: 교차 축의 끝점을 기준으로 정렬center
: 교차 축을 기준으로 가운데 정렬space-between
space-around
align-items
교차 축의 정렬 방법 설정
item들이 한 줄일 경우 사용된다.
item들이 flex-wrap
을 통해 줄바꿈 설정되어 있는 경우에는 align-content
속성이 우선된다. (align-items
를 사용하려면 align-content: stretch
로 설정)
stretch
(defualt value): container의 교차 축을 채우기 위해 item을 늘린다. (item에 높이 지정이 안되어 있는 경우)flex-start
: 교차 축의 시작점을 기준으로 정렬flex-end
: 교차 축의 끝점을 기준으로 정렬center
: 교차 축을 기준으로 가운데 정렬baseline
: item 안에 있는 문자열을 기준으로 정렬.container {
height: 300px;
border: 2px solid blue;
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.item {
width: 100px;
height: 100px;
border: 2px solid black;
}
.container .item:nth-child(3) {
font-size: 50px;
}
order
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
.container {
border: 2px solid blue;
display: flex;
}
.item {
width: 100px;
height: 100px;
border: 2px solid black;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.item1 {
order: 1;
}
.item4 {
order: -1;
}
flex-grow
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
.container {
border: 2px solid blue;
display: flex;
}
.item {
width: 100px;
height: 100px;
border: 2px solid black;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.item1 {
flex-grow: 1;
/* item1이 가지고 있는 100px width는 무시되고, container에서 차지할 수 있는 최대 너비를 차지함. (item 2 3은 100px씩 차지한 후) */
}
-> flex-basis, width 속성에 영향을 받을 수 있다.
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
1번과 2번 아이템의 비율이 정확이 2배 차이 ㄴㄴ
flex-shrink
width: 고정 너비, flex-basis: 기본 너비
고수시네요