CSS #12 -Flex1-

1. Flex 개요

수직정렬과 수평정렬을 하는 방법을 Flex를 통해서 완벽하게 구현할 수 있다.

<div class="container">
  <div clss="item"></div>
  <div clss="item"></div>
  <div clss="item"></div>
</div>

.container{
border: 2px solid red;
}
.container .item{
width:100px;
height:100px;
border: 2px solid;
border-radius:10px;
display:inline-block;
}

💡inline-block을 쓰는 경우 inline의 기본적인 특성을 갖지만 block요소처럼 가로세로와 마진과 패딩의 위 아래 값을 쓸 수 있었다.

💡여기서 위의 예시를 실행해보면 요소와 요소들 사이에 여백이 들어가 있는데 엄밀히 말하면 띄어쓰기 한칸이 들어가 있다.
즉, 각각의 아이템들이 HTML에 줄바꿈이 되어있으며 이것이 띄어쓰기로 들어간 것으로 글자화된 것이다.
이런 문제들을 해결하기 위해서 우리는 .container안에 font-size:0;으로 설정했었다.
💡또한 만약 HTML에 div태그 안에 글을 기입하는 경우 실제 실행화면에서 나오지 않는 문제 때문에 .container .item에 font-size를 다시 적어줘야만 했다.

여기서 또다른 해결점으로 우리는 .container .item에 float:left값을 설정해줬었다.
여기서 float은 요소를 띄우는 속성으로 컨테이너가 요소를 감싸지 못하는 결과가 나오기 때문에
.clearfix::after을 이용해서 display:block, clear:both로 설정해주었다.

💡그렇다면 대체제가 아닌 Flex를 이용하는 방법은 무엇이 있을까?

<div class="container">
  <div clss="item"></div>
  <div clss="item"></div>
  <div clss="item"></div>
</div>

.container{
border: 2px solid red;
display:flex;
}
.container .item{
width:100px;
height:100px;
border: 2px solid;
border-radius:10px;
}

이렇게 display:flex라는 개념을 이용해서 수평화 하는데 대단히 단순한 방법을 살펴 볼 수 있다.
그렇다면 이 flex라는 것에 대한 요소에 대해서와 각 제어에 대해서 알아보자.

---

2. Flex containers속성-display

flex container에 대한 속성을 알아보고 첫 번째로 display라는 속성을 알아보자.

속성	의미
display	flex container를 정의
flex-flow	flex-direction와 flex-wrap의 단축속성
flex-direction	flex items의 주축(main-axis)을 설정
flex-wrap	flex item의 여러 줄 묶음(줄바꿈)설정
justify-content	주 축(main-axis)의 정렬 방법을 설정
align-content	교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
align-items	교차 축(cross-axis)에서 items의 정렬 방법을 설정(1줄)

1.display

display를 통해서 컨테이너를 정이할 수 있는 방법은 두 가지가 있다.

속성	의미	기본값
Flex	block 특성의 Flex Container를 정의
inline-flex	inline 특성의 Flex Container를 정의

그렇다면 inline-flex와 flex의 차이점은 무엇일까?
💡display:flex의 경우 마치 block요소와 같은 모양세다
display:inline-flex의 경우 inline요소는 수평으로 쌓이다.

flex과 inline-flex의 경우 기본적으로 flex의 컨테이너를 정의한다는 것은 일치하지만 요소가 마치 인라인요소와 같은지 블락요소와 같을지에 대한 차이가 있다.

<div class="container">
  <div clss="item"></div>
  <div clss="item"></div>
  <div clss="item"></div>
</div>
<div class="container">
  <div clss="item"></div>
  <div clss="item"></div>
  <div clss="item"></div>
</div>

.container{
border: 2px solid red;
display:flex;
}
.container .item{
width:100px;
height:100px;
border: 2px solid;
border-radius:10px;
}

이 경우 block요소와 같이 위에서 아래로 수직구조를 가지게 된다.(컨테이너 자체가)

<div class="container">
  <div clss="item"></div>
  <div clss="item"></div>
  <div clss="item"></div>
</div>
<div class="container">
  <div clss="item"></div>
  <div clss="item"></div>
  <div clss="item"></div>
</div>

.container{
border: 2px solid red;
display:inline-flex;
}
.container .item{
width:100px;
height:100px;
border: 2px solid;
border-radius:10px;
}

inline-flex를 위와 같이 실행시켜보면 수평구조로 쌓이는 것을 볼 수 있다.

---

3. Flex containers속성-flex-flow,flex-direction

1. flex-flow

이 속성은 단축속성으로 Flex items의 주축(main-axis)을 설정하고 items의 여러 줄 묶음(줄 바꿈)도 설정합니다.

속성	의미	기본값
flex-direction	items의 주축(main-axis)을 설정	row
flex-wrap	items의 여러 줄 묶음(줄 바꿈)설정	nowrap

#flex-direction

속성	의미	기본값
row	items를 수평축(왼쪽에서 오른쪽으로)으로 표시	row
row-reverse	items를 row의 반대(오른쪽에서 왼쪽으로) 축으로 표시
column	items를 수직축(위에서 아래로)으로 표시
column-reverse	items를 column의 반대(아래서 위로)축으로 표시

---

4. Flex 주축과 교차축, 시작점과 끝점

여기서 기본적의로 felx-direction:row이면 주축이 가로이다.
또한 flex-directon:column이면 주축이 세로축이다.

---

5. Flex container속성-Flex wrap

Items의 여러 줄 묶음(줄 바꿈)을 설정한다.

속성	의미	기본값
nowrap	모든 items를 여러 줄로 묶지 않음(한줄표시)	nowrap
wrap	items를 여러 줄로 묶음
wrap-reverse	items를 wrap의 역 방향으로 여러 줄로 묶음

예시)

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>

.container{
border: 4px solid;
display:flex;

}
.container . item{
width:150px;
height:100px;
background:tomato;
border: 4px dashed red;
}

가로 사이즈를 150px로 설정했지만 무언가 줄어든 느낌을 받게 된다.
기본적으로 flex basis값을 auto로 가지고 있기 때문인데, auto로 되어있다면 가로세로가 가변된다는 값으로 선언 되어있다고 생각하면 된다. 이후에 flex basis에 대해서 배워보자.

여기서 flex-wrap을 wrap으로 설정하게 되면 크기에 맞게 정렬되는 것을 볼 수 있다.

---

6. Flex container 속성-justify-content

주 축의 정렬방법을 설정한다.

속성	의미	기본값
flex-start	items를 시작점(flex-start)으로 정렬	flex-start
flex-end	items를 끝점(flex-end)으로 정렬
center	items를 가운데 정렬
space-between	시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지 items는 사이에 고르게 정렬된다.
space-around	items를 균등한 여백을 포함하여 정렬

💡사용법
justify-content: 정렬방법;

---

7. Flex container속성-align-items

교차 축의 정렬 방법을 설정한다.
주의할 점은 flex-wrap속성을 통해 items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있다.

속성	의미	기본값
stretch	container의 교차 축을 채우기 위해 items를 늘림	stretch
flex-start	items를 시작점(flex-start)으로 정렬
flex-end	items를 끝점(flex-end)으로 정렬
center	items를 가운데 정렬
space-between	시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지 items는 사이에 고르게 정렬됨
space-around	items를 균등한 여백을 포함하여 정렬

💡사용법

align-content: 정렬방법;