이 기사에서는 Flex 레이아웃이 무엇인지 소개합니다. Flex 레이아웃 관련 속성입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
웹 페이지 레이아웃(레이아웃)은 CSS의 주요 응용 프로그램입니다. 전통적인 레이아웃 방법은 부동 위치 표시입니다. 예를 들어, 수직 센터링은 달성하기 쉽지 않습니다.
2009년 W3C는 다양한 페이지 레이아웃을 간단하고 완전하며 반응적으로 구현할 수 있는 Flex 레이아웃이라는 새로운 솔루션을 제안했습니다. 현재 모든 브라우저에서 지원되므로 이제 이 기능을 사용해도 안전합니다.
Flex는 "유연한 레이아웃"을 의미하는 Flex Box의 약어로, 상자 모양의 모델에 최대한의 유연성을 제공하는 데 사용됩니다. 모든 컨테이너를 Flex 레이아웃으로 지정할 수 있습니다. Flex 레이아웃으로 설정한 후에는 하위 요소의 부동, 투명 및 수직 정렬 속성이 유효하지 않게 됩니다.
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
display: flex; //块元素 display: inline-flex; //行内元素
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
flex-direction属性决定主轴的方向(即项目的排列方向)。 <span class="token property">flex-direction<span class="token punctuation">: column-reverse | column | row | row-reverse<span class="token punctuation">; (默认不写 flex-direction<span class="token punctuation">:</span>row)</span></span></span>
flex-wrap: nowrap | wrap | wrap-reverse;
컨테이너에는 기본적으로 수평 주축(주축)과 수직 교차축(교차축)이라는 두 개의 축이 있습니다. 주축의 시작 위치(경계와의 교차점)를 주 시작이라고 하고, 끝 위치를 주 끝이라고 합니다. 교차 축의 시작 위치를 교차 시작이라고 하며, 끝 위치를 교차 끝이라고 합니다.
항목은 기본적으로 주축을 따라 정렬됩니다. 단일 프로젝트가 차지하는 주축 공간을 메인 사이즈, 단일 항목이 차지하는 교차축 공간을 크로스 사이즈라고 합니다.
컨테이너 속성flex-direction 속성은 주축의 방향(예: 항목 배열 방향)을 결정합니다.<p>flex-direction<br/>: 열 역방향 | 행 역방향</p>(flex-direction<p>:</p>row는 기본적으로 작성되지 않음)<p></p><p>
flex-wrap 속성 정의, 한 축을 정렬할 수 없는 경우 사용법: justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
flex-end: 오른쪽 정렬
center: 가운데 공간 - between: 양쪽 끝을 정렬하고 항목 사이의 간격을 동일하게 만듭니다.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-end: 교차축의 끝점을 정렬합니다.
center: 교차축의 중간점을 정렬합니다. baseline: 항목 텍스트 첫 번째 줄의 기준선 정렬입니다.
1, 주문 속성
2, flex-grow 속성
3, flex-shrink 속성
4, flex-basis 속성
5, 플렉스 attribute
6, align-self attribute
order 속성: 항목의 순서를 정의합니다. 값이 작을수록 순위가 높아집니다. 기본값은 0입니다.
flex-grow 속성: 항목의 확대 비율을 정의합니다. 기본값은 0입니다. 즉, 남은 공간이 있으면 확대되지 않습니다.
flex-shrink 속성: 항목의 축소 비율을 정의합니다. 기본값은 1입니다. 즉, 공간이 부족하면 항목이 축소됩니다.
flex-basis 속성: 초과 공간을 할당하기 전에 항목이 차지하는 주축 공간(기본 크기)을 정의합니다. 브라우저는 이 속성을 사용하여 기본 축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다.
flex 속성: flex-grow, flex-shrink, flex-basis의 약어입니다. 기본값은 0 1 auto입니다. 마지막 두 속성은 선택 사항입니다.
align-self 속성: 단일 항목이 다른 항목과 다른 정렬을 가질 수 있도록 허용하고 align-items 속성을 재정의할 수 있습니다. 기본값은 auto입니다. 이는 상위 요소의 align-items 속성을 상속함을 의미합니다. 상위 요소가 없으면 Stretch와 동일합니다.
위 내용은 Flex 레이아웃이란 무엇입니까? Flex 레이아웃 관련 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!