flex속성
(하위정렬속성)
7. align-content
플렉스된 컨테이너 안에 자식들이 매우 많을 경우 여러 줄이 형성된다.(flex-wrap을 썼을 때) 이 때 한 줄을 하나의 content라고 표현한다.
align-content는 컨텐츠를 각각 세트로 정렬하고 요소사이에(between),주위에(around), 고르게(evenly)동일한 간격을 주어 배치할 수 있다.
- align-content : flex-start;
: 여러 줄을 컨테이너의 top위치에 배치한다.
- align-content : flex-end;
: 여러 줄을 컨테이너의 bottom위치에 배치한다.
- align-content : center;
: 여러 줄을 컨테이너의 middle 위치에 배치한다.
- align-content : space-between;
: 여러 줄들을 양끝에 배치하고 줄 사이에 동일한 간격을 준다.
- align-content : space-around;
: 여러 줄들의 양옆에 동일한 간격을 주어 배치한다.
- align-content : space-evenly;
: 여러 줄 사이에 동일한 간격을 주어 배치한다.
- align-content : stretch;
: 여러 줄들을 컨테이너(부모박스)에 맞도록 늘린다.
단, height속성이 선언되지 않아야 한다./row(height) column(width)
8. flex-basis
-
자식요소의 기본 크기를 지정하는 속성이다.
-
자식요소를 가로로 배치한다면 flex-basis값은 자식요소의 넓이를 기준으로 하고,
자식요소를 세로로 배치한다면 flex-basis값은 자식요소의 높이를 기준으로 한다.
-
flex-basis의 단위는 px, %, vw와 같은 단위를 사용해서 기본영역을 지정할 수 있다.
-
flex-basis의 기본값은 auto인데, 여러가지 의미가 있다.
만약 자식요소에 width가 지정되어 있다면 width값이 flex-basis의 값이 된다.
하지만 만약 자식요소에 width값이 없다면 컨텐츠 영역만큼만 flex-basis의 영역이 된다.9. flex-grow
-
flex가 적용된 자식요소를 확장하는 속성이다.
-
부모박스가 자식박스의 총합보다 넓이가 넓으면 빈 공간이 생긴다.
이때 남은 공간을 어떻게 나눌지 결정하는 속성이다. -
flex-grow의 기본값은 0이며, 0보다 큰 숫자를 사용하면 부모박스를 채운다. (음수값 사용불가)
10. flex-shrink
-
flex-shrink속성은 부모영역에 맞춰 자식요소를 줄이는 속성이다.
-
flex-shrink는 컨테이너의 넓이가 줄어들 경우 그 안에 있는 자식박스들은 자연스럽게 줄어들면서
부모영역을 채운다. -
flex-shrink의 기본값이 1이다.
-
만약 flex-shrink를 0으로 지정하면
자식요소의 총합이 더 넓더라도 자식요소를 축소하지 않는다.
11. flex
-
flex-basis, flex-grow, flex-shrink를 한꺼번에 선언하는 속성이다.
-
세 속성을 선언할때에는 자리가 지정되어 있어 순서를 지켜줘야 한다.
순서는 grow shrink basis순으로 선언하면 되고 3개의 기본값은 각 0,1,auto이다. -
flex속성에 값으로 숫자를 하나만 지정한다면 flex-grow의 값으로 사용된다.
나머지 속성인 shrink는 1, basis는 0을 사용한다.
즉, flex:1;이라고 선언하면 flex:1 1 0과 같다.
flex-basis의 값이 0이면 확장, 축소하는 상황에 따라 항목의 기본 크기를 비율대로 설정한다. -
만약 flex속성값으로 none을 쓰면 컨테이너 안에서 자식요소를 확장하거나 축소하지 않는다.
그러면 크기는 미리 정해놓은 width, height값을 사용하거나 값이 없다면 내용의 크기에 따라
결정된다. 즉, flex: 0 0 auto;와 같다. 레이아웃에서 특정부분만 확장, 축소하지 않도록 만들고
싶으때 사용하는 값이다.
[기본형]
flex : grow shrink basis;
- 값이 하나일때
flex : 1; / flex : 1 1 0; /
- 값이 두개일때
flex : 1 150px; / flex : 1 1 150px; /
flex : 1 1; / flex : 1 1 0;/
