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

이 글은 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

기본 개념

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

flex-direction

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

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

flex-wrap

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

flex-flow

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

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

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

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

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

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