Flex弹性布局

开发工具与关键技术：HTML、Flex
作者：LJR
撰写时间：2019年 6 月 6 日

1. 相信很多小伙伴的在做某个项目的时候，搭建页面是一个很烦恼的事情，网页搭建的不好的，用户看起来很容易造成视觉疲劳；还有网页如果没有用到弹性布局的，在网页宽度和高度，发生变化那么整个页面的样式都会乱掉的。
2. 那么什么是Flex弹性布局呢？Flex弹性布局就是可以实现通过一整套响应灵活的实用程序，快速管理栅格的列、导航、组件等的布局、对齐和大小。通过进一度的定义CSS，还可以实现更复杂的展示样式。
   3.传统的布局方式基于盒模型，利用display，position和float的属性去设计网页 ，只不过使用传统的方法很麻烦的，很消耗时间。如果会弹性布局就简单很多了，但是要注意的是如果设置了弹性布局，那么在后面的代码中的float、clear和vertical-align的属性将失效。我们可以通过display的直属内部元素转化为flex属性，就例如下面就是一个最简单的例子。

我是个有弹性的盒子1

我是个有弹性的盒子2

这个例子中，两个盒子的宽度给了宽度，可是在宽度不够的情况下也能自适应宽度和高度的。
4. Flex的属性其中有：
（1）flex-wrap属性：nowrap(不换行)、wrap (换行，第一行在上方、 wrap-reverse（换行，第一行在下方）;
（2）flex-direction属性：row(主轴为水平方向，起点在左端)、row-reverse（主轴为水平方向，起点在右端）、column（主轴为垂直方向，起点在上沿）、column-reverse（主轴为垂直方向，起点在下沿）
（3）justify-content属性: flex-start(左对齐)、flex-end(右对齐)、center(居中)、space-between(两端对齐，项目之间的间隔都相等)、space-around(每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍);
（4） align-items属性：flex-start(交叉轴起点对齐)、flex-end(交叉轴终点对齐)、center(交叉轴中点对齐)、baseline(项目的第一行文字的基线对齐)、stretch（默认值）：(如果项目未设置高度或设为auto，将占满整个容器的高度)、
（5）align-content属性(注意这个属性是要有多根轴线才能够起作用的，一根轴线是起不了作用的)：flex-start(与交叉轴的起点对齐)、flex-end(与交叉轴的终点对齐)、center(与交叉轴的中点对齐)、space-between(与交叉轴两端对齐，轴线之间的间隔平均分布)、space-around(每根轴线两侧的间隔相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍);stretch(轴线沾满整个交叉轴)
（6）有时候再做项目的时候，在某一个模块里面要对其样式顺序进行排列的，可以用到order属性，它是能够让模块有一个先后顺序的排列；如果某个模块要等比例的放大或者缩小就可以用到flex-grow属性，既然能够放大了就会可能遇到有一个模块不够空间放大模块的情况，这样可以设置flex-shrink属性，它可以自适应剩下的空间。
5. 使用Flex弹性布局，能够让自己的网页排版的更好，不会因为屏幕宽度发生变化后，样式也跟着变化！！！