FlexBox 표준 및 호환 가능한 작성 치트 시트 공유-CSS 튜토리얼-php.cn

FlexBox 표준 및 호환 가능한 작성 치트 시트 공유

高洛峰

풀어 주다： 2017-03-16 11:02:32

원래의

1245명이 탐색했습니다.

FlexBox 표준 작성:

지원 브라우저: IE11, Chrome29+, FireFox 20+, Safari plus prefix -webkit-

개요:

총 12개의 속성;

컨테이너에는 6개 또는 5개의 단일 속성이 있으며, 각각 요소 배열 방향, 행, 가로 배열, 세로 배열, 공백 분포, 및 약식 속성 방향을 정의합니다. , 행

컨테이너의 요소에 대한 6, 5개의 단일 속성으로 각각 순서, 늘이기, 축소, 초기 크기, 정렬, 및 단축 속성 설명 요소 크기

flex-basisflex:

컨테이너: 디스플레이: flex | inline-flex;

설명

flex-방향: 행 열 | 열 역방향

컨테이너 내 요소 배열 방향

flex -wrap: nowrap | Wrap-reverse

요소가 하나 이상의 줄에 표시됩니다

flex-flow: 기본값:

위 두 속성의 약어

그냥ify-content: flex-startend | 공간 사이 | 공간 주변

컨테이너 내 요소의 수평 분포

항목 정렬: 스트레치 | 플렉스 엔드 | 기준선

세로 방향으로 컨테이너 내 요소 분포

align-content: stretch | flex-end | space-around

컨테이너 내 추가 공백 분포

컨테이너 항목:

주문: 0

컨테이너 내 요소 배열 순서

auto | flex-start | flex-end | 기준선 확장

align-items 값을 재정의하고 수직 방향으로 자체 분포를 정의합니다

flex -grow: 0

컨테이너 내 요소가 차지하는 공간 확장

flex-shrink:

용기 속 요소가 차지하는 공간의 축소

auto

초기화되면 컨테이너에 있는 요소의 크기

; <0 1 auto>

위 세 가지 속성의 약어

* 위는 음수 값을 지원하지 않습니다.

*각 속성의 첫 번째 값은 기본값입니다.

*파란색은 다중 속성 약어 모드입니다.

IE10과 호환: 접두사 추가 -ms-

항목 정렬

display:-ms-flexbox \| -ms-inline-flexbox;	표준 (주황색이 아이템 속성입니다)
-ms-flex-direction : 행 \| 열 역방향	플렉스 방향
-ms-flex-wrap : 없음 \| 랩 리버스	플렉스 랩
지원되지 않음	플렉스 -flow
-ms-flex-pack : 시작 \| 끝 \|center \| 정당화	정의-내용
-ms-flex-align : 늘이기 시작 \| 끝 \| 🎜>
-ms-flex-line-pack : 시작 \| 끝 \|중심 \| 기준선	콘텐츠 정렬
-ms-flex-order :	주문
-ms-flex-item-align : 스트레칭 \| 시작 \| 끝 \|중앙 \| 기준선	align-self
- ms-flex : <긍정적-플렉스> <네거티브 플렉스> <선호하는 크기> \|\| 없음	flex : 0 0 auto

* IE10 이전에는 사용하지 않는 것이 좋습니다. display:table;

Chrome 정보, FireFox 이전 버전은 다음을 지원합니다:

FireFox: -webkit-을 -moz-로 교체하여

flex-start | flex-end | center | space-around정렬 콘텐츠-webkit-box-ordinal-group:

컨테이너: display: -webkit-flexbox \| -webkit-inline-flexbox;	표준 (주황색이 아이템 속성임)
-webkit -box-direction : normal \| reverse -webkit-box-orient : 수평 \| 수직	플렉스 방향
지원되지 않음	flex-flow
-webkit -box-pack:	justify -content
는
-webkit-box-align : 스트레치 \| 플렉스-끝 \| 센터 \| 기준선	항목 정렬
주문
-webkit-box-flex: 1	flex-grow
-webkit-flex-shrink: <번호> 0	flex-shrink
-webkit-flex-basis: <너비> 자동 (无-moz-)	플렉스 기반
-webkit-box: <플렉스 기반> <1 0 자동>	플렉스
불支持	align-self

위 내용은 FlexBox 표준 및 호환 가능한 작성 치트 시트 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!