<목차>
1. Flexbox1 - Flexible Box 개념
2. Flexbox2 - 부모(Container)요소의 모든것
3. Flexbox3 - 자식(Items)요소의 모든것
Flex Items
Flexible Box의 Items에 다음과 같은 float, clear, vertical-align 속성은 영향을 주지 않는다.
Flex Items를 위한 속성들은 다음과 같다.
- order : Flex Item의 순서를 설정
- flex : flex-grow, flex-shrink, flex-basis의 단축 속성
- flex-grow : Flex Item의 증가 너비 비율을 설정
- flex-shrink : Flex Item의 감소 너비 비율을 설정
- flex-basis : Flex Item의 (공간 배분 전) 기본 너비 설정
- align-self : 교차 축(cross-axis)에서 Item의 정렬 방법을 설정
1. order
Items의 순서를 설정합니다.
value 기본은 '0'입니다.
Items에 숫자를 지정하고 숫자가 클수록 순서가 뒤로 밀리고 작아지면 앞으로 이동하고 '-'도 지원합니다.
2. flex
Items의 너비를 설정하는 단축 속성으로 flex-grow, flex-shrink, flex-basis의 3가지의 속성을 사용할 수 있으며, 3가지의 속성의 값을 조합하여 단축하여 사용 할 수 있다.
값이 한 개일 때는 'number'를 지정하면 'flex-grow' 속성 값이고, 'length' 또는 'percentage'를 지정하면 'flex-basis' 속성 값이고, none, auto, initial중 하나를 지정할 수 있다.
값이 두개일 때는 첫 번째 값으로 'number'여야 하며, 두번째 값은 'number' 사용하여 'flex-shrink'값 또는 'length', 'percentage', auto를 지정하여 'flex-basis'을 선택해야 한다.
값이 세개일 때는 다음 순서를 따르면 된다.
'flex-grow', 'flex-shrink', 'flex-basis' 순으로 사용하면 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .items { /* Keyword values */ flex: auto; flex: initial; flex: none; /* One value, unitless number: flex-grow */ flex: 2; /* One value, length or percentage: flex-basis */ flex: 10em; flex: 30%; /* Two values: flex-grow | flex-basis */ flex: 1 30px; /* Two values: flex-grow | flex-shrink */ flex: 2 2; /* Three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Global values */ flex: inherit; flex: initial; flex: unset; } | cs |
좀더 자세한 설명은 아래의 'flex-grow', 'flex-shrink', 'flex-basis' 참고 하시면 됩니다.
추가 작업중 입니다.....