CSS - flex box : display flex, CSS 개구리게임 (flex 게임)

기존에 레이아웃을 구성할 때는 각 요소에 원하는 위치 조절 속성 ( display, position, float)을 이용하여 각 요소들을 직접 이동시켰다. 그래서 CSS에서 각 요소마다 위치를 정해주는 속성 및 속성 값을 사용하면서 코드 줄이 길어졌는데, flexbox를 이용하면 간단하게 레이아웃을 구성할 수 있게 된다.

CSS - position (블럭 위치조절 3가지 방법)

CSS - position (블럭 위치조절 3가지 방법)

flex box

서로 다른 크기의 화면을 가진 기기에서도 HTML요소들이 자동으로 재정렬되어, 웹페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해 준다.(사용자 인터페이스 디자인을 위한 레이아웃 모델)

 

일반적인 flexbox는 크게 2가지로 구성되어 있는데, 1개의 container(상위태그) 와 여러 개의 item(하위태그)으로 이루어져 있다.

<div id="container">
    <div id="item1">1</div>
    <div id="item2">2</div>
    <div id="item3">3</div>
</div>

플렉스 박스의 컨테이너(상위 태그)와 아이템(하위 태그)을 잘 구분해야 하는 이유는

컨테이너(상위태그)에 사용 해야하는 속성과 아이템(하위태그)에 사용하는 속성이 구분되어 있기 때문이다.

상위 태그 속성

• display : flex;
  
  상위 태그에 display 를 flex로 설정하면서 적용한 본인 태그(상위 태그)를 flex box의 container로, 하위 태그를 item이 된다.
  밑에 나오는 속성들은 display:flex를 선언한 후에 적용 가능하다.

1. flex-direction : 요소들이 정렬할 방향을 지정한다.
   
   row: 요소들을 텍스트의 방향과 동일하게 정렬한다.
   row-reverse: 요소들을 텍스트의 반대 방향으로 정렬한다.
   column: 요소들을 위에서 아래로 정렬한다.
   column-reverse: 요소들을 아래에서 위로 정렬한다.
   
   중요한 부분
   ** Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 방향이 가로로 바뀐다..
   ** column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀐다.
   
   
   
   
2. justify-content : 요소를 가로선 상에서 정렬한다.
   
   flex-start: 요소들을 컨테이너의 왼쪽으로 정렬한다.
   flex-end: 요소들을 컨테이너의 오른쪽으로 정렬한다.
   center: 요소들을 컨테이너의 가운데로 정렬한다.
   space-between: 요소들을 좌우측으로 끝까지 붙인 뒤 사이에 동일한 간격을 둔다.
   space-around: 요소들 주위에 동일한 간격을 둡니다.(요소에 padding을 똑같이 주었다고 이해하면 된다.)
   space-evenly: 요소들 크기에 관계없이 동일한 간격을 둔다.
   
   
   
   
3. align-items : 요소를 세로선 상에서 정렬한다.
   
   flex-start: 요소들을 컨테이너의 꼭대기로 정렬한다.
   flex-end: 요소들을 컨테이너의 바닥으로 정렬한다.
   center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬한다.
   baseline: 요소들을 컨테이너의 시작 위치에 정렬한다.
   stretch: 요소들을 컨테이너에 맞도록 늘린다.
   
   
   
   
4. align-content : 여러 줄들 사이의 간격을 지정한다, 한 줄만 있는 경우, align-content는 효과를 보이지 않는다.
   
   flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬한다. (위로 밀기)
   flex-end: 여러 줄들을 컨테이너의 바닥에 정렬한다. (아래로 밀기)
   center: 여러 줄들을 세로선 상의 가운데에 정렬한다. (가운데 모으기)
   space-between: 여러 줄들 사이에 동일한 간격을 둔다.
   space-around: 여러 줄들 주위에 동일한 간격을 둔다.
   stretch: 여러 줄들을 컨테이너에 맞도록 늘린다.
   
   
   
   
5. flex-wrap :
   
   nowrap: 모든 요소들을 한 줄에 정렬한다.
   wrap: 요소들을 여러 줄에 걸쳐 정렬한다.
   wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬한다.
   
   
   
   
6. flex-flow :
   flex-direction과 flex-wrap를 같이 쓰는 경우가 많은데, flex-flow를 이용하여 둘을 한 속성으로 단축시켜서 사용할 수 있다.
   공백 문자를 이용하여 두 속성의 값들을 속성 값으로 받는다.

flex-flow : 방향 정렬;
flex-flow : row wrap;

하위 태그 속성

1. order: 현재 요소의 배치 순서를 지정한다.
   
   양수 or 음수를 이용해서 위치를 바꿔준다
   
   
   
   
2. align-self : 개별 요소에 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다. (클래스로 사용)
   
   flex-start: 요소들을 컨테이너의 꼭대기로 정렬한다.
   flex-end: 요소들을 컨테이너의 바닥으로 정렬한다.
   center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬한다.
   baseline: 요소들을 컨테이너의 시작 위치에 정렬한다.
   stretch: 요소들을 컨테이너에 맞도록 늘린다.

---

https://flexboxfroggy.com/

Flexbox Froggy

Flex 익히기 게임! 개구리게임!