web前端开发技术储久良第三版_web前端开发技术学习 -CSS flex布局

Flex布局详解

传统的网站中，布局的解决方法都是通过盒模型来控制，依赖Display,float,position来进行实现的，虽然可以解决大部分的布局情况，但是一些比较特殊的布局实现起来就存在问题了，比如我们常见的垂直居中，因此Flex就被制造出来了，随着时间的考验，flex慢慢的被浏览器和开发者接受。可以非常简单的响应各种页面布局。

Flex是什么

Flex称之为弹性盒子，能够给盒子模型提供更加强大的灵活性，通过display 的 flex属性就可以指定为flex，需要注意的是转换成为flex后，一些属性也不会生效，如：float，clear ，vertical-align就没有效果了。

.context{  display : flex;}

Flex的属性介绍

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

flex-direction属性

direction决定了主轴的方向

它有四个值来确定位置。

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

flex-wrap

默认情况下wrap都排在一条直线上

它有三个属性来确定它的行为：

• nowrap(默认) ： 不换行，一直排在一行
• wrap ： 换行第一排在上方
• wrap-reverse ： 换行第一行在下方

flex-flow

flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap

justify-content

定义了项目在主轴上面的对齐方式

.content{    /* 默认 */    justify-content: flex-start;}

• flex-start : 默认左对齐。
• flex-end ： 右对齐。
• center ： 居中对齐。
• space-between : 两端对齐，元素之间间隔一样的。
• space-around ： 元素之间的间隔会比头尾元素距离边框的间隔大一倍。

align-items

与justify-content不同的是，align-items是在Y轴的对齐方式，与justity-content交叉。

• flex-start ： 交叉轴的起点对齐，如果x与y相交，就是从y顶部开始
• flex-end : 交叉轴终点对齐，如果x和y轴相交，就是从y底部开始
• center ： 交叉轴的中部对齐 ，y轴居中一般
• baseline ： 元素中第一行文本的底线对齐，可以想象成串串
• stretch ： 默认值，元素无明确宽度，或者为auto已经100%，将占满整个Y轴

align-content

多跟轴线对齐方法，如果只有一根轴线，那么将不起作用。 该属性有六个值：

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