CSS 样式介绍（六）

1. flex属性 CSS3 伸缩布局

.demo {
    width: 80%;
    height: 300px;
    border: 1px solid pink;
    margin: 100px auto;
    /*父级盒子添加 flex */
    display: flex; /*css3 伸缩布局*/
    flex-direction: column; /*伸缩布局的排列方式 row 水平，column 垂直方向，默认是水平排列*/
    min-width: 500px; /*最小宽度*/
    max-width: 1200px; /*最大宽度*/
}

.demo div {
    width: 100%;
}

.demo div:nth-child(1) {
    background-color: pink;
    height: 100px; /*固定宽度 */
}

.demo div:nth-child(2) {
    background-color: blue;
            flex: 1; /*子盒子添加分数, 不跟单位*/
    margin: 10px 0;
}

.demo div:nth-child(3) {
    background-color: green;
    flex: 1;
}

<!-- body部分 -->
<section class="demo">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>

/*当如果用伸缩布局时 给定子元素宽高 可以调整布局排列方式*/
.demo1 {
    width: 80%;
    height: 600px;
    border: 1px solid pink;
    margin: 100px auto;
    /*父级盒子添加 flex */
    display: flex; /*css3 伸缩布局*/
    min-width: 500px; /*最小宽度*/
    max-width: 1200px; /*最大宽度*/

    /*justify-content 调整主轴(水平)对齐方式*/
    justify-content: flex-start; /*让子元素从父容器的左边对齐排列*/
    justify-content: flex-end; /*让子元素从父容器的右边对齐排列*/
    justify-content: center; /*让子元素从父容器的水平居中对齐排列*/
    justify-content: space-between; /*左右盒子贴近父盒子，中间的盒子平均分布空白间距*/
    justify-content: space-around; /*相当于给盒子添加了左右margin外边距*/

    /*align-items 调整侧轴(垂直)对齐方式，主要针对单行垂直对齐方式*/
    align-items: flex-start; /*让子元素从父容器的上部对齐排列*/
    align-items: flex-end; /*让子元素从父容器的底部对齐排列*/
    align-items: center; /*让子元素从父容器的垂直居中对齐排列*/
    /* align-items: stretch; 让子元素拉伸适用父容器（子元素不给高度的前提下）*/
    flex-wrap: nowrap; /*默认不换行，如果宽高不够自动压缩显示*/
    flex-wrap: wrap;
    /*flex-wrap: wrap-reverse; 翻转*/
}

.demo1 div {
    width: 200px;
    height: 200px;
}

.demo1 div:nth-child(1) {
    background-color: pink;
}

.demo1 div:nth-child(2) {
    background-color: blue;
}

.demo1 div:nth-child(3) {
    background-color: green;
}

.demo1 div:nth-child(4) {
    background-color: yellow;
}

.demo1 div:nth-child(5) {
    background-color: black;
}

<!-- body部分 -->
<section class="demo1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
</section>

2. BFC介绍重点

BFC:块级格式化上下文 Block formatting context,就是一个独立的渲染区域，里面元素布局不影响外部区域。不是所有的元素都能产生BFC,块级元素能具有BFC特性。
以下可以触发BFC：

float 属性不为none
position为absolute或fixed
display为 inline-block, table-cell,table-caption, flex, inline-flex
overflow 不为 visible

BFC作用：

1.清除元素内部浮动
2.解决属于同一个BFC内两个盒子外边距合并的问题，可以那创建另外一个BFC
3.制作右侧自适应的盒子

3. 背景渐变色，用得较少

.demoColor {
   width: 399px;
   height: 40px;
   /*background: linear-gradient(渐变的起始位置，起始颜色，结束颜色);*/
   /*background: linear-gradient(渐变的起始位置，颜色 位置，颜色 位置);*/
   background: linear-gradient(top, red, green);
   background: -webkit-linear-gradient(top, red, green);
   background: -webkit-linear-gradient(left, red 0%, green 29%, blue 80%);

   background: -moz-linear-gradient(top, red, green);
   /*因为背景渐变 兼容性问题很严重，必须在前面添加浏览器的私有前缀*/
   margin: 200px auto;
}

CSS 样式介绍（六）

1. flex属性 CSS3 伸缩布局

2. BFC介绍 重点

3. 背景渐变色，用得较少

推荐阅读更多精彩内容

2. BFC介绍重点