響應式佈局：彈性佈局

flexBox佈局的做用

• 實現響應式開發
• 與float效果類似，可讓內容水平或豎直顯示
• 也解決了內容不同容器高度不同的問題

flexBox與浮動佈局的區別

• flexBox沒有脫離文檔；，浮動佈局脫離了文檔流
• flexBox中不會自動折行，內容的寬度會根據容器的寬度自動調整；浮動佈局中內容達到容器的寬度的時候，自動折行

主軸和彈性元素

• 能夠把彈性收縮想成是一條穿過並固定在容器兩面的線，這條線就是主軸
• 沿着主軸分佈的元素叫作彈性元素，彈性盒子中的元素自動轉化爲彈性元素

建立彈性容器

• 給最大的容器添加一個屬性：display:flex


HTML:
<div class="container">
    <img src="img/banner1.jpg" alt="">
    <figcaption>設置或檢索彈性盒伸縮基準值。若是全部子元素的基準值之和大於剩餘空間，則會根據每項設置的基準值，按比率伸縮剩餘空間對應的腳本特性爲flexBasis。flex-wrap 屬性規定flex容器是單⾏或者多⾏，同時橫軸的⽅向決定了新⾏堆疊的⽅向。。</figcaption>
</div>

CSS:
 .container{
            display: flex;
        }

 

結果爲：

 

flex-direction

• 意義：規定flexBox的方向
• 默認是從左到右
• 屬性有：


flex-direction:row;//從左到右
flex-direction:row-reverse;//從右到左
flex-direction:column;//從上到下
flex-dirction:column-reverse;//從下到上

 

flex-wrap

• 意義：包裹,讓元素折行
• 屬性有：

flex-wrap:wrap；//折行

 

flex-wrap:wrap-reverse;//改變行的序列

flex-flow

• 是flex-direction和flex-wrap的縮寫

flex-flow:row nowrap;

爲何要用豎向？

• 對於塊級元素來講，原本就是從上到下的，爲何還要用這個屬性呢？

　　頁面爲：

• 由於有一些時候，咱們想不按照HTML佈局的方式來顯示頁面，此時就要用到order屬性


HTML:
<div class="container">
    <div class="content first">
        <figcaption>1.文章，1984年6月26日出生於陝西省西安市，中國內地男演員、導演。</figcaption>
    </div>
    <div class="content second">
        <figcaption>2.文章，1984年6月26日出生於陝西省西安市，中國內地男演員、導演。</figcaption>
    </div>
    <div class="content three">
        <figcaption>3.文章，1984年6月26日出生於陝西省西安市，中國內地男演員、導演。</figcaption>
    </div>
</div>


CSS:
 .container{
            display: flex;
            flex-direction: column;
        }
.content{
            border: 1px dashed mediumaquamarine;
        }
.first{
            order: 2;
        }
.second{
            order:3
        }
.three{
            order:1
        }

flex-grow

• 意義：某個元素擴大幾倍
• 當內容的寬度小於容器的寬度時，會遊空白地方留出來

• 爲了避免留空白地方，讓第二個盒子相比較其餘盒子擴大1倍

CSS:
.content{
            width: 200px;
        }
.second{
            flex-grow: 1;
        }

flex-shrink

• 意義：某個元素縮小几倍
• 當內容的寬度大於容器的寬度，會溢出，這時讓第二個盒子相比較其餘元素縮小1倍

CSS:
.content{
            width: 1000px;
        }
.second{
            flex-shrink: 2;
        }

 

 

flex-basis

• 意義：給元素一個初始寬度
• 水平方向至關於寬度

.content{
            flex-basis: 420px;
        }

flex簡寫

//flex-grow,flex-shrink,flex-basis
flex:1 1 420px