大前端之Flex布局

现代浏览器都支持flex布局，而且flex布局用起来非常简单，好用。所以今天我们就详细的记录下平时常用的flex语法。 一、什么是flex布局 flex其实是flexible box的缩写，即为“弹性盒子“，任何一个容器都可以指定为flex布局。 .container { display:flex; } .container1{ display:inline-flex; } flex：将对象作为块级弹性盒子，父元素会充满整行；inline-flex:将对象作为内联块级弹性盒，父元素会根据子元素宽度来决定自己宽度。 二、概念 父元素采取flex布局，我们称他为容器，他的所有子元素我们称之为项目。 容器默认存在两根轴：水平轴和垂直轴。 image 三、容器（父元素）的语法 1.diaplay:flex设置父元素为弹性盒。 2.flex-direction属性决定主轴的方向（即项目的排列方向）。有四个值： row（水平从左向右） row-reverse （水平从右向左） column（垂直从下到上） column-reverse（垂直从下到上） 3.flex-wrap默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。有三个值： nowrap（默认）：不换行 wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方 4.flex-flow是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 5.justify-content属性定义了项目在主轴上的对齐方式。(水平居中常用)，有五个值： flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端顶边，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 image 6.align-items属性定义项目在垂直轴上如何对齐。 flex-start：垂直轴的顶齐上边。 flex-end：垂直轴的顶齐下边。 center：垂直轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 [图片上传失败...(image-bdd53e-1587435023929)] 7.align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 flex-start：垂直轴的顶齐上边。 flex-end：垂直轴的顶齐下边。 center：垂直轴的中点对齐。 space-between：与垂直轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。 image 四、项目（子元素）的语法 1.order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 2.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 3.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 4.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 5.flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 6.align-self允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 五、详解flex的三个值 flex:flex-grow flex-shrink flex-basis; flex-grow 属性用于设置或检索弹性盒子的扩展比率。属性值number 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。 flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 flex-basis 属性用于设置或检索弹性盒伸缩基准值。属性值number 一个长度单位或者一个百分比，规定灵活项目的初始长度。 .bigblock{ width: 800px; height: 100px; display: flex; flex-direction: row; margin: auto; } .bigblock>div{ flex-shrink: 1; flex-basis: 300px; } .bigblock>div:nth-child(3){ flex-grow: 2; flex-shrink: 2; } 本例中A、B显式定义了 flex-shrink 为 1，C 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 4份，其中 A、B 占 1 份，C占 2 份，即1:1:2 我们可以看到父容器定义为 800px，子项被定义为 300px，子项相加之后即为 900 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C消化 通过收缩因子 A收缩量：1/4100=25; B收缩量：1/4100=25; C收缩量：2/4*100=50; 最后A、B、C的实际宽度分别为：300-25=275px, 300-25=275px, 300-50=250px, 此外，这个宽度是包含边框的。 .bigblock{ width: 800px; height: 100px; display: flex; flex-direction: row; margin: auto; } .bigblock>div{ flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } .bigblock>div:nth-child(3){ flex-grow: 2; flex-shrink: 2; } 本例中A、B显式定义了 flex-grow 为 1，C 定义了 flex-grow 为 2，所以计算出来总共将剩余空间分成了 4份，其中 A、B 占 1 份，C占 2 份，即1:1:2 我们可以看到父容器定义为 800px，子项被定义为 100px，子项相加之后即为 300 px，比父容器少500px。那么少的 500px 需要扩展，按扩展比率 A收缩量：1/4500=125; B收缩量：1/4500=125; C收缩量：2/4*500=250; 最后A、B、C的实际宽度分别为：100+125=225px,100+125=225px,100+225=325px, 此外，这个宽度是包含边框的。

本文章由javascript技术分享原创和收集