3. flex-direction
자식박스의 나열 방향을 정하는 속성.
자식박스를 block속성처럼 세로로 나열하거나 flex의 기본값처럼 가로로 나열할때 주로 사용한다.
속성값에 -reverse가 붙으면 start와 end의 자리가 바뀌게 된다.flex-direction 하위 속성들
- flex-direction : row;
: 기본값으로 flex를 적용한 기본 모습과 같이 가로로 자식박스들을 나열한다.
- flex-direction : row-reverse;
: 자식박스들을 가로로 반전시킨다.
- flex-direction : column;
: 자식박스들을 위에서 아래로 나열한다.
- flex-direction : column-reverse;
: 자식박스들을 세로로 반전시킨다4. flex-wrap : 감싸기 속성
flex를 적용하게 되면 자식요소들이 부모박스의 넓이보다 넓을때
자동으로 자식의 넓이를 무시하고 1줄에 걸쳐 컨텐츠를 작게 찌그러트린다.
이때 만약 자식의 넓이와 높이를 그대로 유지하고 싶다면 flex-wrap을 사용한다.flex-wrap 하위 속성들
- flex-wrap: nowrap;
: 기본값으로 모든 자식요소들을 한 줄에 걸쳐 부모박스에 맞춘다.
- flex-wrap: wrap;
: 자식 요소들의 넓이 높이를 유지하며 여러 줄에 걸쳐 정렬한다.
- flex-wrap: wrap-reverse;
: 자식 요소들을 넓이 높이를 유지하며 여러 줄에 걸쳐 반대로 정렬한다.5. flex-flow : 나열방향 + 감싸기 속성
flex-direction(나열속성) + flex-wrap(감싸기속성)을 한꺼번에 선언할때 사용한다.
두 속성의 조합은 많이 사용되기 때문에
한 번에 선언하고 싶을때 flex-flow를 이용할 수 있다.
두 속성의 속성값을 공백으로 구분하여 한 번에 쓴다.
- flex-flow : 나열방향 감싸기;6. gap : 컨텐츠 사이 여백
gap을 사용하면 flex가 적용된 자식요소 사이에 간격을 만들 수 있다.
gap은 컨텐츠 사이에 생기며, 이것을 gutter라고 표현하기도 한다.
값을 1개만 쓰면 row, column방향으로 동일한 간격을 만들어주고,
값을 2개로 나눠 쓰면 앞자리가 column방향, 뒷자리가 row방향이다.
ex)
flex-flow : cloumn wrap;
-> 세로방향으로 나열하고, 자식요소 넓이 높이 유지함
flex-flow : row wrap-reverse;
-> 가로방향으로 나열하고, 자식요소 넓이 높이를 유지하며 뒤집는다.flex-flow, gap 적용
Hi