單行的時候文本不足會居中，多行會自動折行居左

display: flex;
flex-direction: row;
justify-content: center;

頁面高度不足時，在底部顯示；頁面高度超出時，隨頁面滾動

display: flex;
flex-direction: column;
justify-content: space-between;

flex的子元素分布比例

flex屬性的默認(rèn)值為：0 1 auto（不放大會縮小）三個參數(shù)：flex-grow、flex-shrink、flex-basis
flex-grow：定義子元素的放大比例
flex-basis：定義元素的基礎(chǔ)寬度,覆蓋width
flex-shrink：定義子元素的縮小比例

一種是子元素的寬是相同的.即flex:1
三個子元素寬是不同的.即flex設(shè)置為不同的比例
有一個子元素的寬是固定的，這時flex的值可以設(shè)置為固定寬，比例，比例

<style>
        .flex {
            display: flex;
        }
        .flex div {
            height: 200px;
            background:rebeccapurple;
            margin: 10px;
            flex: 1;/* 一種是子元素的寬是相同的.即flex:1 */
        }
        .flex1 {
            display: flex;
        }
        .flex1 div {
            height: 200px;
            background: goldenrod;
            margin: 10px;
        }
        .flex1 .right,.left {
            flex: 1;/* 三個子元素寬是不同的.即flex設(shè)置為不同的比例 */
        }
        .flex1 .center {
            flex: 4;/* 三個子元素寬是不同的.即flex設(shè)置為不同的比例 */
        }
        .flex2 {
            display: flex;
        }
        .flex2 div {
            height: 200px;
            background: green;
            margin: 10px;
        }
        .flex2 .right {
            flex: 200px;/* 有一個子元素的寬是固定的，這時flex的值可以設(shè)置為固定寬，比例，比例 */
        }
        .flex2 .center {
            flex: 5;/* 有一個子元素的寬是固定的，這時flex的值可以設(shè)置為固定寬，比例，比例 */
        }
        .flex2 .left {
            flex: 1;/* 有一個子元素的寬是固定的，這時flex的值可以設(shè)置為固定寬，比例，比例 */
        }
        .font{
            color: aliceblue;
            text-align: center;
            line-height: 200px;
        }
    </style>
 <div class="flex">
        <div class="right font">一種是子元素的寬是相同的.即flex:1</div>
        <div class="center font">flex: 1;</div>
        <div class="left font">flex: 1;</div>
    </div>
    <div class="flex1">
        <div class="right font">flex: 1;</div>
        <div class="center font">flex: 4;三個子元素寬是不同的.即flex設(shè)置為不同的比例</div>
        <div class="left font">flex: 1;</div>
    </div>
    <div class="flex2">
        <div class="right font">flex: 200px;</div>
        <div class="center font">flex: 5;有一個子元素的寬是固定的，這時flex的值可以設(shè)置為固定寬，比例，比例</div>
        <div class="left font">flex: 1;</div>
    </div>

flex.png

實例html：

<title>內(nèi)容不足時頁腳在底部</title>
    <style>
            html,body{
                height: 100%;
            }
            .page{
                /* flex方法 */
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                /* 定位方法 */
            }
            .mian{
                background-color: blueviolet;
            }
            .liner{
                display: flex;
                flex-direction: row;
                justify-content: center;
            }
            .footer{
                width: 100%;
                background-color: green;
            }
    </style>
 <div class="page">
        <div class="mian">
            頁面內(nèi)容
            <div class="liner">
                單行文本居中，多行文本居左顯示
            </div>
        </div>
        <div class="footer">
            頁面高度不足時，在底部顯示；頁面高度超出時，隨頁面滾動footer
        </div>
    </div>

多行.png

單行.png

需要注意的是任何容器都可以指定為flex布局，但是在flex布局中float、clear、vertical-align都會失效。

主軸方向

flex容器分為x軸與y軸，x軸正方向默認(rèn)從左至右，y軸正方向默認(rèn)從上到下。
定義一個容器為彈性布局display:flex;主軸默認(rèn)方向為左到右；
如果想去改變flex的默認(rèn)方向，就需要用到flex-direction屬性
flex-direction有四個屬性值，分別是row、row-reverse、column、column-reverse，分別為從左到右、從右到左、從上到下、從下到上
父元素身上的屬性:
主軸方向的對齊方式

justify-content:flex-start則主軸為左對齊
justify-content:flex-end 則主軸為右對齊
justify-content:center 則主軸為居中
justify-content:space-between則每個子項目之間等距離，前提是有剩余空間
justify-content:space-around則每個子項目會平分剩余空間，子項目與父元素邊界處也會存在距離

縱向單行對齊方式

align-item:flex-start縱向從上到下
align-item:flex-end縱向從下到上
align-item:center縱向居中對齊
align-item:baseline以基線對齊
align-item:strech這是默認(rèn)方式

子項目換行

flex-wrap:wrap超出父元素會換行
flex-wrap:wrap-reverse反向換行
flex-wrap:no wrap這是默認(rèn)方式,不換行

縱向多行對齊方式

align-content:flex-start上對齊
align-content:flex-end下對齊
align-content:center上下居中
align-content:space-between
align-content:space-around

子項目的一些屬性:

order:0,定義子項目的排序位置，數(shù)值越小越靠前，默認(rèn)為0
flex-grow:0;定義子項目的放大比例，默認(rèn)為0不放大
flex-shrink:1;定義子項目的縮小比例，默認(rèn)為1，空間不足將等比縮小，0則不縮小，負(fù)值無效
flex-basis:1;定義子項目占據(jù)空間，默認(rèn)為auto，可以設(shè)置百分比，也可以是固定值
flex:flex-grow flex-shrink flex-basis