flex
레이아웃 배치를 위해 사용한다.
기본 구성은 아래와 같다.
<div class="container">
<div class="item">aaa</div>
<div class="item">bbbb</div>
<div class="item">ccccc</div>
</div>div class=container 를 flex container라 하고
div class=item 을 flex item이라 한다.
item이 배치되는 공간을 container라고 생각하는게 이해가 쉬울 것 같다.
컨테이너에 적용하는 속성
1. display:flex
display:flex 설정할 경우 해당 이미지 처럼 배치된다.
flex item 들은 기본적으로 가로로 배치 되며 width는 컨텐츠의 width 만큼만 차지한다.
height는 기본적으로 container 만큼 늘어난다.
이미지를 보면 알 수 있듯이 flex에는 메인축(main axis)과 수직축(교차축,cross axis)가 있다.
메인축(main axis)은 아이템이 정렬된 방향
수직축(교차축, cross axis)은 메인축과 수직 방향
쉽게 이해를 하기 위해 메인축을 오뎅꼬치에 비유하면 좋다고 한다.
2. flex-direction
오뎅꼬치(메인축)의 방향을 결정한다.
1) flex-direction: row (기본값)
아이템들이 가로 방향으로 배치된다.
2) flex-direction: row-reverse
아이템들이 가로 방향 역순으로 배치된다.
3) flex-direction: column
아이템들이 세로 방향으로 배치된다.
4) flex-direction:column-reverse
아이템들이 세로방향 역순으로 배치된다.
3. flex-wrap
줄바꿈 관련된 설정을 할 수 있다.
1) flex-wrap:nowrap(기본값)
줄바꿈을 하지 않는다.
2) flex-wrap:wrap
넘칠 경우 아래로 줄바꿈을 한다.
3) flex-wrap:wrap-reverse
넘칠 경우 위로 줄바꿈을 한다.
※줄바꿈을 하면서 비어진 공간은 컨텐츠 크기에 맞게 줄어든다.
4. flex-flow
flex-direction 과 flex-wrap을 한번에 지정할 수 있는 단축 속성이다.
flex-flow:row wrap은
flex-direction: row;
flex-wrap: wrap;과 같은 의미이다.
정렬
justify
오뎅꼬치(메인축) 방향으로 아이템들을 꺼내 먹는다.
align
수직축(교차축) 방향으로 아이템들을 뜯어 먹는다.
justify-content
- 메인축 방향 정렬
1) justify-content:flex-start
아이템들을 시작점부터 정렬
2) justify-content:flex-end
아이템들을 끝점부터 정렬
3) justify-content:center
아이템들을 가운데로 정렬
4) justify-content:space-between
아이템들끼리 동일한 간격으로 정렬
5) justify-content:space-around
아이템들의 둘레를 기준으로 동일한 간격으로 정렬
6) justify-content:space-evenly
아이템들 사이 와 양끝을 동일한 간격으로 정렬
align-items
1) align-items:stretch
아이템들이 수직축 방향으로 늘어난다.
2) align-items:flex-start
아이템들이 시작점으로 배치된다.
3) align-items:flex-end
아이템들이 끝점으로 배치된다.
4) align-items:center
아이템들이 가운데로 배치된다.
5) align-items:baseline
아이템들이 텍스트의 베이스라인 기준으로 배치된다.
align-content
flex-wrap:wrap 일 경우 컨텐츠가 컨테이너를 넘어갈경우 아래로 줄바꿈을 하게 되어 두줄 이상이 되는데 이 때 여러 행에 대해서 어떻게 정렬 할 건지 설정
justify-contet랑 비슷하며 가로로 배열되는게 세로로 배열된다 라고 생각하기
1) align-content:stretch
여러행 모두 세로로 늘어난다.
2) align-content:flex-start
여러행 모두 시작점(세로 기준이니까 시작점은 상단)
3) align-content:flex-end
여러행 모두 끝점(세로 기준이니까 끝점은 하단)
4) align-content:center
여러행 모두 가운데로 배열
5) align-content:space-beween
행끼리 동일한 간격으로 배열
6) align-content:space-around
각 행의 둘레를 기준으로 동일한 간격으로 배열
7) align-content:space-evenly (MS 계열 브라우저 불가능)
각 행, 위아래 기준으로 동일한 간격으로 배열
아이템에 적용하는 속성
1. flex-basis
- flex 아이템의 기본 크기를 설정(유연한 박스의 기본 영역)
- container에서 차지하는 영역 크기
1) flex-basis:auto(기본값)
해당 width값에 따라 변경. 지정된 width값이 없으면 컨텐츠 크기에 맞춰서 설정됨
2) flex-basis:0
아직 잘 모르겠지만 컨테이너 내에서 차지하는 영역이 0이라는 건가???
3) flex-bsis:100px
아이템 크기를 100px 로 맞추되 컨텐츠가 더 클 경우 컨텐츠 크기에 맞춰 설정됨
2. flex-grow
- 아이템이 flex-basis 보다 커질 수 있는지
- 숫자 값이 들어가는데 0보다 큰 값이 세팅되면, 해당 아이템이 유연한 박스로 변하고, 원래 크기보다 커지면서 빈공간을 메우게 된다.
- 여기서 숫자값의 의미는 flex-basis를 제외한 여백의 비율
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }
여기서 첫번째 아이템에 flew-grow 값이 1이 주어졌으므로 1의 여백, 두번째 아이템은 2가 주어졌으므로 2의 여백, 세번째 아이템은 1이 주어졌으므로 1의 여백으로 메꿔졌다.
3. flex-shrink
- 아이템의 크기를 고정할 것인지 말 것인지 결정하는 설정
- 숫자 값이 들어가며, 1보다 작을 경우 고정한다. 즉, 아이템의 크기가 flex-basis보다 작아지지 않는다.
- 고정될 크기는 width로 설정한다.
4.flex
- flex-grow, flew-shrink, flex-basis 의 설정값을 한번에 줄 수 있는 축약 속성
.item {
flex: 1;
}
.item {
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}여기서는 grow와 shrink의 값이 1로 주어졌으나, basis의 값이 안주어졌으므로 0% 라는 뜻이다.
.item {
flex: 1 1 auto;
}
.item {
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
}여기서는 grow와 shrink의 값이 1로 주어졌고, basis는 auto로 설정함
.item {
flex: 1 500px;
}
.item {
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}여기서는 grow와 shrink의 값이 1로 주어졌고, basis는 500px로 설정함
5. align-self
개별 아이템의 수직축 방향 정렬 - align-items 보다 우선권이 있다.
전체 설정보다 개별설정이 더 우선권이있다.
align-self:auto -> 부모 속성인 align-items에 따른다.
나머지 속성들은 align-items 속성과 동일한 개념이다.
align-self:stretch
align-self:flex-start
align-self:flex-end
align-self:center
align-self:baseline
6. order
아이템의 시각적 배치 순서를 설정한다.
단순 시각적 배치 순서 이며 구조적 순서와는 관련이 없다.
.item:nth-child(1) /* A */
.item:nth-child(2) /* B */
.item:nth-child(3) /* C */
.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */
이런식으로 시각적으로 보이는 순서를 변경할 수 있다.
7. z-index
기본값은 0이며 0보다 클 경우, 위로 올라온다.
[출처: https://studiomeal.com/archives/197] - [1분코딩]
