flex布局示例

DevTalking 發布于2019-08-14 16:58 / 2441人閱讀

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

來自：授權地址
作者：水牛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,就能均勻排列了.

同理,利用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布局

轉自：轉載地址

GPU云服務器云服務器 flex布局 flex flex40 flex 教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/66344.html

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

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

icyfire 2019-08-30 15:53 評論0 收藏0
前端入門5-CSS彈性布局flex

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

王晗 2019-04-23 13:14 評論0 收藏0
flex布局示例

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

bigdevil_s 2019-08-22 11:02 評論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 2019-04-23 11:54 評論0 收藏0