Flex布局

一.什么是flex布局

• flex布局是w3c提出的一种新的布局方法，主要为了解决传统布局的不方便
  的缺点，eg：垂直居中在传统布局中就不容易实现。
• flex是flexible box 的缩写形式，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
• 注意：如果是 webkit内核的浏览器，必须加上-webkit 前缀。eg:

<style>
.box{
display:-webkit-flex;
}
</style>
<div  class="box">
这是为了解决webkit内核的浏览器的兼容性问题
</div>

二 . flex容器的概况

image

• 如上图所示，在容器中有两个默认的轴，分别为：main axis（横轴）和cross axis（纵轴，也称交叉轴），横轴与边框的交叉点分别称为main start和main end，同理纵轴与边框的交点成为 cross start 和 cross end。

三 . 容器的属性

-重点介绍：flex-direction , flex-wrap , flex-flow , justify-content , align-items , align-content 六种属性。

1. flex-direction：该属性决定项目的排列方向，有4个值：
   row：默认，从左到右
   row-reverse：从右到左
   column：从上到下
   column-reverse：从下到上

   
   image

2. flex-wrap : 该属性定义项目在排不下的情况下是否换行，有3个值：
   nowrap：默认，不换行

   
   image
   

   wrap：换行，第一行在上方

   
   image
   wrap-reverse：换行，第一行在下方
   image
3. flex-flow：该属性是flex-direction和flex-wrap的简写形式，默认值为
   row nowrap。

4 . justify-content : 该属性定义了水平方向上的对齐方式。有5个值：
flex-start：向左对齐
flex-end : 向右对齐
center : 水平居中
space-between：左右对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔都相等，所以项目之间的间隔比项目与边框之间的间隔大一倍。

image

5 . align-items：该属性定义了垂直方向的对齐方式 。 有5个值：
flex-start：向上对齐
flex-end：向下对齐
center： 垂直居中
baseline： 以项目的第一行的文字的基线对齐。
stretch：默认值，如果项目未设置高度或设为auto，将占满整个容器的高度。

image

6 . align-content：该属性定义了多行的对齐方式。注：如果项目只有一行的话，则该属性不起作用。有6个值：
前五个与justify-content的五个值完全相同，在这不再重复讲解
还有一个默认属性stretch：占满整个容器。

image

四 . 项目的属性

以下6个属性设置在项目上：
1.order：该属性用于定义项目的排列顺序。数值越小，排列越靠前，默认为0 。

image

2.flex-grow：该属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则他们将等分剩余空间，如果其中一个项目的flex-grow为2的话，则空间分配为1：2：1。

image
3.flex-shrink：该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果为0，则不缩小。
image
4.flex-basis：该属性定义了项目所占的主轴空间，即相当于width和height属性一样。

5.flex：该属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto ，该属性还有两个便携值：auto（1 1 auto），none（0 0 auto）
6.align-self：该属性允许单个项目与其它项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，即继承父元素的align-items属性，如果没有父元素， 则等同于stretch。
可取6个值，除了auto其余和align-items一样，在此不再说明。
（完）