CSS 중 가장 애정하고 애용하는 Flex를 가장 첫 주제로 가져왔다.
레이아웃을 담당하는 Float, Flex, Grid 중 Flex를 가장 좋아하는 이유는 무엇보다 편하고 직관적이다.
["Can I use?" 검색 결과]
display: flex;
레이아웃을 담당하는 만큼 주로 div처럼 안에 엘리먼트를 여러개 가지고 있는 부모 엘리먼트에 지정하는 경우가 많다.
Flex 스타일 지정 전)
<html>
<body>
<div class="box-container">
<div class="item" style="background-color: lightblue;">A<br>A</div>
<div class="item" style="background-color: lightcoral;">BBBB</div>
<div class="item" style="background-color: lightgreen;">CCCCCCCCC</div>
</div>
</body>
</html>
div의 display 기본 값은 block이므로 기본적으로 가로 영역을 다 채우고 다음 요소는 다음 줄에 배치된 것으로 보인다.
Flex 스타일 지정 후)
.box-container {
display: flex;
}
flex를 적용시키면 width와 height가 다음과 같이 자동으로 지정된다.
주축이 행(가로)일 경우 - 기본
- width: 각 아이템의 width 만큼 영역차지
- height: 모든 아이템이 부모 엘리먼트의 height 만큼 영역차지
이는 주축이 행(가로)일 때의 경우이며, 주축이 열(세로)일 경우에는 반대로된다.
주축이 열(세로) 경우
- height: 각 아이템의 height 만큼 영역차지
- width: 모든 아이템이 부모 엘리먼트의 width 만큼 영역차지
다음은 display:flex;를 지정했을 경우 flex와 관련된 다른 속성들의 기본값이다.
하나씩 천천히 살펴보자!
flex를 적용한 엘리먼트에 적용하는 속성
.box-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: strech;
flex-wrap: nowrap;
flex-flow: row nowrap;
}1. flex-direction
flex-direction은 주축을 정하는 역할을 한다.
- row
- row-reverse
- column
- column-reverse
속성 값 명에서 추측할 수 있듯
- row는 행(가로)로, (가로가 주축)
- column은 열(세로)로, (세로가 주축)
- reverse는 아이템을 반대로
배치하는 것을 의미한다.
2. flex-wrap
부모 엘리먼트 크기보다 자식 아이템들이 차지하는 영역이 클 때 줄바꿈을 할지 말지 결정한다.
- nowrap (자식 아이템들이 차지하는 영역이 크더라도 줄바꿈 하지 않음)
- wrap (줄바꿈함)
- wrap-reverse (줄바꿈 후 각 줄을 반대로)
3. flex-flow
flex-direction 속성과 flex-wrap 속성을 flex-flow라는 축약 속성으로 합칠 수 있다.
.box-container {
display: flex;
flex-flow: row nowrap;
}4. justify-content
flex-direction에서 주축을 결정하면 justify-content는 주축의 방향 정렬을 결정한다.
- flex-start (주축의 시작점에서 시작)
- flex-end (주축의 끝점에서 시작)
- center (주축의 가운데)
- space-between (아이템 사이에 일정한 간격)
- space-around (아이템 왼쪽 오른쪽에 동일한 margin 추가한듯한 간격)
- space-evenly(아이템 양끝과 사이에 일정한 간격)
5. align-items
flex-direction에서 주축을 결정하면 align-items는 주축의 교차축의 방향 정렬을 결정한다.
- strech (교차축 방향으로 쭉 늘어나도록)
- flex-start (교차축의 시작점에서 시작)
- flex-end (교차축의 끝점에서 시작)
- center (교차축의 가운데)
- baseline (텍스트 베이스라인 기준)
6. align-content
flex-wrap이 wrap 상태에서 교차축의 방향 정렬을 결정한다.
- strech (교차축 방향으로 쭉 늘어나도록)
- flex-start (교차축의 시작점에서 시작)
- flex-end (교차축의 끝점에서 시작)
- center (교차축의 가운데)
- space-between (아이템 사이에 일정한 간격)
- space-around (아이템 왼쪽 오른쪽에 동일한 margin 추가한듯한 간격)
- space-evenly(아이템 양끝과 사이에 일정한 간격)
flex 엘리멘터 아래 아이템에 적용하는 속성
1. flex-basis
아이템의 기본 크기를 결정한다.
주축이 행(가로)일 때 width, 주축이 열(세로)일 때 height
* flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지
* width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선
* flex item이 많을 경우 width가 정확한 크기를 보장하지 않습니다.
* flex-basis 사용하지 않을 경우 width 대신 min-width 또는 max-width를 쓸 수 있습니다.
- auto (아이템의 width)
- content (아이템의 컨텐츠의 width)
- px, rem .... (사용자 지정)
2. flex-grow
아이템이 flex-basis의 값보다 커질 수 있는지를 결정
flex-grow 값이 양수일 경우 flexbox 안 아이템이 일정 비율로 채우도록 늘어나도록 하는 속성 (기본값 0)
flex-grow이 0 또는 1일 경우
flex-grow이 다양한 양수 값일 경우
출처: 이번에야말로 CSS Flex를 익혀보자
3. flex-shrink
아이템이 flex-basis의 값보다 작아질 수 있는지를 결정
4. flex
flex-grow, flex-shrink 속성과 flex-basis 속성을 flex라는 축약 속성으로 합칠 수 있다.
.item {
flow: 1 1 auto;
/* 기본값 flex: 0 1 auto; */
}
5. align-self
아이템의 교차축 방향 정렬을 결정하며, 속성값은 align-items와 동일하며, align-items 설정을 상속받는다. 마찬가지로 기본값은 auto이다.
6. order
순서를 바꿀 수 있는 속성
.item1 {
order: 2;
}
.item2 {
order: 1;
}