flex-flow 속성
flex-flow 속성은
flex-direction과
flex-wrap의 단축 속성입니다.
기본값은 row nowrap입니다.
플렉스 컨테이너(부모 요소)에 적용됩니다.
구문
선택자 {
flex-flow: 주축_방향 다중_줄_여부;
}
값의 순서는 중요하지 않습니다.
예제
이 예제에서 블록들은 컨테이너에 맞지 않아 여러 줄에 걸쳐 배치됩니다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
border: 1px solid #696989;
height: 200px;
width: 330px;
margin: auto;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
예제
주축 방향을 변경합니다(row 대신 column 사용):
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
flex-flow: column wrap;
justify-content: space-between;
display: flex;
height: 200px;
width: 330px;
margin: auto;
border: 1px solid #696989;
}
#parent > div {
width: 100px;
height: 50px;
border: 1px solid #696989;
}
:
관련 항목
-
flex-direction속성,
플렉스 아이템의 축 방향을 설정합니다 -
justify-content속성,
주축을 따라 정렬을 설정합니다 -
align-items속성,
교차축을 따라 정렬을 설정합니다 -
flex-wrap속성,
플렉스 아이템의 다중 줄 처리를 설정합니다 -
order속성,
플렉스 아이템의 순서를 설정합니다 -
align-self속성,
개별 아이템의 정렬을 설정합니다 -
flex-basis속성,
플렉스 아이템의 기본 크기를 설정합니다 -
flex-grow속성,
플렉스 아이템의 팽창 계수를 설정합니다 -
flex-shrink속성,
플렉스 아이템의 수축 계수를 설정합니다 -
flex속성,
flex-grow, flex-shrink, flex-basis의 단축 속성입니다
