CSS现代布局弹性盒子FlexBox

参考

本文参考自MDN: 查看原文链接.

为什么使用flexBox

Flexbox是一种用于按行或列布局项目的一维布局方法。 物品可以弯曲以填充额外的空间，并收缩以适合较小的空间

简而言之，以前使用浮动和定位来布局的效果很有效，但是能够实现的效果有限，所以出现了flexBox
使用flexBox可以轻松地实现一些漂亮的布局，比如，等宽度填充长度、将内容块垂直居中放置在其父项中…

指定一个元素作为（Flexbox）灵活框

准备一个html文件：文件链接: flexbox0.html.
在这个html文件中，首先，我们需要选择将哪些元素布置为灵活的框。 为此，我们在要影响的元素的父元素上设置一个特殊的display值。 在这种情况下，我们想布置<article>元素，因此我们在<section>上进行设置：section { display: flex; }.这将导致<section>元素成为flex容器，其子元素成为flex项目。

简简单单的添加一个属性就实现了等宽的效果，而且高度一致，高度根据最高的一个内容块决定，真的令人惊喜呢！

明确地说，让我们重申一下这里发生的事情。 就其与页面其余部分的交互方式而言，我们将flex的显示值赋予的元素的作用类似于块级元素，但其子元素被布置为flex项。 还请注意，如果希望将元素的子元素布置为flex项，但该元素的行为类似于inline元素，则可以使用inline-flex的显示值。

弹性模型

弹性盒子里面的弹性元素项目沿着两个方向布局，横向和纵向

• 主轴的方向是弹性盒子排列的方向，比如横排的时候是从左到右的，如果是竖排的就是从上到下的，开始的起点叫做主轴起点，主轴的终点叫做主轴终点

• 横轴是垂直于主轴的方向的，该轴的起点和终点称为十字起点和十字终点。

• 被设置了display：flex的父元素（在我们的示例中为<section>）称之为flex容器。

• The items being laid out as flexible boxes inside the flex container are called flex items (the <article> elements in our example).（在弹性盒子里面的弹性元素被称为弹性元素）

设置弹性盒子的排列方向

：flex-direction: column;.//将主轴按列的方向排列
：flex-direction: row;.//将主轴按行的方向排列

Wrap避免弹性项目撑开弹性盒子

使用了Wrap后页面的布局就不会是硬布局，每一个弹性盒子就变成了完整包裹在弹性盒子里的内容，而不会溢出盒子，默认每个弹性盒子会占用弹性盒子的完整一行，紧接着设定弹性盒子的最小宽度后，页面就会自适应，等宽填充整个弹性盒子，当弹性盒子缩小后，弹性盒子会按照最小的宽度显示，当最小宽度显示填充满了当前的宽度，其余弹性盒子就会排列到下一行，这样的弹性布局方式灵活性比较大。非常方便快捷。

一旦横向排列的盒子太多就会按照弹性盒子的主轴方向无限延伸，这样的话，盒子不换行显示就会出现当缩小窗口的时候，横线排列的盒子缩小到最后仍然可能出现横向的滚动条，这个时候需要在弹性框父元素中设置flex-wrap:wrap然后页面就不会出现滚动条，紧接着可以设置弹性元素的最小宽度flex：200

wrap包装并设置弹性元素的最小宽度后跨行显示的效果：

设置弹性项目在弹性盒子中所占的比重

如下效果所示：第三个弹性项目所占的空间是其他的弹性盒子的两倍

通过设置弹性项目的flex属性来设计该弹性盒子在空间中所占的比重

 article {
            flex: 1; /*flex: 1;该弹性项目跟其他弹性项目所占的比重是一比一，都一样宽*/

        }

        article:nth-of-type(3) {
            /*该弹性项目和其他弹性项目相比所占的空间是其他的两倍*/
            flex: 2;
        }

注意：必须先设计每一个弹性项目的flex属性值为1，然后设计其中某个弹性项目的宽度是其他的倍数。

flex属性还可以同时指定弹性项目的最小值

        article {
            flex: 200px 1; /*flex: 1;该弹性项目跟其他弹性项目所占的比重是一比一，都一样宽*/


        }

        article:nth-of-type(3) {
            /*该弹性项目和其他弹性项目相比所占的空间是其他的两倍*/
            flex: 200px 2;

        }

这基本上表明：“将首先为每个弹性项目分配200px的可用空间。在此之后，其余的可用空间将根据比例单位进行分配。”

flexbox的真正价值可以从其灵活性/响应能力中看出-如果您调整浏览器窗口的大小或添加另一个弹性项目<article>元素，则布局仍可以正常工作。

弹性盒子中弹性项目的对齐方式

您还可以使用flexbox功能使弹性项沿主轴或交叉轴对齐

align-items控制弹性项目在横轴上的位置。

默认情况下，该值为拉伸，它将拉伸所有弹性项目以在横轴方向上填充父对象。 如果父对象在横轴方向上没有固定的宽度，则所有伸缩项目将与最长的伸缩项目一样长。

			/*align-items: center;*/
            /*弹性项目横轴居中对齐*/
            /*align-items: flex-start;*/
            /*弹性项目横轴起点对齐*/
            /*align-items: flex-end;*/
            /*弹性项目横轴终点对齐*/
            align-items: stretch;
            /*弹性项目拉伸对齐*/

通过将align-self属性应用于单个弹性项目，可以覆盖它们的align-items行为。

        button:first-child {
            align-self: flex-end;
        }

        button:nth-of-type(3) {
            align-self: flex-start;
        }

        button:nth-of-type(5) {
            align-self: flex-end;
        }

justify-content控制弹性项目在主轴上的位置。

默认值为flex-start，它使所有项目都位于主轴的起点：justify-content: flex-start;。

您可以使用flex-end使它们位于末端

水平分散居中：justify-content: space-around;.

水平等间距居中:justify-content: space-evenly;.

水平两边对齐居中：justify-content: space-between;.

center也是justify-content的值，它将使flex项位于主轴的中心

这些效果！！！弹性盒子的功能真是他妈的强大到令人叹为观止！！！

FlexBox更改布局顺序

Flexbox还具有更改弹性项目的布局顺序而不影响源顺序的功能。 这是传统布局方法无法完成的另一件事。

        button:first-child {
            /*align-self: flex-end;*/
            order: 1;
        }

        button:nth-of-type(3) {
            /*align-self: flex-start;*/
            order: -1;
        }

嵌套弹性盒子FlexBox

可以使用flexbox创建一些非常复杂的布局。 将flex项也设置为flex容器是完全可以的，这样它的子项也可以像柔性盒子一样放置

示例：

上面的示例的HTML非常简单。 我们有一个包含三个<article>的<section>元素。 第三<article>包含三个<div>。 ：

首先，我们将<section>的子级设置为灵活的弹性项目。所以在最外层的弹性框——section元素中设置display:flex
：flex: 1 auto;.这个效果很牛逼，很常用！！！如下：
当调整窗口大小的时候，每个弹性项目都是等宽，然后并且会自动铺满整个可用宽度