Flexbox3

item 전용 속성

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

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


.order1{ order : 1;}
.order2{ order : 2;}
.order1{ order : 3;}
.order4{ order : 4;}
.order5{ order : 5;}

flex grow(팽창):
item이 flex-conatiner 내부에서
비어있는 공간을 매꿀 수 있도록
팽창하는 정도를 지정하는 속성

지정된 비율에 맞게 팽창함
기본값 0 - > 팽창 X


.grow1{ flex-grow: 1;}
.grow2{ flex-grow: 2;}
.grow3{ flex-grow: 3;}
.grow4{ flex-grow: 4;}

flex-shrink (수축) :
item이 수축하는 정도로 지정하는 속성

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


.shrink0{ flex-shrink: 0;}
.shrink1{ flex-shrink: 1;}
.shrink2{ flex-shrink: 2;}
.shrink3{ flex-shrink: 3;}
.shrink4{ flex-shrink: 4;}

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

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

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

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

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

.self-center{
   align-self: center;
}