我对Flexbox布局模式的理解

Flex容器

display:flex

当我们应用flexbox构造时刻，须要先给父容器的display值定位flex(块级)或者inline-flex(行内级)。

当应用了这个值今后，伸缩容器会为内容建立新的伸缩格局化高低文(FFC)，它的高低文┞饭示效不雅和BFC根元素雷同(BFC特点：浮动不会闯入伸缩容器，且伸缩容器的界线不会与其内容界线叠加)。

伸缩容器不是块容器，是以有些设计用来控制块构造的属性，在伸缩构造中不实用，特别是多栏(column)，float，clear，vertical-align这些属性。

flex-warp

flex-direction

[align-content]属性可以用来调准伸缩行在伸缩容器里的对齐方法，这与调准伸缩项目在主轴上对齐方法的[justify-content]属性类似。只不过这里元素是以一行动单位。请留意本属性在只有一行的伸缩容器膳绫腔有效不雅。当应用flex-wrap:wrap时刻多行效不雅就出来了。

align-content: flex-start || flex-end || center || space-between || space-around || stretch;
align-content: stretch;默认值,各行将会谈展以占用残剩的空间。

[flex-direction]属性用来控制上图中伸缩容器中主轴的偏向，同时也决定了伸缩项目标偏向。

flex-direction:row;也是默认值，即主轴的偏向和正常的偏向一样，大年夜左到右分列。
flex-direction:row-reverse;和row的偏向相反，大年夜右到左分列。
flex-direction:column;大年夜上到下分列。
flex-direction:column-reverse;大年夜下到上分列。以上只针对ltr书写方法，对于rtl正好相反了。

网页展示效不雅如下：

起首我们来分析下这一张图，大年夜第一个子节点可以看到Flexbox由Flex容器和Flex项目构成，容器即父元素，项目即子元素。他们之间的一些关系可以如许来表示：

[flex-wrap]属性控制伸缩容器是单行照样多行，也决定了侧轴偏向(新的一行的堆放偏向)。

flex-wrap:nowrap;伸缩容器单行显示，默认值;
flex-wrap:wrap;伸缩容器多行显示;伸缩项目每一行的分列次序由上到虾??。
flex-wrap:wrap-reverse;伸缩容器多行显示，然则伸缩项目每一行的分列次序由下到伤乩次分列。

网页效不雅见图;

flex-flow

[flex-flow]属性为flex-direction(主轴偏向)和flex-wrap(侧轴偏向)的缩写，两个属性决定了伸缩容器的主轴与侧轴。

flex-flow:[flex-direction][flex-wrap];默认值为row nowrap;

举两个栗子：

flex-flow:row;也是默认值;主轴是行内偏向，单行显示，不换行;
flex-flow:row-reverse wrap;主轴和行内偏向相反，大年夜右到左，项目每一行由上到下分列(侧轴)。

网页效不雅如下：

这里大年夜家可以多本身去尝尝不合的组合。

justify-content

[justify-content]用于定义伸缩项目在主轴膳绫擎的的对齐方法，当一行上的所有伸缩项目都不克不及伸缩或可伸缩然则已经达到其最大年夜长度时，这一属性才会对多余的空间进行分派。当项目溢出某一行时，这一属性也会在项目标对齐上施加一些控制。

justify-content:flex-start;伸缩项目向主轴的肇端地位开端对齐，后面的每元素紧挨着前一个元素对齐。
justify-content:flex-end;伸缩项目向主轴的停止地位对齐，前面的每一个元素紧挨着后一个元素对齐。
justify-content:center;伸缩项目互相对齐并在主轴膳绫擎处于居中，并且第一个元素到主轴起点的距离等于最后一个元素到主轴终点的地位。以上3中都是“绑缚”在一个分别靠左、靠右、居中对齐。
justify-content:space-between;伸缩项目平均的分派在主轴膳绫擎，并且第一个元素和主轴的起点紧挨，最后一个元素和主轴上终点紧挨，中心剩下的伸缩项目在确保两两距离相等的情况下进行等分。
justify-content:space-around;伸缩项目平均的分布在主轴膳绫擎，并且第一个元素到主轴起点距离和最后一个元素到主轴终点的距离相等，且等于中心元素两两的间距的一半。完美的平均分派，这个构造在阿里系中很常见。

照样看demo懂得起来快一点：

align-items

[align-items]用来定义伸缩项目在侧轴的对齐方法，这类似于[justify-content]属性，然则是另一个偏向。(flex-directon和flex-wrap是一对，justify-content和align-items是一对，前者分别定义主轴和侧轴的偏向，后者分别定义主轴和侧轴中项目标对齐方法)。

align-items:flex-start;伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。
align-items:flex-end;伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
2/4 首页上一页 1 2 3 4 下一页尾页

　　推荐阅读

　　金融大数据行业应用及发展全洞察

在中国经济走向新常态的转型中，在中国经济成为全球第二大年夜经济体的成长中，在中国金融业向支撑实体经济、立异驱动的转换中，大年夜数据在金融范畴的应用，成为中国金融业的新增长点和>>>详细阅读

本文标题：我对Flexbox布局模式的理解

地址：http://www.17bianji.com/lsqh/35393.html

1/2 1