CSS弹性布局

CSS弹性布局

1. 定义需要添加弹性布局的父元素为容器box，弹性布局容器内的每一个子元素称为项目

2. 一些注意的点：

   （1）给父容器添加display:flex或是display:inline-flex属性，就可以使容器内内容采用弹性布局显示

   （2）display:flex：容器添加弹性布局后，显示为块级元素

   （3）display:inline-flex：容器添加弹性布局后，显示为行级元素

   （4）将父容器设为弹性布局后，子项目的 float、clear 和 vertical-align属性将失效，但position属性依然生效

弹性布局中的一些属性

1. flex-direction：项目的排列方向

   （1）row（默认值）：项目排列方向为水平，方向从左到右

   （2）row-reverse：项目排列方向为水平，方向从右到左

   （3）column：项目排列方向为垂直，方向从上到下

   （4）column-reverse：项目排列方向为垂直，方向从下到上
   

2. flex-wrap：规定子元素在容器内如何换行

   （1）nowrap：默认值，不换行。当容器宽度不够时，每个项目会被挤压宽度

   （2）wrap：换行显示，且第一行在容器最上方

   （3）wrap-reverse：换行显示，且第一行在容器最下方
   

3. justify-content：规定项目在主轴线上的对齐方式（主轴：项目排列方向）

   （1）flex-start：默认值，项目位于主轴起点

   （2）flex-end：项目位于主轴终点

   （3）center：居中

   （4）space-between：两端和父容器边缘对齐，项目之间的间隔都相等

   （5）space-around：每个项目两侧9间隔相等，项目之间的间隔比项目与边框的间隔大一倍
   

4. align-items：规定项目在交叉轴（和项目排列方向的垂直方向）上的对齐方式

   （1）flex-start：与交叉轴的起点对齐

   （2）flex-end：与交叉轴的终点对齐

   （3）center：与交叉轴的中点对齐

   （4）baseline：根据项目的第一行文字的基线对齐（基线就是字母或者数字或者汉字的下边缘那条线）

   （5）stretch：默认值，如果项目未设置高度或设置高度为auto，则将占满整个容器的高度
   

5. align-content：规定项目每一行(列)在另一方向上的对齐方式，即主轴在交叉轴（和项目排列方向的垂直方向）上的对齐方式。当项目只有一行(列)时，该属性无效

   （1）flex-start：与交叉轴的起点对齐

   （2）flex-end：与交叉轴的终点对齐

   （3）center：与交叉轴的中点对齐

   （4）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

   （5）space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔会比轴线与边框的间隔大一倍

   （6）stretch：默认值，如果项目未设置高度或设置高度为auto，则将占满整个容器的高度(占满整个交叉轴)
   

6. order：规定项目的排列顺序，使用整数设置，数值越小越靠前，可以为负值，默认值均为0

   如设置项目1和项目3的order值分别为1和2，而项目2和项目4的order值仍为默认值0，0<1<2，则排列的顺序就会出现：项目2、项目4、项目1、项目3

    <div id="buju">
        <div style="order: 1;">1</div>
        <div>2</div>
        <div style="order: 2;">3</div>
        <div>4</div>
     </div>
   

   运行结果如下：
   

7. flex-grow：规定项目的放大比例，即就算存在剩余空间，也不放大。

   下面对比一下看看：

   （1）默认效果，四个子项目的 flex-grow均为初始值0，则此时它虽有剩余空间，也不会放大
   
   （2）现在把第一个子项目的 flex-grow设置为1，其余的不变，则此时第一个子项目会占据剩余的空间
   

8. flex-shrink：规定项目的缩小比例，默认为1，即如果空间不足，项目将缩小

   还是举个例子对比一下：

   （1）默认效果，四个子项目的 flex-grow值均为1，父容器的宽度不足，子项目就均会被压缩
   
   （2）现在把第一个子项目的 flex-shrink设置为0，其余的不变，仍为1，则第一个子项目不会被压缩，而其他的几个则会被压缩的更严重