집 > 기사 > 웹 프론트엔드 > CSS3의 디스플레이 속성 Flex 레이아웃에 대한 간략한 소개

CSS3의 디스플레이 속성 Flex 레이아웃에 대한 간략한 소개

不言원래의: 2018-08-09 17:43:072653검색

이 글은 CSS3의 디스플레이 속성의 Flex 레이아웃에 대한 간략한 소개를 제공합니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

최근에 WeChat 애플릿을 배우고 있는데, 홈 페이지의 레이아웃을 디자인할 때 새로운 레이아웃 방법인 display:flex

 .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: #b3d4db;
 }

를 발견했습니다. 컴파일 후의 효과는 매우 분명하고 인터페이스의 레이아웃도 매우 합리적입니다. 매우 명확해 보입니다. 그렇다면 이 속성은 무엇에 사용됩니까?

　Flex는 유연한 레이아웃(flexible Layout)이라는 뜻을 지닌 Flex Box의 약어로, 박스 형태의 모델에 최대한의 유연성을 제공하기 위해 사용됩니다. Flex 레이아웃으로 설정한 후에는 하위 요소의 float, clear 및 vertical-align 속성이 유효하지 않게 됩니다. float、clear和vertical-align属性将失效。

它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

컨테이너나 인라인 요소에 적용할 수 있습니다. (위 설명은 WeChat 개발자 도구 설명과 결합됩니다.) 2009년 W3C는 다양한 페이지 레이아웃을 간단하고 완전하며 반응적으로 구현할 수 있는 새로운 솔루션-Flex 레이아웃을 제안했습니다. 현재 모든 브라우저에서 지원되므로 이제 이 기능을 사용해도 안전합니다.

기본 개념

Flex 레이아웃을 사용하는 요소를 Flex 컨테이너(Flex 컨테이너) 또는 줄여서 "컨테이너"라고 합니다. 모든 하위 요소는 자동으로 "항목"이라고 하는 Flex 항목(플렉스 항목)이라는 컨테이너 멤버가 됩니다. 컨테이너에는 기본적으로 가로 기본 축과 세로 교차 축이라는 두 개의 축이 있습니다. 주축의 시작 위치(경계와의 교차점)를 main start라고 하고, 끝 위치를 main end라고 합니다. 교차축의 시작 위치는 다음과 같습니다. 교차 시작이라고 하며 끝 위치를 교차 끝이라고 합니다. 항목은 기본적으로 기본 축을 따라 정렬됩니다. 단일 항목이 차지하는 주축 공간을 기본 크기, 교차 축이 차지하는 공간을 교차 크기라고 합니다.

다음 6가지 속성이 컨테이너에 설정됩니다.

flex-direction 컨테이너에 있는 항목의 배열 방향(기본 가로 배열)

flex-wrap 컨테이너에 있는 항목의 포장 방법

flex -flow 위의 두 속성 약어

justify-content　주축에 항목이 정렬되는 방식

align-items　항목이 교차축에 정렬되는 방식

align-content　여러 축의 정렬을 정의합니다. 프로젝트에 축이 하나만 있는 경우 이 속성은 효과가 없습니다.

flex-direction

1 .box { 2 flex-direction: row | row-reverse | columns | column-reverse }

속성의 선택적 값 범위는 수평 주축 왼쪽에서 오른쪽으로, 수평 주축을 따라 오른쪽에서 왼쪽으로 행 역순으로, 수직 주축을 따라 위에서 오른쪽에서 아래로, 열 역순으로 배열합니다.

flex-wrap

1 .box{ 2 flex-wrap: nowrap | Wrap-reverse 3 }

속성의 선택적 값 범위는 nowrap(기본값)이며 줄 바꿈이 없습니다. 줄 바꿈(첫 번째 줄은 위에 있음) 및 줄 바꿈(알고 계시나요~)

flex-flow

1 .box { 2 flex-flow: 5af1bf7cf79c3a6bc68eee34fa8377d5 ;; 3 }

속성 작성, 위 두 메소드의 값을 ||

justify-content

1 .box { 2 justify-content: flex-start | center | space-between | space- around 3 }

주축의 항목 정렬(주축은 flex-direction 속성의 설정에 따라 다름)

flex-start: 왼쪽부터 정렬 or top on the main axis

flex-end : 주축의 오른쪽 또는 아래에서 배열

center : 주축의 중앙에 배열

space-between : 왼쪽과 오른쪽 끝 또는 위쪽과 위쪽에서 배열 주축에서 아래로

space-around: 각 항목의 양쪽 공간이 동일합니다. 따라서 항목 사이의 공간은 항목과 테두리 사이의 공간의 두 배입니다. 3} -content

1 .box { 2 align-content: flex-start | flex-end | center | space-around | Stretch; 컨테이너, 아래에서 이에 대해 이야기해 보겠습니다. 컨테이너에 있는 항목의 속성은 다음과 같습니다.

order　항목이 정렬되는 순서입니다. 값이 작을수록 순위가 높아집니다. 기본값은 0입니다.

flex-grow　 항목의 확대 비율, 기본값은 0, 즉 남은 공간이 있으면 확대되지 않습니다.

flex-shrink　 아이템의 축소 비율, 기본값은 1입니다. 즉, 공간이 부족할 경우 아이템이 축소됩니다.

flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，项目的本来大小。

flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

order

1     .item {
2       order: <integer>;
3     }

flex-grow

1     .item {
2       flex-grow: <number>; /* default 0 */
3     }

flex-shrink

1     .item {
2       flex-shrink: <number>; /* default 1 */
3     }

flex-basis

1     .item {
2       flex-basis: d82af2074b26fcfe177e947839b5d381 | auto; /* default auto */
3     }

flex

1     .item {
2       flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]
3     }

align-self

1     .item {
2       align-self: auto | flex-start | flex-end | center | baseline | stretch;
3     }

容器属性和项目属性是可以配合使用的，用法类似于CSS的行内式和嵌入式的道理一样。希望你可以在实际应用中熟练使用。