CSS : flex

예전에는 HTML 화면을 배치하기 위해서 float 이라는 속성을 많이 이용했다고 한다.
그런데 float 은 예상하지 못했던 동작들이 많이 발생하고, 원하는 대로 화면을 구성하기 위해서 필요없는 HTML 요소를 추가적으로 작성해야하는 일이 생길수도 있다.
그런데 flex 를 사용하면 이런 불편함을 해소할 수 있을 뿐더러, 반응형웹도 수월하게 제작하는 것이 가능해진다.
사용방법은 display 속성에 flex 라고 정의만 해주면 된다.

display : flex

그 후 컨테이너의 속성과, 컨테이너 안의 아이템들의 속성을 정의해서 요소를 배치한다.

flex는 컨테이너 속성 과 아이템 속성 이 있다.

컨테이너 속성

• flex-direction
• flex-wrap
• flex-flow
• align-items
• align-content

flex-direction

정렬할 방향을 지정한다.

• row (default)
• row-reverse
• column
• column-reverse
  

#주의할 점
flex-direction 을 지정하지 않게 되면 기본적으로 왼쪽에서 오른쪽으로 정렬된다. 그런데 만약 원하는대로 움직이지 않는다면, 상위 태그의 direction 속성 값이 rtl 인지 확인해봐야 한다. 이럴 경우는 거의 없을 것 같지만 body 의 direction 이 rtl 인 경우는 반대로 정렬된다.

flex-wrap

지정한 공간을 벗어났을 때 요소들의 배치를 지정한다.

• nowrap (default)
• wrap
• wrap-reverse
  

flex-flow

flex-direction, flex-wrap 의 속성을 단축해서 쓸 수 있다. 아직 지원하지 않는 브라우져가 있으니 확인해봐야 한다.

• flex-flow : row-reverse wrap;

justify-content

플랙스 요소들을 가로선 상에서 정렬한다.

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly
  

align-items

플랙스 요소들을 세로선 상에서 정렬한다.

• flex-start
• flex-end
• center
• stretch
• baseline

align-content

세로선 상의 여분의 공간이 있는 경우, 플랙스 컨테이서 사이의 여분의 간격을 조정한다.

• flex-start
• flex-end
• center
• space-between
• space-around

아이템 속성

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

• 플랙스 요소의 순서를 지정한다.
• 기본 값은 0이다.
• 음수를 지정하면 가장 첫번째 아이템이 지정된다.

기본적으로 플랙스 아이템들은 왼쪽에서 오른쪽의 순서대로 배치되는데, order 를 통해서 특정 아이템을 먼저 배치하는 것이 가능하다.

아래 소스의 결과는?

<div class="div_container">
      <div class="div_box">1</div>
      <div class="div_box">2</div>
      <div class="div_box">3</div>
      <div class="div_box">4</div>
</div>

.div_box {
  width: 200px;
  height: 100px;
  margin: 20px 20px;
  background-color: lightcoral;
  text-align: center;
  line-height: 100px;
}

.div_container :nth-child(1) {
  order: 4;
}

flex-grow

---