flex布局， flex布局的优缺点
各位老铁们，大家好，今天由我来为大家分享flex布局，以及 flex布局的优缺点的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
CSS flex布局
flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局，且它使用起来也是十分的方便
首先是要指定flex布局
当我们指定flex布局方式的时候，其属性值 float、clear、vertical-align就失效了
无论是块级元素还是行内元素，当他们指定使用flex布局的时候，就被称为“容器”（flex container）
他们的子元素自动成为容器成员，被称为“项目”（flex item）。
flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位
每个容器都有两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴开始位置为main start，结束位置为main end。交叉轴的开始位置为cross start，结束位置为cross end
容器内的项目都是沿着主轴排列的，这点和块级元素有较大的不同，因为每个块级元素默认是占有一整行的，且排列方式为由上到下排列。
每个项目都占有一定的主轴空间和交叉轴空间，分别被称为main size和cross size
flex布局下，容器和项目都有其各自的属性
决定主轴的方向，即决定项目的排列方向，其属性值有
决定了当一行放不下所有的项目时，其换行与否以及换行方式
定义了项目在主轴上的对齐方式，假设主轴是从左向右的水平排列
定义了项目在交叉轴上的对齐方式，假设交叉轴是从上到下排列
在这里重点说一下上面这两个属性。
这样可以很方便的设置水平垂直居中
另外说一下align-items：baseline这个属性值。如描述，这个属性值是通过文字来进行对齐，而不是每个项目的边界或是中心
在容器内具有多根主轴线时，可以定义这些轴线的对齐方式
align-content属性和justify-content属性，这两者的属性值有较大的相似之处，这是因为，justify-content属性定义的是多个项目在主轴上的对齐方式，而align-content属性定义的是多根主轴在交叉轴上的对齐方式，这两者描述的对象就几乎一致
定义了多个项目的排列顺序，其使用方式和z-index属性值有异曲同工之处，都是指定属性值，属性值为整数。对于order属性，属性值越小，则排列越靠前；对于z-index属性，则属性值越小，就越在底层
设置了项目的放大比例，其默认值为1。
设置了项目的缩小比例，默认值为1。
在分配多余空间之前，为项目定义其占据的主轴空间
用来设置单个项目与其他项目不同的对齐方式，其属性值和align-items的属性的属性值基本一致，不过其默认值为auto，表示继承父元素的属性值。
Vue 中 Flex布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
display: flex;
display: inline-flex;
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
以下6个属性设置在容器上。
flex-direction属性决定主轴的方向（即项目的排列方向）。
它可能有4个值。
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
它可能取三个值。
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
它有5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
align-items属性定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
该属性可能取6个值。
小结：
justify是对主轴对齐方式。
align开头的都是对交叉轴进行排列的项目。
以下6个属性设置在项目上。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex属性是flex-grow, flex-shrink和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto(1 1 auto)和 none(0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
接下来需要添加一些Css弹性盒子：桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解
参考文章：
Flex语法——弹性布局
传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为"弹性布局"，它可以让你界面有很大的灵活性。但是你得了解Flex的语法，好了，不多说了，直接上干货！！！
1.主轴方向：左到右（默认）|右到左|上到下|下到上
flex-direction: row| row-reverse| column| column-reverse
2.换行：不换行（默认）|换行|换行并第一行在下方
flex-wrap: nowrap| wrap| wrap-reverse
3.主轴方向和换行简写
flex-flow:<flex-direction>||<flex-wrap>
4.主轴对齐方式：左对齐（默认）|右对齐|居中对齐|两端对齐|平均分布
justify-content: flex-start| flex-end| center| space-between| space-around
5.交叉轴对齐方式：顶部对齐|底部对齐|居中对齐|文本基线对齐|如果项目未设置高度或设为auto，将占满整个容器的高度。（默认）
align-items: flex-start| flex-end| center| baseline| stretch
6.多主轴对齐：顶部对齐|底部对齐|居中对齐|上下对齐并铺满|轴线占满整个交叉轴。（默认）
align-content: flex-start| flex-end| center| space-between| space-around| stretch
1.排序：数值越小，越排前，默认为0
order:<integer>
2.放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）
flex-grow:<number>;/* default 0*/
3.缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。）
flex-shrink:<number>;/* default 1*/
4.固定大小：默认为0，可以设置px值，也可以设置百分比大小
flex-basis:<length>| auto;/* default auto*/
5.flex-grow, flex-shrink和 flex-basis的简写，默认值为0 1 auto
flex: none| [<'flex-grow'><'flex-shrink'>?||<'flex-basis'> ]
6.单独对齐方式：自动（默认）|顶部对齐|底部对齐|居中对齐|文本基线对齐|上下对齐并铺满
align-self: auto| flex-start| flex-end| center| baseline| stretch
这写的很乱，我看着都乱凑合看吧！！！
OK，本文到此结束，希望对大家有所帮助。