[CSS]flex (Item 전용 속성)

 item 전용 속성

 

 

1. order  : item의 순서를 지정하는 속성

  

    - item이 중심축(main axis)에 배치되는 순서를 지정

 

    - 모든 item의 order 기본 값은 0

 

    - 작성할 수 있는 값은 정수 형태(+, 0, -)

 

    - 값이 클 수록 중심축 끝 쪽에 배치됨

 

    - 동일한 order 값을 갖는 경우 html 배치 순서를 따름

 

[HTML]

[CSS]

 

#결과

 

2. flex-grow : item 팽창

 

  item이 flex container 내부에서 중심축 방향 비어있는 공간을

 

  팽창하여 메꾸는 정도를 지정하는 속성

 - item의 flex-grow 기본 값 : 0 (팽창X)

 

 - item 중 flex-grow 값이 1 이상인 요소가 1개인 경우

 

      -> 해당 item이 빈 공간을 모두 메꿈(혼자만 팽창)

   

 - item 중 flex-grow 값이 1 이상인 요소가 n개인 경우

 

    -> 지정된 값 만큼의 비율로 나눠서 팽창

 

[HTML]

[CSS]

#결과

3. flex-shrink  : item 수축

 

    - item이 수축되는 정도를 지정

 

    - flex-shrink 기본 값 : 1

 

    - 0으로 설정 -> item 수축 X

 

    - n개의 item에 flex-shrink 값이 1 이상으로

    설정되어 있는 경우

 

     -> 지정된 값 만큼의 비율로 나눠서 수축

 

[HTML]

[CSS]

#결과

 

4. flex-basis  : 중심축 방향 크기 지정

 

    - flex container의 설정도니 중심축 방향으로 item의 기본 점유율(크기)를 지정하는 속성

 

    - 각종 크기 단위 사용 가능

      (px, %, vh, vw, em, rem 등)

* 중심축 row    -> flex-basis == width

* 중심축 column -> flex-basis == height

[HTML]

[CSS]

#결과

5. flex속성 : flex-grow + flex-shrink + flex-basis 한번에 작성하는 속성 >

                   

[HTML]

[CSS]

#결과

6. align-self : 각 item별로 교차축 방향 정렬을 지정하는 속성</h3>

 

  - align-items == 교차축 방향으로 모든 item 정렬

 

  - align-self == 교차축 방향으로 지정된 item만 정렬

 

[HTML]

[CSS]

#결과