CSS3의 표시 속성의 Flex 레이아웃 방법

WeChat 애플릿을 배우고 홈페이지 레이아웃을 디자인하던 중 새로운 레이아웃 방식인 display:flex를 발견했습니다. 이번 글에서는 CSS3의 display 속성 중 Flex 레이아웃 방식을 주로 소개하고 있는데, 편집자도 꽤 좋다고 생각합니다. 지금 공유하세요. 모든 사람을 위한 내용이므로 모두를 위한 참고 자료로서 모든 사람에게 도움이 되기를 바랍니다.

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

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

Flex는 "유연한 레이아웃"을 의미하는 유연한 상자(Flexible Box)의 약자로 상자 모양의 모델에 최대한의 유연성을 제공하는 데 사용됩니다. Flex 레이아웃으로 설정한 후에는 하위 요소의 부동, 투명 및 수직 정렬 속성이 유효하지 않습니다.

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

기본 개념

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

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

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

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

• flex- flow　위 두 속성의 약자

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

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

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

flex-direction

 .box { 2  flex-direction: row | row-reverse | column | column-reverse; 3 }

속성의 선택적 값 범위는 가로 주축을 따라 왼쪽에서 오른쪽으로 배열된 행(기본값), 가로를 따라 오른쪽에서 왼쪽으로 배열된 행-역방향입니다. 주축, 세로 주축을 따라 열은 오른쪽 위에서 아래로, 열은 반대 방향입니다.

flex-wrap

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

속성의 선택적 값 범위는 nowrap(기본값) 줄 바꿈 없음, 줄 바꿈(첫 번째 줄이 위에 있음) 및 Wrap-reverse(알고 계시죠~)

입니다.

flex-flow

.box { 2  flex-flow: <flex-direction> || <flex-wrap>; 3 }

의 쓰기 속성에서 위의 두 가지 방법의 값을 ||로 연결하면 주축이 어느 축인지는 flex- 속성의 설정에 따라 다릅니다. 방향)

flex-start : 주축을 기준으로 왼쪽 또는 위쪽에서 배열 flex-end : 주축을 기준으로 오른쪽 또는 아래쪽에서 배열

center : On 주축의 중앙에 배열

space -사이: 주축을 기준으로 왼쪽과 오른쪽 끝 또는 위쪽과 아래쪽 끝부터 배열합니다.

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

위는 컨테이너의 내용을 소개합니다. , 컨테이너에 있는 항목의 속성에 대해 이야기해 보겠습니다.

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와 동일합니다.

order

     .item {
       order: <integer>;
     }

flex-grow

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

flex-shrink

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

flex-basis

    .item {
       flex-basis: <length> | auto; /* default auto */
    }

flex

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

align-self

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

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

相关推荐：

html最新的flex布局的理解

2017 css3学习者必备：flex布局实例图文教程

CSS3中关于Flex布局的详解

위 내용은 CSS3의 표시 속성의 Flex 레이아웃 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!