【HTML5+CSS3自学笔记】第十四节：flex弹性盒模型

学习教程来源：慕课网-初识HTML(5)+CSS(3)-升级版 by：五月的夏天

弹性盒模型 - 弹性盒模型之flex属性

这一章节我们来学习flex弹性盒子模型，根据下面的例子来理解一下吧：

实现上图效果,我们需要输入以下代码:

上面的代码：

三个块元素设置大小以及背景色，在父容器中添加flex。

技术点的解释：

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

操作一下横轴- 使用justify-content属性设置横轴排列方式

这一章节我们来学习justify-content属性，本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解，属性值分别为：

 justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start：交叉轴的起点对齐，左对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

实现效果：

flex-end：右对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-end;
    }

实现效果：

center： 居中

 .box {
        background: blue;
        display: flex;
        justify-content: center;
    }

实现效果：

space-between：两端对齐，项目之间的间隔都相等，均匀分布。

 .box {
        background: blue;
        display: flex;
        justify-content: space-between;
    }

实现效果：

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.box {
        background: blue;
        display: flex;
        justify-content: space-around;
    }

实现效果：

操作一下竖轴- 使用align-items属性设置纵轴排列方式

这一章节我们来学习align-items属性，本属性定义了项目在交叉轴上的对齐方式。属性值分别为：

align-items: flex-start | flex-end | center | baseline | stretch;

结合下面的样式设置进行理解：

flex-start：默认值，左对齐

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

实现效果：

flex-end：交叉轴的终点对齐

 .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-end;
    }

实现效果：

center： 交叉轴的中点对齐

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: center;
    }

实现效果：

baseline：项目的第一行文字的基线对齐。

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: baseline;
    }

三个盒子中设置不同的字体大小。

实现效果：

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

 .box {
        height: 300px;
        background: blue;
        display: flex;
        align-items: stretch;
    }

.box div {
        /*不设置高度，元素在垂直方向上铺满父容器*/
        width: 200px;
    }

实现效果：

我想占大头 - 给子元素设置flex占比

这一章节我们来学习flex属性，设置子元素相对于父元素的占比。

测试效果如下：

技术点的解释：

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效。