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;
}