flexytale project. CSS Flex(Flexible Box)

1. flex속성을 사용하는 이유

 

flex 속성이 만들어지기 전에는 수평(왼쪽에서 오른쪽으로)으로 요소들을 정렬하기 매우 어려웠습니다.

수직(위에서 아래로)으로 레이아웃을 구성할 때는 간단하게 block속성인 요소들을 이용하면 되었지만 수평으로 구성할 경우에는 table태그를 사용하거나, overflow와 float속성을 이용하거나, inline-block 요소를 이용하는 등 통일되지 않은 방법을 사용해야 했습니다.

 

그래서 나온 것이 flex 속성입니다. flex속성을 통해 우리는 수평, 수직 구조를 명확하게 사용할 수 있습니다.

 

 

2. flexible box의 표현

//html

<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

//css

.box-container {
  display: flex;
  //이 이후 flex관련 속성들을 작성한다
}

 

3. flexible box의 개념flexible box를 구성하기 위해서는 두 종류의 태그가 필요합니다. 정렬할 요소를 나타내는 자식 태그와 그 요소를 감싸는 부모 태그가 있어야 합니다. 이를 각각 item과 container라고 부릅니다.

주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다.
Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있으며,
Items에는 order, flex, align-self 등의 속성을 사용할 수 있습니다.

둘 모두 container에 display:flex를 적용해야 사용할 수 있습니다.

 

4. display

display: flex; display: inline-flex;

 

5. container에 적용되는 속성

flex, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

 

6.items에 적용되는 속성

 order, align-self

 

 

# align-items와 align-content 차이

https://letsgojieun.tistory.com/49

//align-items는 수직축의 라인을 기준으로 아이템들이 정렬이 되고,

align-content는 수직축의 라인을 기준으로 (두 줄 이상 일 때만) 라인 자체가 정렬이 된다.