成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

flex布局示例

bigdevil_s / 406人閱讀

摘要：來自授權(quán)地址作者水牛幾個橫排元素在豎直方向上居中橫向排列垂直方向上居中在母控件的正中相當于中的的橫向排列水平居中垂直方向上居中自定義的一個標題欄帶圖標的標題居中右邊有關(guān)閉按鈕繞的一個坑中間的用包裹布局可實現(xiàn)效果右邊的用可以實現(xiàn)關(guān)閉

來自：授權(quán)地址
作者：水牛01248

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

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

在母控件的正中:相當于android中的RelativeLayout的

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

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

繞的一個坑: 中間的用div包裹,flex布局可實現(xiàn)centerInParent效果,右邊的用position:
absolute;right: 0.75rem,可以實現(xiàn)關(guān)閉按鈕在右邊,但是脫離的文檔流,居中不好弄. 能不能不脫離flex的文檔流?

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

                

                

                    
圖片

                    
文字

                

                
x

同理,利用justify-content: space-between + align-items: center 可以實現(xiàn)右邊垂直居中的效果:

把左邊的兩個元素用div包裹,然后和右邊的元素作為flex布局的兩個item,用space-between撐到兩邊.

常見的tab導(dǎo)航欄的實現(xiàn)

.tab-container{
    display: flex;
    flex-direction: row;//橫向排列
    flex-wrap: nowrap;//不換行
     overflow-x: scroll;//橫向放不下時允許滾動
    justify-content:space-around;//各item之間被間隔包裹
    align-items: center;//垂直方向上居中
}
/*tab欄的條目數(shù),自動均分*/
.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布局

轉(zhuǎn)自：轉(zhuǎn)載地址

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91655.html

相關(guān)文章

  • 搭建移動端布局框架:整合flex

    摘要：概述在移端的兼容并不是很好但是在移動端的支持卻是很好而且布局對移動端布局來說簡直就是福音但是沒有經(jīng)過整和處理用布局也算是艱難所以打算搭建一套基于的移動端布局工具來學習容器類容器工具類這是對和屬性的封裝將一個元素變成橫向的容器將一個元素變成 0x001 概述 flex在移pc端的兼容并不是很好,但是在移動端的支持卻是很好,而且flex布局對移動端布局來說簡直就是福音.但是沒有經(jīng)過整和...

    icyfire 評論0 收藏0

  • 前端入門5-CSS彈性布局flex

    摘要：總之有了基礎(chǔ)，理解彈性布局蠻容易的。語法格式當容器的設(shè)置了溢出換行屬性，且當前在交叉軸方向上存在多行的情況下，該屬性才會生效。 本篇文章已授權(quán)微信公眾號 dasu_Android（大蘇）獨家發(fā)布 聲明 本系列文章內(nèi)容全部梳理自以下四個來源： 《HTML5權(quán)威指南》 《JavaScript權(quán)威指南》 MDN web docs Github:smyhvae/web 作為一個前端小白，入門跟...

    王晗 評論0 收藏0

  • flex布局示例

    摘要：來自授權(quán)地址作者水牛幾個橫排元素在豎直方向上居中橫向排列垂直方向上居中在母控件的正中相當于中的的橫向排列水平居中垂直方向上居中自定義的一個標題欄帶圖標的標題居中右邊有關(guān)閉按鈕繞的一個坑中間的用包裹布局可實現(xiàn)效果右邊的用可以實現(xiàn)關(guān)閉 來自：授權(quán)地址作者：水牛01248 幾個橫排元素在豎直方向上居中 display: flex; flex-direction: row;//橫向排列 ali...

    DevTalking 評論0 收藏0

  • Flex 項目屬性：flex 布局示例

    flex屬性： flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。 下面來看看使用項目屬性flex的兩個示例： 一、 CSS： 1 2 body{ margin: 0;padding: 0;font-siz...

    levinit 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<