flex局部的知识总结（转载）

版权声明：本文为优快云博主「Coralpapy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.youkuaiyun.com/Coralpapy/article/details/120381469

一、Flex布局的基本概念。

（1）Flex布局： 任何一个容器都可以指定为Flex布局。

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

（2）Flex容器：采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。

（3）Flex项目：它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”

（4）容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

二、容器的属性。

以下6个属性作用于容器上面。

（1）flex-direction

（2）flex-wrap

（3）flex-flow

（4）justify-content

（5）align-items

（6）align-content

2.1 flex-direction

flex-direction: 决定主轴的方向（即项目的排列方向）

（1） column-reverse：主轴为垂直方向，起点在下沿。

（2）column：主轴为垂直方向，起点在上沿。

（3）row（默认值）：主轴为水平方向，起点在左端。

（4）row-reverse：主轴为水平方向，起点在右端。

2.2 flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。

flex-wrap：如果一条轴线排不下，如何换行。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

2.3 flex-flow

flex-flow：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

2.4 justify-content属性

justify-content：项目在主轴上的对齐方式。

.box {  
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

。

。

。