[ HTML / CSS 공부 ] 4. Flexbox란?

[ 이전 글 보기 ]

https://includecoding.tistory.com/220

[ HTML / CSS 공부] 3. CSS 기본구조

 

예제 기본 코드

<div class="container">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
      <div class="item item3">item3</div>
      <div class="item item4">item4</div>
      <div class="item item5">item5</div>
      <div class="item item6">item6</div>
      <div class="item item7">item7</div>
      <div class="item item8">item8</div>
      <div class="item item9">item9</div>
      <div class="item item10">item10</div>
</div>

div.container>div.item.item${item$}*10 이렇게 입력하면 위와 같은 코드가 나오게 됩니다.

[ 코드 입력 후 html 화면 ]

1. Flexbox와 Grid의 차이점

- flexbox는, 1차원 정렬을 하는 형식이다. 하지만, grid는, 2차원 정렬을 하는 형식이 차이가 있다.

 

2. Flexbox의 사용되는 속성

[참조할 만한 링크]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://studiomeal.com/archives/197

 

2-1. display : flex

- 기본 정렬은 row로 설정이 된다. 정렬을 바꿀 때는, flex-direction 속성을 사용하면 된다.

 

2-2. flex-direction

- row 또는 column으로도 사용해서, 가로 또는 세로로 정렬도 가능하고 row또는 column reverse가 따로 있는데

reverse는, 역으로 정렬을 시켜주기 때문에, item10부터 1까지 역으로 정렬을 시켜줄 것이다. 

 

2-3. flex-wrap : nowrap | wrap | wrap-reverse

- default로는, nowrap이 설정이 되어 있으며, wrap을 사용하게 되면

브라우저의 영역을 벗어나게 되면, 아이템을 밑으로 내려보내게 된다. wrap-reverse는, 거꾸로 표시된다고 생각하면 되겠다.

 

2-4. flex-flow

- flex-flow는, flex-direction과 flex-wrap을 한 번에 사용할 수 있는 축약형 속성이라고 생각하면 된다.

예를 들어, flex-flow : column wrap; 이렇게 지정하면, 세로로 정렬되고, 영역을 벗어나면

아이템에 크기에 맞게 다른 영역에 채워줘. 라고 한 번에 명령을 하게 된다.

 

2-5. justify-content

- 어느 곳에 아이템을 배치를 할 것인가에 대한 속성이다.

속성에 대해선, flex-start, flex-end, center, space-between, space-around, space-evenly 이렇게 6가지가 있고

위에 참조할 만한 링크를 클릭해서, justify-content쪽을 가면, 어떻게 배치가 되는 지를 확인할 수가 있다.

 

2-6. align-items

- align-items는, row로 정렬이 되어 있다면, 수직축을 어떻게 배열이 되는 지를 정해주는 속성이다.

속성의 값은, flex-start, flex-end, center, strectch, baseline이 있다.

이것 또한 위에 참조할 만한 링크를 클릭해서, align-items에 대한 부분을 보면 확인할 수 있다.

 

2-7. align-content

- align-content는, flex-wrap에서, wrap으로 설정 된 상태일 경우, 아이템들의 행이 2줄 이상이 되었을 경우

수직축의 방향 정렬을 결정하는 속성이라고 한다.

속성의 값은, stretch, flex-start, flex-end, center, space-between, space-around, space-evenly가 있다.

 

3. flex 아이템에 적용하는 속성들

3-1. order

- default는 order는 0이고, 각각 아이템의 순서를 정해줄 수 있다.

 

3-2. flex-basis

- flex 아이템의 기본크기를 설정하는 속성이다. flex-direction에 따라 다르게 설정되는데

flex-direction이 row라면, 너비 column이라면 높이를 설정하게 된다.



3-3. flex-grow

- flex-grow는, 아이템이 flex-basis의 값 보다 커질 수 있는 지를 결정하는 속성

default는 0으로 설정이 되어 있고, flex-grow가 0보다 큰 값이 세팅이 된다면,

아이템들이 유연하게 크기가 늘어나게 된다.

 

3-4. flex-shrink

- flex-grow가 아이템을 유연하게 늘리는 속성이라면, flex-shrink는 아이템을 유연하게 줄이는 속성이라고 보면 된다.

default 값은 1이며, 0보다 큰 값이 세팅이 된다면, 아이템은 유연하게 flex-basis보다 작아지게 된다.

 

3-5. flex

- 2번에서, flex-flow 처럼, flex 속성은 flex-grow, flex-shrink, flex-basis를 한 번에 지정할 수 있는 축약형 속성입니다.

예를 들어, flex : 1; 이라고 속성을 지정하면, flex-grow : 1 , flex-shrink : 1, flex-basis: 0% 이며,

flex: 1 1 auto; 라고 했다면, flex-grow : 1 , flex-shrink : 1, flex-basis: auto 이며,

flex: 1 500px; 이라고 했다면, flex-grow : 1 , flex-shrink : 1, flex-basis: 500px과 같아진다.