什么是flex布局？

什么是flex布局？

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

采用Flex布局的元素，称为Flex容器。容器内所有子元素称为flex项目。容器内会生成两条轴，分别是沿水平方向的主轴和垂直方向的交叉轴。
项目默认沿主轴排列。

容器有六个属性

1. flex-direction:项目的排列方向

• row（默认值）：主轴为水平方向，起点在左端
• row-reverse:主轴为水平方向，起点在右端
• column:主轴为垂直方向，起点在上沿
• column-reverse:主轴为垂直方向，起点在下沿

2.flex-wrap:项目是否换行

• nowrap(默认值): 不换行
• wrap: 换行
• wrap-reverse: 规定灵活的项目在必要的时候以相反的顺序换行或换列。

3.flex-flow:是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow:row-reverse wrap;

4.justify-content:项目在主轴上的对齐方式

• flex-start(默认值): 沿主轴方向左对齐
• flex-end: 右对齐
• center: 居中
• space-between: 两端对齐，项目之间的间隔都相等
• space-around：每个项目的两侧间隔都相等

5.align-items:项目在交叉轴上的对齐方式

• flex-start:沿交叉轴起点对齐
• flex-end: 终点对齐
• center：居中
• baseline:项目的第一行文字的基线对齐
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content:项目在多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

注意：
align-content只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。
align-items属性可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式

• flex-start: 与交叉轴的起点对齐
• flex-end: 终点对齐
• center: 居中
• space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around: 每根轴线两侧的间隔都相等
• stretch(默认值):轴线占满整个交叉轴。

项目有六个属性

1.order定义项目的排列顺序。数值越小，排列越靠前，默认为0.

2.flex-grow属性定义项目的放大比例
默认值为0，即如果存在剩余空间，也不放大。

3.flex-shrink属性定义了项目的缩小比例
默认为1，即如果空间不足，改项目将缩小。

4.flex-basis属性用于设置或检索弹性盒伸缩基准值。

5.flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto

6.align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

最后

以上就是天真小伙为你收集整理的什么是flex布局？的全部内容，希望文章能够帮你解决什么是flex布局？所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。