유연한 유연한 상자 모델의 CSS flex-flow 속성에 대한 자세한 설명

예

Flexbox의 요소를 역순으로 표시하고 필요한 경우 분할하도록 합니다.

1. 디스플레이:플렉스

2. 플렉스-플로우:행 - 역랩;

효과 미리보기

---

브라우저 지원

표의 숫자는 속성을 지원하는 첫 번째 브라우저의 버전을 나타냅니다.

-webkit-, -ms- 또는 -moz- 바로 뒤에 오는 숫자는 이 접두사 속성을 지원하는 첫 번째 버전입니다.

"bsChrome" style="패딩: 5px; 줄 높이: 1.42857143; 수직 정렬: 상단; 테두리: 1px 솔리드 #dddddd; 너비: 135px; 배경 위치: 50% 50%"> "패딩: 5px; 줄 높이: 1.42857143; 수직 정렬: 상단; 테두리 너비: 1px 1px 1px 0px; 테두리 스타일: 단색 단색 없음; 테두리 상단 색상: #dddddd; 테두리 오른쪽 색상: #dddddd; border-bottom-color: #dddddd">flex-flow

속성

11.0

属性
flex-flow	29.0 21.0 -webkit-	11.0 10.0 -ms-	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

10.0 -ms- td>

28.018.0 -moz-

9.06.1 -webkit-

정의 및 사용법

flex-flow 속성은 flex-direction 및 flex-wrap 속성의 복합 속성입니다.

flex-flow 속성은 플렉스 박스 모델 객체 의 하위 요소 배열을 설정하거나 검색하는 데 사용됩니다.

flex-direction 속성은 플렉스 항목의 방향을 지정합니다.

flex-wrap 속성은 유연한 항목을 행으로 분할해야 하는지 열로 분할해야 하는지 지정합니다.

참고: 요소가 Flexbox 객체의 요소가 아닌 경우 flex-flow 속성은 효과가 없습니다.

행 랩

상속

默认值：	row nowrap
继承：	否
可动画化：	否。请参阅 SS3动画属性、CSS3动画实例。
版本：	CSS3
JavaScript 语法：	object.style.flexFlow="column nowrap" 效果预览

:

할 수 있습니다애니메이션:

CSS3 애니메이션 예시를 참고하세요.

버전:

JavaScript 구문:

object.style.flexFlow="column nowrap" 효과 미리보기

 

---

CSS 语法

flex-flow: flex-direction flex-wrap|initial|inherit;

属性值

值

描述

值	描述
flex-direction	可能的值： row row-reverse column column-reverse initial inherit 默认值是 "row"。 规定灵活项目的方向。
flex-wrap	可能的值： nowrap wrap wrap-reverse initial inherit 默认值是 "nowrap"。 规定灵活项目是否拆行或拆列。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

플렉스 방향

可能的值：행행-역방향열열-역방향초기상속

默认值是 "행"。

规定灵活项目的方向。

flex-wrap

可能的值：nowrapwrapwrap-reverseinitialinherit

默认值是 "nowrap"。

规定灵活项目是否拆行或拆列。

초기

设置该属性为它的默认值。请参阅 초기。

상속

从父元素继承该属性。请参阅 상속。

위 내용은 유연한 유연한 상자 모델의 CSS flex-flow 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!