탄성 레이아웃 (스트레치 레이아웃)

페이지 레이아웃은 화면 크기와 요소의 다른 디바이스 유형에 적응 탄성 필요 될 때 동작 할 때 적절한 배치를 보장한다.
사용법 : 부모 요소가 제공됩니다display:flex

참고 : 플렉스 재산 레이아웃 부모 요소가 자식 요소가 떠 설정하고, 명확, 수직 정렬 무효

서브 소자 1.flex 방향 조정 배열 방향 (가로 행 기본값) 열 (세로)

.main{
			width:400px;
			height:300px;
			border:1px solid red;
			margin: 0 auto;
			display: flex;
			flex-direction:column;//
		}

그림 삽입 설명 여기

2.justify - 내용 :) 수평 정렬을 설정합니다

값	기술
플렉스 시작	왼쪽 하위 요소
플렉스 엔드	하여 오른쪽 맞춤 요소 (상자의 순서를 변경하지 않고)
센터	수평 센터
공간 사이	왼쪽과 오른쪽 상자 부모 상자, 중간 빈의 평균 간격 분포를 닫습니다
공간의 주위에	부모 요소에 대한 균등하게 각각의 상자가 왼쪽 간격

공간의 부모 좌우 카세트 상자 가까운 중간 블랭크의 평균 간격 분포
그림 삽입 설명 여기
각각에 대한 박스 균등 간격 부모 요소두고 공간 주위

2.align - 아이템 : 정렬 측 샤프트를 조정 (수직 단일 라인 세트 정렬)

값	기술
뻗기	기본적으로, 부모 컨테이너의 충전 인장 자식 요소의 높이 (자식 엘리먼트의 높이가 지정되지 않음)
플렉스 시작	상단을 맞 춥니 다
플렉스 엔드	하단 정렬
센터	수직 센터

3.flex 휨 제어 여부 개행

4.align 함량은 수직 배향의 다수의 행을 구비
전제 : 부모 요소 세트 표시 여야 플렉스 플렉스 방향 : 행

값	기술
뻗기	부모의 자식 요소는 매우 (자식 요소의 높이가 지정되지 않음) 채워진 컨테이너를 뻗어
센터	수직 센터
플렉스 시작	상단을 맞 춥니 다
플렉스 엔드	하단 정렬
공간 사이	왼쪽과 오른쪽 상자 부모 상자, 중간 빈의 평균 간격 분포를 닫습니다
공간의 주위에	부모 요소에 대한 균등하게 각각의 상자가 왼쪽 간격

센터
그림 삽입 설명 여기
공간의 주위에

순서 : 설정 요소의 순서, 더 작은 값이 맨 위에 있었다, 기본 0
NUM을 플렉스 성장 : 서브 엘리먼트를 확대하여 정의;
부모 요소가 공간이 남아있는 경우, 해당 서브 요소는 부모 구성 요소가 차지하는 공간을 특정 할 수있다
플렉스 수축 : 서브 엘리먼트 저감율의 정의를,
부모 요소가 대응하는 하위 요소는 적절한 축소율을 지정할 수 있고, 충분한 공간이없는 경우. 자동 기본
플렉스 플렉스 성장하고, 복합체의 특성을 플렉스 축소
anign - 자기 : 하나의 서브 세트 정렬 요소

참고 : 인터넷 익스플로러와 사파리 브라우저가 정렬 - 자기 특성을 지원하지 않습니다.

게시 44 개 원래 기사 · 원 찬양 한 · 전망 1510