css横向排列_精讲CSS弹性盒子flexFCC快报（六）

“ Do not wait to strike till the iron is hot; but make it hot by striking.”

    这一期我们把目光放到CSS神器-flex布局上，一起来感受这个响应式布局的美妙之处。

    FCC主题：CSS弹性盒子。

    FCC关卡： 使用 display: flex 定位两个盒子 - 使用 align-self 属性。

    打开你的编译器，一起开始这愉快的旅程吧！

01

—

弹性盒子容器

    我们先准备一个容器和三个盒子，初始代码如下：

1

2

3

      .box1,.box2,.box3 {      font-size: 50px;      text-align: center;      line-height: 200px;      margin: 10px;    }    .box1 {      background-color: red;    }    .box2 {      background-color: green;    }    .box3 {      background-color: blue;    }    .box-container {      width: 500px;      height: 500px;      background-color: black;     }

效果如下：

    我们可以发现三个盒子被包含在容器里且每一个盒子各占一行。

    如果我们设置容器的display为flex，就可以让三个盒子拍成一行了：

    那么容器还可以设置flex-direction属性，该属性是控制子元素(三个盒子)的排列方式，值有row(横向排列，默认，是上面这种)、column、row-rever、column-reverse。

    另外关于容器还有主轴和交叉轴的说法，两者都可以改变子元素的排列布局。

    主轴就是子元素排列的方向，常见的可选排列方式有：

· flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放，对于列是把项目都靠顶部放。

· flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放，对于列是把项目都靠底部放。

· space-between：项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如，在行中第一个项目会紧贴着容器左侧，最后一个项目会紧贴着容器右侧，然后其他项目均匀排布。

· space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，空间会均匀分布在所有项目两边。

    交叉轴就是与主轴垂直的方向，常见的可选排列方式有：

        · flex-start：从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放，对于列是把项目都靠左放。

        · flex-end：从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放，对于列是把项目都靠右放。

        · center：把项目的位置调整到中间。对于行，垂直居中(项目上下方空间相等)。对于列，水平居中(项目左右方空间相等)。

        · stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。

        · baseline：基线对齐地排列。基线是字体相关的概念，可以认为字体坐落在基线上。

    最后，容器还可以设置flex-wrap来让子元素换行，这种情况发生在容器容纳不下所有子元素的时候，如果不设置那么子元素会被迫缩小，设置之后子元素就可以另起一行了，可选值有：

        · nowrap：默认值，不换行。

        · wrap：行从上到下排，列从左到右排。

        · wrap-reverse：行从下到上排，列从右到左排。

    那么综合以上的属性，我们重新设置一下父容器的样式：

    .box-container {      width: 500px;      height: 500px;      background-color: black;      display: flex;       /* 加上了flex形成弹性盒子布局后我们发现盒子排成了一列，且依然保持着一开始的margin值，父盒子宽度不变，那么只能是         里面的三个盒子大小发生变化(宽缩小为180px)，原因是flex的值默认为：0 1 auto;意思是有剩余空间不扩大，空间不够会         缩小，默认储存不限制      */      flex-direction: row; /*设置子元素的排列方式，默认就是横向排列*/      justify-content: space-around; /*子元素排列的方向就是主轴的方向，设置主轴上子元素的排列方式，不设置默认占据basis的宽度*/      align-items: center; /*与主轴相反的就是交叉轴，不设置的话默认充满高度*/      flex-wrap: wrap; /*默认是不换行(则容器放不下，子元素就需要修改自身的宽度)，这里换行就不需要改变宽度*/    }

    可以得到下图的效果：

    是不是对flex容器有了进一步的认识了呢？那么我们接下来就继续深入，看看能不能在子元素做些文章！

02

—

弹性盒子子元素

    子元素也有一些属性可以作用于自身。

    首先是flex-shrink：取值是0或n,0则当容器空间太小放不下时子元素也不会缩小来适应容器，n就会缩小n倍了。

    flex-grow：取值也是0或n,0则当剩余空间存在时不会放大来撑满剩余空间，n则表示会放到n倍来撑满剩余空间。放大或缩小多少都是对比于数值为1的情况来实现的。

    flex-basis：指定了子元素在初始化时的大小。

    让我们将上面这些一起应用一下吧！

    .box1,.box2,.box3 {      flex-basis: 200px; /*该属性是设置一开始子元素默认的宽度，相当于设置了每个子元素的width*/      font-size: 50px;      text-align: center;      line-height: 200px;      margin: 10px;    }    .box1 {      order: 3; /*order值越大越靠后*/      background-color: red;    }    .box2 {      order: 2;      flex-grow: 0; /*如果给一个子元素设置flex-grow为1当有剩余空间，该盒子就会扩大撑满剩余空间 0则反之*/      background-color: green;    }    .box3 {      align-self: flex-start; /*可以单独设置子元素的对齐方式，会覆盖通过align-items设置的值*/      order: 1;      flex-shrink: 0; /*如果给一个子元素设置flex-shrink为0则当空间不足时它也不会缩小，与1相反*/      background-color: blue;    }

    具体的效果如下：

    怎么样？是不是与一开始又有了更多的不同呢？熟练的使用flex布局可以让我们在做一些多端适配的工作时更加得心应手，所以各位需要好好理解消化哦！