[CSS]flex 속성

 display : flex (flex Box)

 

 요소의 정렬되는 방향, 순서, 요소 간의 간격을  하나 하나 수치적으로 처리하지 않아도

 

 브라우저가 알아서 유연하게 처리해 표시하는 방식

 

---

 

<flex 이용 시 반드시 알아야 되는 것>

1. flex의 구성

  

 - flex container 

 

    유연하게 처리할 대상(요소)를 감싸고 있는 요소

    - item

 

    유연하게 처리할 대상(요소)

 

 (flex 관련 속성은 flex container 전용 속성, item 전용속성으로 나뉨)

   

2. flex의 축(axis)

 

   2차원 평면에 요소를 유연하게 배치하기 위해 배치될 평면의

 

    - 중심축 (main axis)

 

    - 교차축 (cross axis)

 

flex container 전용 속성 

 

   1. display : flex

 

    - 감싸는 요소를 flex 형식으로 변경

 

        -> 내부에 작성되는 item을 유연하게 배치하겠다는 의미

    - 해당 속성이 적용되면 유연하게 배치할 수 있도록 내부 item의 자동으로 지정된 margin 속성이 사라진다.

    2. flex-direction : 중심축의 방향, 시작/끝 지정

 

    - row (기본값)  : x축, L -> R

 

    - row-reverse  : x축, R -> L

 

    - column : y축, U -> D

 

    - column-reverse : y축, D -> U

    3. justify-content : 중심축 방향을 기준으로 item 정렬

 

    - flex-start : 중심축 시작 지점을 기준으로 정렬

 

    - flex-end : 중심축 끝 지점을 기준으로 정렬(순서가 뒤집히진 않음)

 

    - center : 중심축 가운데 정렬

    - space-around : item에 중심축 방향으로 일정한 간격을 부여

 

 

    - space-evenly : item에 중심축 방향으로 동일한 간격을 부여

 

    - space-between : item에 중심축 방향으로 동일한 간격을 부여

 

                                  단, 양 끝은 flex-container에 붙게 한다

   4. align-items : 교차축을 기준으로 item 정렬

 

    - strech (기본값): item을 교차축 방향으로 꽉 찰만큼 늘림

                단, item에 교차축 방향 크기가 지정되어 있다면 적용 X

    - flex-start : 교차축 시작 지점에 배치

 

    - flex-end : 교차축 끝 지점에 배치

 

    - center : 교차축 가운데 지점에 배치

    - baseline :  item에 작성된 내용(content)이 한 직선에 배치될 수 있도록

                item을 교차축 방향을 알맞게 움직여 배치

#예제

[HTML]

[CSS]

 

#결과

 

5. flex-wrap : item이 한 줄/여러 줄로 배치 되게 지정

 

   - nowrap (기본값) : 한 줄로 배치, item의 크기가 변경(훼손)될 수 있음

 

    - wrap : 여러 줄로 배치

 

    - wrap-reverse : 여러 줄로 배치(cross axis 방향 반대)

 

 

6. flex-flow :  flex-direction  +  flex-wrap;

 

 

7. align-content : cross axis(교차축)을 기준으로 포장된(wrap) item들을 정렬

 

-> 조건 : flex-wrap이 wrap 또는 wrap-reverse 이여야 함

 

★앞에 무조건 flex-wrap: wrap;     or  flex-wrap: wrap-reverse;  있어야 함★

    - flex-start    : 축 시작 지점 기준으로 정렬

 

    - flex-end      : 축 끝 지점 기준으로 정렬

    - center        : 축 가운데 정렬

    - space-around  : item에 축 방향 양쪽으로 일정 크기 공간을 배치

    - space-evenly  : item에 축 방향 양쪽으로 모두 동일한 크기의 공간을 배치

    - space-between : space-evenly에서 시작, 끝 item은 flex-container 붙게 배치

#예제

 

[HTML]

 

[CSS]

  - viewport : 현재 화면에 보여지고 있는 영역  (현재 기기, 브라우저)

 - vw (Viewport Width)  : 현재 화면의 너비 비례 단위  (100vw == 화면 너비 100%)

   - vh (Viewport Height) : 현재 화면의 높이 비례 단위  (100vh == 화면 높이 100%)

#결과