.png)
[CSS] flex
- 레이아웃을 위한 전용 기능이기 때문에 float나 inline-block보다 강력하고 편리하다.
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">helloflex</div>
</div>- 부모 요소를 flex container라 부르고 자식 요소를 flex item이라 부른다.
flex 적용
- display 속성으로 flex를 적용할 수 있다
.container {
display: flex;
}- flex 아이템들은 가로 방향으로 배치되며 contents의 width만큼 차지하게 된다.
- 아이템들이 배치된 방향의 축을 메인축(main axis), 메인축과 수직인 축을 교차축 (cross axis)이라 부른다.
- height는 컨테이너의 높이만큼 늘어난다.
flex-direction
.container {
flex-direction: row;- 아이템들이 배치되는 축의 방향을 결정하는 속성이다.
- row(기본값) : 아이템들이 가로 방향으로 배치된다.
- row-reverse : 아이템들이 역순으로 가로 배치된다.
- column : 아이템들이 세로 방향으로 배치된다.
- column-reverse : 아이템들이 역순으로 세로 배치된다.
flex-wrap
.container {
flex-wrap: nowrap;- 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유가 없을 때, 줄바꿈을 어떻게 할지 결정하는 속성이다.
- nowrap(기본값) : 줄바꿈 없이 넘치도록 한다.
- wrap : 줄바꿈을 한다.
- wrap-reverse : 줄바꿈을 하되 아이템을 역순으로 배치한다.
justify-content
.container {
**justify-content**: flex-start;
}- 메인축 방향으로 아이템들을 정렬하는 속성이다.
- flex-start(기본값) : 아이템들을 시작점으로 정렬한다.
- flex-end : 아이템들을 끝점으로 정렬한다.
- center : 아이템들을 가운데로 정렬한다.
- space-between : 아이템들 사이에 균일한 간격을 두어 정렬한다.
- space-around : 아이템들 둘레에 균일한 간격을 두어 정렬한다.
- space-evenly : 아이템들 사이와 양 끝에 균일한 두어 정렬한다.
.png)
- 아이템들의 행이 2줄 이상 되었을 때 align-content 속성을 유사하게 사용할 수 있다.
align-items
.container {
**align-items**: stretch;
}- 수직축 방향으로 아이템을들 정렬하는 속성이다.
- stretch(기본값) : 아이템들이 수직축 방향으로 끝까지 늘어난다.
- flex-start : 아이템들을 시작점으로 정렬한다.
- flex-end : 아이템들을 끝점으로 정렬한다.
- center : 아이템들을 가운데로 정렬한다.
- baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬한다.
flex-basis
- flex 아이템의 기본 점유 크기를 설정하는 속성이다.
.item {
flex-basis: auto;
/* flex-basis: 0; */
/* flex-basis: 50%; */
/* flex-basis: 300px; */
/* flex-basis: 10rem; */
/* flex-basis: content; */
}- flex-basis 값보다 컨텐츠의 크기가 더 크면 크기가 유지된다.
- width를 설정하면 설정 값에 맞춰진다.
flex-grow
- 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다.
.item {
flex-grow: 1;
/* flex-grow: 0; */ /* 기본값 */
}- 0보다 큰 값이 설정되면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다 커져 빈 공간을 메우게 된다.
- flex-grow에 들어가는 숫자는 여백의 비율을 의미한다.
flex-shrink
- 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성이다.
.item {
flex-basis: 150px;
flex-shrink: 1; /* 기본값 */
}- 0보다 큰 값이 설정되면 해당 아이템이 유연한 박스로 변하고 flex-basis보다 작아질 수 있다.
- 기본값이 1이기 때문에 따로 세팅하지 않아도 아이템이 flex-basis보다 작아질 수 있다.
- 고정폭의 column을 쉽게 만들 수 있다.
align-self
- 아이템을 수직축으로 정렬하는 속성이다.
.item {
align-self: auto;
/* align-self: stretch; */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
/* align-self: baseline; */
}- align-self는 align-items보다 우선권이 있다.
P.S.
flex만으로도 구현하고자 하는 레이아웃은 모두 구현할 수 있겠다는 생각이 들었다😲 특히 flex-basis 속성이 굉장히 놀라웠다. 특정 값을 세팅하는 것이 아니라 내부적으로 기준값을 잡아준다는 점에서, 페이지를 깔끔하게 구현하기 참 좋은 속성이라는 생각이 들었다🙃
