CSS FLEX BOX #2

📝 CSS 레이아웃 스타일, FLEX
#230214

📌 item 전용 속성

1. [order] 속성

order : 숫자
flex-container 내부 item의 순서를 지정하는 속성
(기본값 0, 정수, 양수/음수 가능)

.order1{ order : 1; }
.order2{ order : 2; }
.order3{ order : 3; }
.order4{ order : 4; }
.order5{ order : 5; }
-----------------------------------------------------
<div class="flex-container">
    <div class="item item1 order4">item1</div>
    <div class="item item2 order1">item2</div>
    <div class="item item3 order5">item3</div>
    <div class="item item4 order3">item4</div>
    <div class="item item5 order2">item5</div>
</div>

2. flex-grow (팽창)

flex-grow : 숫자
item이 flex-container 내부에서
비어있는 공간을 메꿀 수 있도록 팽창하는 정도를 지정하는 속성
(기본값 0 -> 팽창 x       /      숫자가 클수록 팽창하는 넓이가 커짐.)

.grow1 { flex-grow: 1;}
.grow2 { flex-grow: 6;}
.grow3 { flex-grow: 2;}
.grow4 { flex-grow: 1;}
--------------------------------------------------
<div class="flex-container">
    <div class="item item1 grow1">item1</div>
    <div class="item item2 grow2">item2</div>
    <div class="item item3 grow3">item3</div>
    <div class="item item4 grow4">item4</div>
</div>

3. flex-shrink (수축)

item이 수축하는 정도를 지정하는 속성
(기본값 1)

실제 출력값은 눈에 잘 보이지 않음ㅠ_ㅠ 실무에선 잘 안쓰니 이론만 알아둡시다.

.shrink0 {flex-shrink: 0;}
.shrink1 {flex-shrink: 1;}
.shrink2 {flex-shrink: 2;}
.shrink3 {flex-shrink: 3;}
.shrink4 {flex-shrink: 4;}
--------------------------------------------------
<div class="flex-container">
    <div class="item item1 shrink0">item0</div>
    <div class="item item1 shrink1">item1</div>
    <div class="item item2 shrink2">item2</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item4 shrink4">item4</div>
</div>

4. flex-basis 속성

flex-basis : px , %, vh, em, rem

.클래스명 : { flex: flex-grow값 , flex-shrink값, flex-basis값 }

ex) .flex1 { flex : 0 0 100px; }

item의 main axis 방향으로의
기본 점유율(크기)을 지정하는 속성
(각종 크기 단위 px, %, vh, em, rem 등 사용 가능)

.basis-150px { flex-basis: 150px ;}
.basis-10 { flex-basis : 10%; }
.basis-25 { flex-basis : 25%; }

.flex1 { flex: 0 0 100px;}
-----------------------------------------------------------------
<div class="flex-container">
    <div class="item item1 basis-150px">item1</div>
    <div class="item item2 basis-10">item2</div>
    <div class="item item3 basis-25">item3</div>
    <div class="item item4 flex1">item4</div>
</div>

5. align-self 속성

각각 item별로 cross axis 방향으로 정렬을 지정하는 속성

.self-start {
    align-self: flex-start; }

.self-end {
    align-self: flex-end; }

.self-center {
    align-self: center; }
-------------------------------
<div class="flex-container">
    <div class="item item4 self-start"> item1 </div>
    <div class="item item5 self-end"> item2 </div>
    <div class="item item6 self-center"> item3 </div>
</div>

원래 div는 가로로 길게 쭉 되는데
align 설정해서 세로로 쭉 한자리씩 차지해서 각각 떨어진거임