css之弹性布局（flex）

css之弹性布局（flex）

2018.09.03 17:31 3813浏览
flex主要用于响应式页面设计，兼容各种宽度的设备
flex布局写法：

div{display:flex;
}

行内元素flex布局：

span{display:inline-flex;
}

webkit内核的浏览器，必须加上-webkit-前缀

.box{  display: -webkit-flex; /* Safari */
  display: flex;
}

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

flex布局的六个属性

|  flex-direction |  flex-wrap  |  flex-flow  | justify-content  |  align-items| align-content |

flex-direction

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

flex-direction:row;也是默认值，即主轴的方向和正常的方向一样，从左到右排列。

flex-direction:row-reverse;和row的方向相反，从右到左排列。

flex-direction:column;从上到下排列。

flex-direction:column-reverse;从下到上排列。 以上只针对ltr书写方式，对于rtl正好相反了。

网页展示效果如下：

webp

主轴方向示意图

flex-wrap

[flex-wrap]属性控制伸缩容器是单行还是多行，也决定了侧轴方向（新的一行的堆放方向）。

flex-wrap:nowrap;伸缩容器单行显示，默认值；

flex-wrap:wrap;伸缩容器多行显示；伸缩项目每一行的排列顺序由上到下依次。

flex-wrap:wrap-reverse;伸缩容器多行显示，但是伸缩项目每一行的排列顺序由下到上依次排列。

网页效果见图：

webp

如何换行示意图

flex-flow

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

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

举两个栗子：

flex-flow:row;也是默认值；主轴是行内方向，单行显示，不换行；

flex-flow:row-reverse wrap;主轴和行内方向相反，从右到左，项目每一行由上到下排列（侧轴）。

网页效果如下：

webp

主轴方向与换行示意图

justify-content

justify-content属性定义了项目在主轴上的对齐方式

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

主轴对齐方式示意图

align-items

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

align-items:flex-start;伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。

align-items:flex-end;伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。

align-items:center;伸缩项目的外边距在侧轴上居中放置。

align-items:baseline;如果伸缩项目的行内轴与侧轴为同一条，则该值与[flex-start]等效。 其它情况下，该值将参与基线对齐。

align-items:stretch;伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

webp

侧轴对齐方式示意图

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
相当于同时在主轴和侧轴上设置对齐方式

webp

主轴+侧轴

flex项目

终于写到关于伸缩项目的相关属性了，主要是3个，order，flex（flex-grow，flex-shrink，flex-basis的组合），align-self；用来比较多的是前两个。

order

有一种用法比较多，想设置一组中有两个元素一个排第一，另外一个排最后，只需要将第一个的order:-1；另一个为order:0;这样就好了。

譬如我们想控制一个container中有4个box，想box4为第一个显示，box1为最后一个显示。只需要 这样

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div></div>

webp

排序示意图

flex

[flex]属性可以用来指定可伸缩长度的部件，是flex-grow（扩展比例）,flow-shrink（收缩比例）,flex-basis（伸缩基准值）这个三个属性的缩写写法，建议大家采用缩写的方式而不是单独来使用这3个属性。

flex:none | [ <‘flex-grow’> ?<‘flew-shrink’> || <‘flow-basis’>]
// flex-grow是必须得flex-shrink和flow-basis是可选的

flex-grow:;其中number作为扩展比例，没有单位，初始值是0，主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

flex-grow:;其中number作为收缩比例，没有单位，初始值是1，也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例，在收缩的时候收缩比率会以[flex-basis]伸缩基准值加权。

flex-basis:|auto;默认是auto也就是根据可伸缩比率计算出剩余空间的分布之前，伸缩项目主轴长度的起始数值。若在「flex」缩写省略了此部件，则「flex-basis」的指定值是长度零。

webp

分配多余空间

align-self

[align-self]用来在单独的伸缩项目上覆写默认的对齐方式，这个属性是用来覆盖伸缩容器属性align-items对每一行的对齐方式。也就是说在默认的情况下这两个值是相等的。

align-self: auto | flex-start | flex-end | center | baseline | stretch

作者：雨未浓
链接：https://www.jianshu.com/p/878c31fa11c9