flexbox를 사용하기 위한 4단계

앞으로는 flexbox만 사용할 것이라고 함....

원리 이해도 필요 없고,

잘 사용하는 방법에 대해서만 학습하면 된다고 한다.

step1. 나 flexbox 쓸거임

flexbox를 쓸거면 쓴다고 말을 해 줘야 할것임

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

flex도 일종의 box의 타입이다.
block이랑 비슷하지만 block은 할 수 없는 magical한 파워가 있다.

그럼 도대체 누구에게...?

정렬할 요소를 감싸고 있는 부모에게 flex 속성을 주면 된다.

step2. 가로 정렬? 세로 정렬?

flex-direction 속성에 대해 알아보자!

1. 가로/세로 방향을 정해주어야 한다.

두 번째로 어느 방향 (가로 / 세로)으로 정렬할 것인지를 정해주어야 한다.

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

2. 보이지 않는 2개의 축

flex를 하면 보이지 않는 두 개의 축이 생긴다.

flex-direction의 방향으로 Main axis가 생기게 되고,
거기에 수직으로 Cross axis가 생긴다.

1) row

row라고 정하면, 왼쪽에서 오른쪽으로 흐르게 되는데,

이렇게 왼쪽에서 오른쪽으로 Main axis의 방향이 정해지기 때문이다.

2) column

direction을 column으로 주었을 경우,
당연히 위에서 아래로 흐르게 된다.

3) row-reverse

이름에서부터 알 수 있듯, row의 반대방향으로 흐른다.

4) column-reverse

얘도 마찬가지로 column의 반대방향인 아래에서 위로 흐르게 된다.

step3. 무적권 한 줄 안에 다 정렬?

flex-wrap 속성에 대해 알아보자!

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

1) 어떻게든 한 줄 안에 정렬을 할 것인지 (nowrap)
2) 아니면 상황에 따라 여러줄에 정렬해도 되게 할 것인지 (wrap)

에 대해 정하는 것이다.

1. nowrap

지금처럼 부모의 width가 600px인 경우를 살펴보자.

flex-wrap: nowrap; 으로 설정해주는 경우,

이렇게 자식의 사이즈를 줄여서라도 한 줄로 정렬해 버린다.

float를 사용했을 때에는 상상도 할 수 없었던 기능이다!

float를 사용할 때에는 그냥 바로 아래로 튕겨나가게 되었었다....

2. wrap

하지만 자식을 반드시 300px로 유지해야 하는 경우가 있다면?

flex-wrap: wrap; 으로 설정해주면 된다!

wrap의 경우, 한 줄에 공간이 넉넉하지 않으면 차라리 여러 줄을 만들어 버린다.

step4. 신나는 flexbox 파뤼타임

다음 글에서 계속...