탄성 레이아웃
페이지 레이아웃은 화면 크기와 요소의 다른 디바이스 유형에 적응 탄성 필요 될 때 동작 할 때 적절한 배치를 보장한다.
사용법 : 부모 요소가 제공됩니다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 휨 제어 여부 개행
값 | 기술 |
---|---|
nowwap | 아니오 랩 (압축 된 형태로 도시) |
싸다 | 랩 |
랩 역 | (역순) 랩 |
4.align 함량은 수직 배향의 다수의 행을 구비
전제 : 부모 요소 세트 표시 여야 플렉스 플렉스 방향 : 행
값 | 기술 |
---|---|
뻗기 | 부모의 자식 요소는 매우 (자식 요소의 높이가 지정되지 않음) 채워진 컨테이너를 뻗어 |
센터 | 수직 센터 |
플렉스 시작 | 상단을 맞 춥니 다 |
플렉스 엔드 | 하단 정렬 |
공간 사이 | 왼쪽과 오른쪽 상자 부모 상자, 중간 빈의 평균 간격 분포를 닫습니다 |
공간의 주위에 | 부모 요소에 대한 균등하게 각각의 상자가 왼쪽 간격 |
센터
공간의 주위에
자식 요소의 특성
- 순서 : 설정 요소의 순서, 더 작은 값이 맨 위에 있었다, 기본 0
- NUM을 플렉스 성장 : 서브 엘리먼트를 확대하여 정의;
부모 요소가 공간이 남아있는 경우, 해당 서브 요소는 부모 구성 요소가 차지하는 공간을 특정 할 수있다 - 플렉스 수축 : 서브 엘리먼트 저감율의 정의를,
부모 요소가 대응하는 하위 요소는 적절한 축소율을 지정할 수 있고, 충분한 공간이없는 경우. 자동 기본 - 플렉스 플렉스 성장하고, 복합체의 특성을 플렉스 축소
- anign - 자기 : 하나의 서브 세트 정렬 요소
값 | 기술 |
---|---|
센터 | 수직 센터 |
플렉스 시작 | 상단을 맞 춥니 다 |
플렉스 엔드 | 하단 정렬 |
참고 : 인터넷 익스플로러와 사파리 브라우저가 정렬 - 자기 특성을 지원하지 않습니다.