유연한 유연한 상자 모델의 CSS flex-direction 속성

예

e388a4556c0f65e1904146cc1a846bee 요소 내에서 flexbox 요소의 방향을 역순으로 설정합니다.

p
{
display:flex;
flex-direction:row-reverse;
}

효과 미리보기

---

브라우저 지원

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

-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-direction

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

21.0 -webkit-11.010.0 -ms- td> 28.018.0 -moz- 9.06.1 -webkit- 정의 및 사용법

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

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

행

상속

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

:

애니메이션:

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

버전:

JavaScript 구문:

개체.style.flexDirection="column-reverse" 효과 미리보기

 

---

CSS 语法

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

속성값

값	설명	인스턴스
행	기본값입니다. 유연한 항목은 가로로 행으로 표시됩니다.	효과 미리보기
행 역순	행과 동일하지만 역순입니다.	미리보기
열	유연한 항목은 열처럼 세로로 표시됩니다.	효과 미리보기
열 역순	열과 동일하지만 순서가 반대입니다.	효과 미리보기
초기	이 속성을 기본값으로 설정합니다. 이니셜을 참조하세요.	효과 미리보기
상속	이 속성을 상위 요소에서 상속합니다.상속을 참조하세요.

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