flex布局的基本使用

flex布局的定义

弹性布局，元素的宽高等属性可能随着父容器的改变自适应的进行改变，俗称弹性盒模型。

flex布局的常用属性

1. flex-direction

含义：弹性布局的主轴方向，弹性布局内部元素的布局方向

属性值及具体作用：

• row (默认值，主轴为水平方向，从左到右布局，起点在左端)；
• column (主轴为垂直方向，从上到下布局，起点在顶端)；
• row-reverse (主轴为水平方向，从右到左布局，起点在右端)；
• column-reverse (主轴为垂直方向，从下到右上布局，起点在底端)；

2. justify-content (内容对齐；对齐方式)

含义：盒子内部的元素在主轴的对齐方式

属性值及具体作用：

• center (主轴方向上居中对齐，最为常用的对齐方式)；
• flex-start (从主轴开始位置开始布局，假设flex-direction为row，则从左到右依次布局)；
• flex-end (从主轴结束位置开始布局，假设flex-direction为row，则从右到左依次布局)；
• space-between (两端对齐，两端的元素紧靠盒模型的两侧，类似与word文档的两端对齐方式，效果相同)；
• space-around (每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍，假设三个元素，则间距为1:2:2:1)；
• space-evenly (每个项目两侧的间隔相等。所以，项目之间的间隔与项目与边框的间隔相等，假设三个元素，则间距为1:1:1:1)；

3. align-items

含义：盒子内部的元素在交叉轴上(次轴)如何对齐

属性值及具体作用：

• center (次轴方向上居中对齐，最为常用的对齐方式)；
• flex-start (从次轴开始位置开始布局，假设次轴为垂直方向，默认则顶部对齐)；
• flex-end (从次轴结束位置开始布局，假设次轴为垂直方向，默认则底部对齐)；
• stretch (默认值，如果项目未设置高度或者auto，将占满整个容器的高度)；
• baseline (项目的第一行文字的基线对齐)；

//以下属性相对少用

4. flex-wrap

含义：在一条主轴线放不下的情况时，换行方式

属性值及具体作用：

• nowrap (默认值，不换行);
• wrap (换行，第一行在上方);
• wrap-reverse (换行，第一行在下方)；

5. align-content

含义：用于控制多行元素的对齐方式，如果元素只有一行则不会起作用;(多条主轴)

属性值及具体作用：

• stretch (默认值，在元素没设置高度，或高度为auto情况下让元素填满整个容器，与align-items类似);
• flex-start (各元素从父元素的顶部开始排列，排不下后会自动换行，所有元素整体紧贴父元素的主轴开始方向);
• center (各元素从父元素的中部开始排列，排不下后会自动换行，各元素从父元素的主轴中间开始排列)；
• flex-end (各元素从父元素的底部开始排列，排不下后会自动换行，所有元素整体紧贴父元素的主轴结束方向);
• space-around (各元素形成多条主轴，主轴排满之后则换行，各条主轴元素(假设总共三条主轴)在次轴方向按照间距1：2：2：1的排序);
• space-evenly (各元素形成多条主轴，主轴排满之后则换行，各条主轴元素(假设总共三条主轴)在次轴方向按照间距1：1：1：1的排序);
• space-around (各元素形成多条主轴，主轴排满之后则换行，各条主轴元素(假设总共三条主轴)在次轴方向按照两端对齐进行排序，次轴方向两端紧贴父容器);

6. align-self

含义：align-self属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖父元素设置的align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；

7. order (值为数字)

含义：定义了元素的排列顺序，数值越小，排列越靠前，默认为0；

8. flex-grow (值为数字)

含义：定义了项目的放大比例，默认为0，如果存在剩余空间，也不放大；如果不为0，当存在剩余空间时，所有存在flex-grow的元素会根据设置的属性值，按照值的大小比例进行等分剩余空间；

9. flex-shrink (值为0|1)

含义：flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值为0时，该项目会保持不变，不会缩小。

10. flex-basis

含义：该属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。示例：flex-basis: | auto; /* default auto */

11. flex

含义：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选，第一个属性必填。常见的flex:1; 表示当前元素会根据剩余空间自动放大。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

参考连接1-菜鸟教程
参考连接2-网络博客

使用flex布局实现双飞翼布局的示例