CSS요소8 - flex

3 분 소요

flex

▶️ flex 용어

용어	설명
`container`	바깥쪽 부모영역
`flex item`	내부의 요소들
`main axis`	주축(초기값 기준 가로축)
`cross axis`	교차축

▶️ display

요소의 유형을 지정한다

.container {
  display: flex;
}

바깥쪽(block, inline, inline-block)과 안쪽(flex, grid)의 관계로 나눌 수 있다
CSS2부터 가운데에 -를 사용해서 바깥쪽의 관계와 안쪽과의 관계를 설정할 수 있다 (display: inline-block)

▶️ flex-direction

container내에 item을 배치할때 주축 및 방향을 지정할 수 있다

.container {
  display: flex;
  flex-direction: column;
}

* 기본값 * main의 방향: → / cross의 방향: ↓

row: 주축의 방향을 → (기본값)
row-reverse: 주축의 방향을 ←
column: 주축의 방향을 ↓
column-reverse: 주축의 방향을 ↑

▶️ flex-wrap

flex container내의 item들을 한줄로 배치할지 여러줄로 배치할지 지정한다

.container {
  display: flex;
  flex-wrap: wrap;
}

nowrap: 부모요소를 벗어나더라도 한줄로 배치한다(기본값)
wrap: 여러행으로 배치한다
wrap-reverse: 여러행으로 배치하나(wrap), 순서가 반대로(시작점과 끝점)

▶️ flex-flow

단축속성으로 flex-direction과 flex-wrap을 한번에 지정할 수 있다

.container {
  display: flex;
  flex-flow: row wrap;
}
/* .container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
} */

direction과 wrap 순서로 지정한다

▶️ order

개별적으로 현재 요소의 배치 순서를 지정한다

.container {
  display: flex;
}
.item-2 {
  order: -1
}
/* 기본값이 0이므로 다른 item보다 앞에 배치 */

개별적으로 item에 지정한다
기본값은 0
낮은 값일수록 앞으로, 높은 값이면 뒤로 배치
같은 경우 코드상의 순서대로 배치
화면에 보이는 순서에만 영향을 준다(코드상에는 원래 순서대로 되어 있다)

▶️ flex-grow

남는 공간이 있을때 더 많은 영역을 차지할 수 있게 한다

.container {
  display: flex;
}
.item {
  flex-grow: 1;
}

기본값은 0
각 item이 동일한 값을 가지면 남은 공간을 각 아이템이 남는 영역을 같은 비율로 나눠가진다
item별로 flex-grow값의 비율에 따라 남는 공간을 나눠가진다
음수값은 허용하지 않는다
소수점 사용가능하다

▶️ flex-shrink

요소의 크기가 줄어들때 줄어드는 비율을 지정한다(item이 container가 더 클때)

.container {
  display: flex;
}
.item {
  flex-shrink: 1;
}

기본값이 1이므로 display:flex를 했을때 container가 줄어들때 item의 크기가 작아진다
값이 0이면 줄어들지 않는다
음수값이 허용되지 않는다
줄어든 영역을 비율만큼 각각 item이 줄어든다

▶️ flex-basis

flex내 item의 초기 크기를 지정한다

.container {
  display: flex;
}
.item {
  flex-basis: 100px;
}

box-sizing을 지정하지 않으면 컨텐츠박스의 크기를 변경
auto: 자동으로 변한다(기본값)
content: item의 크기에 따라 자동으로 변한다(auto와 동일)
값을 입력해서 동일한 너비를 가지게 할 수 있다
0으로 값이 들어가면 grow값을 주게 되면 item이 모두 동일한 크기를 가진다

▶️ flex

단축속성으로 item이 크기를 키우거나 줄어거나 할 때 비율을 지정할 수 있다

.container {
  display: flex;
}
.item {
  flex: 1 1 100px
}

- 각 속성의 초기값

속성	값
`flex-grow`	0
`flex-shrink`	1
`flex-basis`	auto

flex-basis와 다르게 단축성성 flex를 이용할 때 기입하지 않으면 0이 값이 된다
키워드 initial: (0, 1, auto)로 초기값이 됨
키워드 auto: (1, 1, auto)로 flex-grow값은 1이됨
키워드 none: width와 height에 따라 정해지고 크기의 변화가 없다 (0, 0, auto)

- flex 값이 한개일 때

값이 1개일때 flex-grow 값을 뜻한다
단위를 입력하면 flex-basis 값을 뜻한다

- flex 값이 두개일 때

첫번째 값으로 flex-basis가 올 수 없다 따라서 무조건 숫자만 위치할 수 있다
첫번째 값은 무조건 flex-grow이다

- flex 값이 세개일 때

순서대로 flex-grow, flex-shrink, flex-basis가 지정된다

▶️ justify-content

item을 주축(main)을 기준으로 어떻게 정렬할지를 지정한다

.container {
  display: flex;
  justify-content: center;
}

flex-start: 주축이 시작하는 지점부터 정렬한다
flex-end: 주축이 끝나는 지점부터 정렬한다
center: 가운데 정렬
space-between: item별 간격을 자동으로 정렬한다
space-around: item 앞뒤로 동일한 여백을 추가하며 정렬한다

▶️ align-items

전체 container 입장에서 item을 교차축(cross)을 기준으로 어떻게 정렬할지를 지정

.container {
  display: flex;
  align-items: start;
}

stretch: item이 차지할 수 있는 가장 넓은 영역을 차지한다
center: 가운데 정렬
flex-start: 교차축의 시작점을 기준으로 정렬한다
flex-end: 교차축의 끝점을 기준으로 정렬한다

요소가 여러줄일때는 align-content를 사용한다
(flex-start, flex-end, center, space-between, space-around)
여러줄일때 align-items이 적용되면 라인 수만큼 가상의 container를 각각 만든 것처럼 동작한다
(flex-end일때 원래는 가장 아래로 정렬되야 한다면 층마다의 아래쪽에 배치가 된다)

▶️ align-content

여러줄일때 교차축에 대한 정렬을 지정한다

.container {
  display: flex;
  align-content: center;
}

flex-start: 교차축이 시작하는 지점부터 정렬한다
flex-end: 교차축이 끝나는 지점부터 정렬한다
center: 가운데 정렬
space-between: item별 간격을 자동으로 정렬한다
space-around: item 앞뒤로 동일한 여백을 추가해서 정렬한다

▶️ align-self

flex 정렬시, item별로 align(교차축정렬)을 지정할 수 있다

.container {
  display: flex;
  align-content: center;
}
.item-1 {
  align-self: flex-end;
}
/* item-1 만 아래로 배치된다 */

stretch: 차지할 수 있는 가장 큰 영역을 차지한다
center: 중앙에 위치한다
flex-start: 주축의 시작점에 위치한다
flex-end: 주축의 끝점에 위치한다
하나의 아이템만 다른값으로 별도지정하고 싶을때 사용한다
각 아이템에 지정한다

Twitter Facebook LinkedIn

원종빈