flex佈局示例

來自：受權地址
做者：水牛01248

幾個橫排元素在豎直方向上居中

display: flex;
flex-direction: row;//橫向排列
align-items: center;//垂直方向上居中

在母控件的正中:至關於android中的RelativeLayout的

display: flex;
flex-direction: row;//橫向排列
justify-content: center;//水平居中
align-items: center;//垂直方向上居中

自定義modal的一個標題欄,帶圖標的標題居中,右邊有關閉按鈕

繞的一個坑: 中間的用div包裹,flex佈局可實現centerInParent效果,右邊的用position:
absolute;right: 0.75rem,能夠實現關閉按鈕在右邊,可是脫離的文檔流,居中很差弄. 能不能不脫離flex的文檔流?

能夠的,左邊加一個空的div,就能夠對稱了,用flex佈局的justify-content: space-between,就能均勻排列了.

<div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;
            align-content: center;background-color: #0d88c1;padding-left: 0.75rem;padding-right: 0.75rem">
                <div></div>
                <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;background-color: #1f9d85">
                    <div style="font-size: 2rem">圖片</div>
                    <div >文字</div>
                </div>
                <div style="background-color: red;">x</div>
            </div>

同理,利用justify-content: space-between + align-items: center 能夠實現右邊垂直居中的效果:

把左邊的兩個元素用div包裹,而後和右邊的元素做爲flex佈局的兩個item,用space-between撐到兩邊.

常見的tab導航欄的實現

.tab-container{
    display: flex;
    flex-direction: row;//橫向排列
    flex-wrap: nowrap;//不換行
     overflow-x: scroll;//橫向放不下時容許滾動
    justify-content:space-around;//各item之間被間隔包裹
    align-items: center;//垂直方向上居中
}

/*tab欄的條目數,自動均分*/
.tab-items{
    flex: 1 0 200rpx;//自己大小200rpx,能夠擴張(1:好比只有兩個tab時,平分width),不準壓縮(0)
    text-align: center;
    padding-bottom: 25rpx;
    padding-top: 25rpx;
    font-size: 30rpx;
    color: #333333;
}

佈局練習:
1.item佈局

轉自：轉載地址