CSS Flex灵活布局：容器和项的6个属性（带渲染）

Flex是Flexible Box的缩写，意为“灵活布局”，是CSS3的一种布局模式。 Flex格式可以优雅地解决许多CSS格式问题。下面介绍容器的六个属性和项目的六个属性。每个属性都添加了渲染，这里以GitHub路径的形式更新了具体的实现代码。 ？将无效。

容器有 6 个属性，分别是：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

(1)flex-direction属性：

功能：控制主轴方向

flex-direction：行|行反转 |专栏 | column-reverse;

默认值：row

(2)flex-wrap 属性：

功能：默认情况下，项目排列在一条线（也称为“轴”）上。 flex-wrap 属性定义当一个轴不适合时线条应如何换行。

flex-wrap：nowrap |包裹| wrap-reverse;

默认值：nowrap

(3)flex-flow属性

功能：该属性是flex-direction属性和flex-wrap属性的功能简写形式

默认值: row nowrap

(4)justify-content属性

功能：定义item在主轴上的对齐方式

justify-content：flex-start |弯曲端|中心 | | 之间的空间space-around;

默认值：flex-start

(5)align-items属性

功能：确定item如何与横轴对齐。

对齐项目：flex-start |弯曲端|中心 |基线 | stretch

默认值：flex-start

注意：如果align-items是stretch的，你会想看到每个Flex项目的展开。如果要填充整个横轴，必须设置所有flex item的高度-items: height: auto，否则达不到效果。

(6)align-content 属性

该属性定义多个轴的对齐方式。如果项目只有一个轴，则此属性无效。

对齐内容：flex-start |弯曲端|中心 | | 之间的空间太空圆形|架子；

默认值：stretch

flex-start：与横轴的起点对齐。

flex-end：与横轴的终点对齐。

center：与横轴中心对齐。

间距：与横轴两端对齐，轴间间隔均匀。

周围间隔：各轴两侧等距。因此，轴之间的距离是轴与框架之间的距离的两倍。

拉伸：轴覆盖整个横轴。 ？ align-self

(1)order属性：

功能：定义item的顺序。值越小，排名越高。

默认值：0

(2)flex-grow属性

功能：如果有剩余空间，item放大的比例。归根结底就是根据这个比例将剩余空间分配给每个项目。

默认值：0（不放大）

(3)flex-shrink 属性

功能：flex-shrink：如果空间不足，则项目的“缩小比例”。 0表示空间不足时不收缩。

默认值：1

负值对该属性无效

(4)flex-base属性

功能：定义item在方向上所占空间的初始值长轴 .

默认值：auto（项目原始大小）

（5）flex属性

功能：flex-grow、flex-shrink、flex-base属性的缩写；

弯曲：无 | [ ? || ]

注：几个常见缩写；

flex：自动； === 弹性：1 1 自动；

弹性：无； === 弹性：0 0 自动；

弹性：初始； === 伸缩：0 1 自动；

伸缩：； === 弹性：1 辆车；

弹性：1； === flex: 1 1 auto;

建议先使用该属性，而不是分别写三个单独的属性，因为浏览器会计算相关值

(6)align-self 属性

作用：此属性允许单个项目以不同于其他项目的方式对齐，并且可以覆盖align-items属性。

自我对齐：汽车 |弹性启动|弯曲端|中心 |基线 |架子；

默认值：auto，表示align-items属性继承自父元素。如果没有父元素，则相当于拉伸。

4。总结

本文介绍了容器的6个属性和flex item项目的6个属性。建议完整地关注demo以加深理解。

作者：腾讯云加社区
来源：掘金