更方便、简洁的布局方法，Flex布局
开发工具和关键技术：Adobe Dreamweaver CC 2017，Flex布局
作者：金建勇
撰写时间：2019年1月19日
首先我们了解下Flex布局的定义：Flex即Flexible Box的缩写，意为 “弹性布局”，为盒模型提供了更大的灵活性，flex布局已经适应所有浏览器，任何容器都能指定为Flex布局。让我们来看以下例子：
先简单布置好页面，代码结构：最外层一个大盒子包裹三个小盒子，下面用flex布局实现一些页面布局。
网页效果：
1、 给大盒子指定flex布局。让三个小盒子两端对齐，间隔距离相，代码见下图
display: flex;指定大盒子为弹性布局（行内元素也能设置为弹性布局：display: inline-flex;）
**flex-direction**: row;设置主轴为水平方向,起点为左端（默认值）
其他属性值：column 垂直方向，起点为上端；
row-reverse 水平方向，起点为右端；
column-reverse 垂直方向，起点为下端；
**justify-content**: space-between;设置小盒子两边对齐
其他属性值：center 居中；
flex-start 从主轴开始方向对齐；
flex-end从主轴结束方向对齐；
space-around 每个元素两侧间隔相等
网页效果：
2、 让三个小盒子垂直居中，代码见下图
**flex-direction**:column; 设置主轴为垂直方向
**align-items**: center; 交叉轴中点对齐
其他属性值：flex-start 交叉轴起点对齐；
flex-end 交叉轴终点对；
baseline 基于盒子内第一行文字对齐；
stretch 若小盒子没有设置高度，则占满大盒子的高度
网页效果：
3、 在上面的基础上，再让三个小盒子对角排列，代码见下图
**align-self**: flex-start;
让单个盒子与其他盒子对齐方式不同，其他属性值与align-items属性值完全相同
网页效果：
利用Flex布局还能完成各种布局，例如以下一些布局：
网页效果：
———————————————————————————————————————
网页效果：
———————————————————————————————————————
网页效果：
———————————————————————————————————————
从以上例子能看出flex布局用更方便，简洁的代码完成了这些页面布局，到这里你可能会觉得也就这么简单，但其实还有很多布局方式也都可以通过 flex布局 实现，而要达到你想要的一些布局也就没那么简单。所以我们需要了解透彻 flex布局 的全部属性和属性值，熟悉这些之后再去应用也就会简单很多了。
下面我们就看看除上述属性外 flex布局 的一些其他属性：
**flex-grow** 定义元素的放大比例，默认值为0 。
**flex-shrink** 定义元素的缩小比例，默认值为1
**flex-basis** 定义元素在分配多余空间之前，项目占据的主轴空间,默认值为auto。
以上三个属性可以统一简写成 **flex** 默认值就为 0 1 auto（建议用简写）
**order** 定义元素的排列顺序，数值越小，排序越靠前，默认值为0。
**flex-wrap** 定义元素如何换行。
属性值：nowrap(默认值)；wrap ；wrap-reverse
**align-content**定义元素关于多跟轴线的对齐方式，若只有一根轴线，该属性无用。
属性值有：
center 居中；
flex-start 从主轴开始方向对齐；
flex-end从主轴结束方向对齐；
space-between 设置小盒子两边对齐；
space-around 每个元素两侧间隔相等；
stretch 若小盒子没有设置高度，则占满大盒子的高度。
总结上面：如果你不使用flex布局，可能就需要通过设置浮动、调整盒子内外边距等等更多属性才能达到一些你想要的页面布局。而 flex 布局恰好就是一个很好的工具，熟悉使用flex布局就可以更方便、简洁的完成各种页面布局，所以赶紧用起来吧。
下期作品再见！！！