CSS flex-flow 속성

display: flex;에 대해서 계속해서 강좌를 이어나가도록 하겠습니다. 드디어 오늘은 flex의 마지막 시간이 될 것 같군요. 그동안 잘 따라오셨나요? 만약 이 누추한 곳을 처음 방문하신 분이시라면 flex에 대해서 정확하게 알아야 할 필요가 있습니다. 그래야 본문이 이해가 되거든요. 그리고 어차피 flex에 대해 알아야 나중에 퍼블리싱 하실 때 작업하시기 편하실 것입니다. 아래의 글들을 모두 정독해 주시기 바랍니다.

 

CSS display: flex 그리고 inline-flex

CSS flex 자식 요소의 가로 크기에 영향을 주는 flex-wrap 속성

CSS flex justify-content 자식요소 가로 정렬 원하는대로 배치

CSS flex align-items 자식요소 세로 정렬(배치)1

CSS flex align-content 자식요소 세로 정렬(배치)2

CSS flex-direction 자식요소 배치 순서 정하기

 

이제 flex에 대해서 어느정도 개념이 잡혔을 것으로 예상됩니다. 그러면 flex-flow는 완전히 이해하기 쉬워집니다.

 

flex-flow

이 스타일 속성은 flex-direction 과 flex-wrap 속성이 합쳐진 형태입니다. 예를 들어 이런 경우입니다.

 

.flex-flow {
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

이렇게 두개의 스타일을 마크업하죠. 두 줄로 표현되는것을 간단히 한 줄로 요약해서 압축한 형태라고 보시면 됩니다.

 

.flex-flow {
    flex-flow: row-reverse wrap;
}

이렇게요. 순서는 flex-direction을 먼저 작성해주고 한 칸 띄운 후 flex-wrap 속성을 마크업 해주면 됩니다.

 

사용해보기

간단하게 구성해본 태그 예시입니다.

 

See the Pen CSS flex-flow by rgy0409 (@rgy0409) on CodePen.

 

flex-flow라고 하는 가장 최상위 부모 안에 두 개의 div 그룹이 있습니다. 각각 ex1와 ex2 클래스명을 사용하고 있죠. ex1에는 오리지널 방법을, ex2에는 flex-flow 방법으로 각각 마크업 했습니다. 결과는 똑같다는것을 알 수 있습니다. 반드시 축약법을 사용해야하는건 아니지만, 코드는 되도록 적게 사용하는게 좋기에 알아두면 언젠간 요긴하게 사용할 날이 반드시 올 것입니다. 끝.