[CSS3]Flexbox

🤔 Flex Box

우리가 flexbox를 사용할 때 4가지 사고를 가지고 사용하면 된다.

1. 플렉스 사용 (선언)

2. 가로 정렬 or 세로 정렬

3. 무조건 한 줄 안에 다 정렬? or 여러 줄 정렬?

-----(준비과정)-----

4. flexbox 사용하면 된다.

 

😃Flexbox 사용 준비 과정

1️⃣ 선언

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

❗ flex도 box의 type 중 하나이다.

 

flex는 block과 비슷하지만 요소를 쉽게 정렬할 수 있다.

inlin-flex는 inline-block과 비슷하지만 요소를 더 쉽게 정렬할 수 있다.

 

✨Flex를 사용하고자 할 때는정렬을 하고자 하는 요소를 감싸는 부모한테 적용을 하면 된다.

 

2️⃣ 가로 정렬 or 세로 정렬

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

가로 방향 정렬: row, row-reverse

세로 방향 정렬: column, column-reverse

 

주의❗❗

flex를 사용했을 때 우리는 보이지 않는 Axis(축)가 2개가 (Main axis, Cross axis) 생긴다.

flex-direction값이 무엇이냐에 따라 Axis가 생기는 형태가 달라진다.

 

Main axis는 우리가 설정한 방향과 동일하게 설정이 되고

Cross axis는 우리가 설정한 방향에 수직으로 설정된다.

 

3️⃣ 한 줄 정렬 or 여러 줄 정렬

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* nowrap | wrap */
}

한 줄에 다 정렬할 것인지, 여러 줄에 걸쳐 정렬할지 정하기 위해선 감싸기(wrap)을 사용하면 된다.

 

nowrap은 "감싸지(wrap) 않고 자식의 사이즈를 줄여서 한 줄로 정렬한다."이며

요소의 기본 값은 nowrap으로 설정되어있다.

 

wrap은 "감싸겠다(wrap), 한 줄에 정렬하기 공간이 넉넉하지 않을 시 여러 줄을 만들어 버린다." 뜻이다.

 

👍여기까지는 flex를 사용하기 위한 준비 과정이다.

---

4️⃣ Flex 사용

Main axis와 Cross axis를 유의하며 사용해야 한다!

 

❗ Main axis use ❗

✔justify-content

(Flex요소들을 중심축(main axis) 정렬)

 

❗ Coss axis use ❗

✔ align-items

(Flex요소들을 반대 축(cross axis) 정렬)

✔align-content

(세로선 상에 여분의 공간이 있는 경우 flex 컨테이너 사이의 간격을 조절)

 

📢wrap으로 두 개의 공간으로 분리되었을 때

전체 공간을 옮기고자 할때는 align-content를 사용하고

각각 분리된 공간을 옮기고자 할 때는 align-items를 사용하면된다.

(이부분이 헷갈린다면 items를 먼저 사용해보고 content도 사용해보면 알 수 있다!)

.flexbox{
	justify-content: center;
  /* flex-start | flex-end | center | space-beteween | space-around*/
    align-items: flex-end;
  /* flex-start | flex-end | center */
  align-content: flex-end;
  /* flex-start | flex-end | center | space-beteween | space-around*/
}
/*해당 key값을 사용할 수 있다,*/

 

 

❗ 추가로 중요한 것 ❗

✔order

(flex box의 순서 변경)

✔flex-flow

(flex-direction+flex-wrap) 방향 감싸기 한 번에 설정