[CSS] Box - Flex

Flex

flex css 속성은 viewport나 요소의 크기가 불명확하거나 동적으로 변할 때 효율적으로 요소를 배치, 정렬할 수 있는 방법을 제공하는 layout이다.
복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치시킬 수 있다는 큰 장점이 있다.

크게 4step을 생각하자!

① flex box 선언

내가 정렬을 하고자 하는 요소를 지니고 있는 부모요소에게 display:flex;를 선언한다.

.flexbox {
 display: flex;
 /* flex | inline-flex */
}

② 가로정렬 or 세로정렬 선택

.flexbox {
 display: flex;
 flex-direction: row;
 /* row | row-reverse | column | column-reverse */
}

출처: WEBDIR :: CSS Flex 속성

③ 요소를 한 줄안에 다 넣을까? 여러줄로 만들까?

.flexbox {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 /* nowrap(기본값) | wrap */
}

(1) nowrap: 감싸지 않고 자식의 사이즈를 줄여서라도 한 줄로 정렬해버린다.

/* 부모요소 */
.flex-container {
 width: 500px;
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
}
/* 자식요소 */
.flex-items {
 width: 200px;
}

(2) wrap: 한 줄에 모두 정렬할 공간이 없으면 다음줄(여러줄)로 넘어간다.

/* 부모요소 */
.flex-container {
 width: 500px;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}
/* 자식요소 */
.flex-items {
 width: 200px;
}

④ flex box 사용

(1) Main axis일 경우 justify-content 사용

.flex-container {
  background-color: wheat;
  margin: 0 auto;
  width: 1000px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  /* flex-start | flex-end | center | space-between | space-around */
}

(2) Cross axis일 경우 align-itmes, align-content 사용
⭐차이점파악⭐
1) align-itmes일 경우

.flex-container {
  background-color: wheat;
  margin: 0 auto;
  width: 600px;
  height: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

2) align-content일 경우
align-content을 사용할 땐 flex-wrap: wrap; 이여야 한다.

.flex-container {
  background-color: wheat;
  margin: 0 auto;
  width: 600px;
  height: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
}

order

flex로 정렬된 요소들에게 순서를 지정하여 위치를 바꿀 수 있다.

.flex1 {
  background-color: red;
  order: 3;
}
.flex2 {
  background-color: yellow;
  order: 1;
}
.flex3 {
  background-color: blue;
  order: 2;
}