HTML의 최신 플렉스 레이아웃 이해

프런트 엔드 페이지를 레이아웃할 때마다 부동, 위치, 여백 등과 같은 몇 가지 속성을 사용하게 됩니다. 이러한 속성은 사용하기가 약간 번거롭고 렌더링 시 브라우저가 많은 성능을 소모하게 됩니다

그래서 오늘은 탄력적 레이아웃이라고도 불리는 최신 플렉스 레이아웃에 대해 이야기하겠습니다!

모든 컨테이너를 Flex 레이아웃으로 지정할 수 있지만 float,clear,vertical-align은 모두 Flex 레이아웃에서 유효하지 않습니다.

주축 방향

플렉스 컨테이너는 x축과 y축으로 나누어져 있습니다. x축의 양의 방향은 기본적으로 왼쪽에서 오른쪽으로, y축의 양의 방향의 기본값은 위에서 아래입니다.

컨테이너를 유연한 레이아웃 표시로 정의합니다. flex; 기본 축의 기본 방향은 왼쪽에서 오른쪽입니다.

flex의 기본 방향을 변경하려면 flex-direction 속성을 사용해야 합니다. 각각 4개의 속성 값을 가집니다. 각각 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로, 위에서 아래로, 아래에서 위로 행, 행 역방향, 열, 열 역방향입니다!

주축방향 정렬

justify-content:flex-start则主轴为左对齐
justify-content:flex-end 则主轴为右对齐
justify-content:center 则主轴为居中
justify-content:space-between则每个子项目之间等距离，前提是有剩余空间
justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离

수직 단일선 정렬!

align-item:flex-start纵向从上到下
align-item:flex-end纵向从下到上
align-item:center纵向居中对齐
align-item:baseline以基线对齐
align-item:strech这是默认方式

하위 항목 줄 바꿈

flex-wrap:wrap超出父元素会换行
flex-wrap:wrap-reverse反向换行
flex-wrap:no wrap这是默认方式,不换行

세로 다줄 정렬!

align-content:flex-start上对齐
align-content:flex-end下对齐
align-content:center上下居中
align-content:space-between
align-content:space-around

위는 상위 요소에 추가된 속성입니다

하위 프로젝트의 일부 속성

order:0,定义子项目的排序位置，数值越小越靠前，默认为0
flex-grow:0;定义子项目的放大比例，默认为0不放大
flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效
flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值

위 세 가지 속성은 위와 같이 순서대로 flex:1,1,1 처럼 축약할 수 있습니다

If 틀린 부분이 있으면 고쳐주세요. 같이 열심히 합시다!

위 내용은 HTML의 최신 플렉스 레이아웃 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!