幾種常見布局的flex寫法

fish 發(fā)布于2019-08-01 17:08 / 943人閱讀

摘要：幾種常見布局的寫法首先要對父元素設置布局方式，同時在本案例中，利用媒體查詢，當屏幕分辨率小于的時候，布局變成縱向排列。兩列布局定寬是的簡寫方式。

flex布局目前基本上兼容主流的瀏覽器，且實現(xiàn)方式簡單。我整理了flex的一些知識點，并且總結(jié)歸納了幾種常見布局的flex寫法

?flex基礎知識點 flex-grow和flex-shrink相關計算公式

公式1：子元素空間 < 父容器

父容器剩余空間 = 父容器寬度 - 子元素寬度之和
增長單位 = 父容器剩余空間 / 各子元素flex-grow之和
子元素實際寬度 = (flex-basis) + 增長單位*(flex-grow)

公式2：子元素空間 > 父容器

子元素溢出的寬度 = 子元素的寬度之和 - 子元素寬度之和
收縮單位 = 子元素溢出的寬度 / 各子元素flex_shrink之和
計算的子元素的寬度 = (flex-basis) - 收縮單位*(flex-shrink)

flex兼容性

目前flex兼容主流瀏覽器，對于部分兼容的瀏覽器可加私有屬性：

display:-ms-flex;/* IE10 */
display:-moz-flex;/* Firefox2 ~ Firefox21 */
display:-webkit-flex;

flex bugs

在IE10~11瀏覽器,min-height不適合于flex容器的子元素flex項目。如果可能的話，使用height來替代min-height。

在Chrome，Opear和Safari瀏覽器不識別flex項目內(nèi)容的最小尺寸?？梢栽O置flex-shrink的值為0（而不是默認的1），以避免不必要的收縮。

不使用無單位的flex-basis值，因為在IE10~11中，flex簡寫被忽略。常使用0%來替代0px。

flex布局應用場景

Flexbox布局比較適合Web應用程序的一些小組件和小規(guī)模的布局，而Grid布局更適合用于一些大規(guī)模的布局。

flex布局優(yōu)缺點

兼容所有主流瀏覽器

輕松實現(xiàn)元素的水平垂直居中

可以忽略內(nèi)聯(lián)元素的4px外邊距

可以簡單的實現(xiàn)復雜的布局

推薦閱讀

大漠：《一個完整的Flexbox指南》

阮一峰：《Flex 布局教程》

Philip Walton和Greg Whitworth收集和整理了有關于Flexbox bugs。

幾種常見布局的flex寫法

首先要對父元素設置flex布局方式，同時在本案例中，利用媒體查詢，當屏幕分辨率小于768px的時候，flex布局變成縱向排列。

兩列布局
flex-grow定義的是元素的放大比例，默認值為0，表示元素不放大。當給所有子元素賦予flex-grow的值時，該值可以看作是元素尺寸所占父元素的比例。

兩列布局定寬
flex是flex-grow flex-shrink flex-basis的簡寫方式。

給第一個子元素賦值flex：1 0 100px;表示該元素在任何情況下的寬度均是固定位100px，不會隨著父元素和其他子元素縮放。
第二個子元素的flex-grow為1，則在任何情況下該元素均占滿父元素的剩余空間，設置overflow可以防止元素溢出。

三列布局
該布局中重點介紹的是order屬性，元素的先后排列順序與order的值對應，order值越大，元素越靠后。

n列等比布局
注意到第6個子元素的特殊性，我們希望這六個子元素能等寬分布，但是當元素內(nèi)容過多時，它會占用更多的空間，甚至溢出。

因此對這些元素定義了width:100%;該方法表示所有的元素均占用父元素應有的位置，不因其他兄弟元素內(nèi)容過多而少分配空間。

流式布局
流式布局可適用于自適應布局中，當父元素大小發(fā)生改變時，其子元素的大小也隨之改變。

該布局的重點屬性是flex-wrap:wrap;，如此設置可以使子元素自動換行，防止子元素溢出。

水平垂直居中
關鍵屬性為justify-content:center;align-item:center;這是flex布局的一個兩點，不需要知道父、子元素任何相關的尺寸信息，便能實現(xiàn)居中布局，靈活性很大。

對折線
該案例以及下面的“各種對齊方法”主要是介紹flex中，水平和垂直方向上的的各種對齊方式。

各類對齊方式

GPU云服務器云服務器 flex布局 sql的寫法 php的鏈式寫法 python并的寫法

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50968.html

結(jié)合CSS3的布局新特征談談常見布局方法

摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結(jié)。常見的頁面布局在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區(qū)域，然后選擇一...

xuhong 2019-08-28 18:31 評論0 收藏0
結(jié)合CSS3的布局新特征談談常見布局方法

摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。寫在前面最近看到《圖解CSS3》的布局部分，結(jié)合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結(jié)。常見的頁面布局在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區(qū)域，然后選擇一...

cnTomato 2019-08-01 15:01 評論0 收藏0
前端基礎匯總

摘要：及相關問題數(shù)據(jù)類型函數(shù)中指向原型作用域閉包面向?qū)ο髮ο髣?chuàng)建模式繼承嚴格模式與對象轉(zhuǎn)換的方法添加屬性，根據(jù)原型創(chuàng)建區(qū)別新特性解構(gòu)賦值簡化對象寫法剪頭函數(shù)三點運算符模板字符串形參默認值異步過程深拷貝與淺拷貝賦值與淺拷貝的區(qū)別淺拷貝的幾種方法實現(xiàn) js及es相關問題數(shù)據(jù)類型函數(shù)中this指向——————原型作用域閉包——————面向?qū)ο髮ο髣?chuàng)建模式繼承——————Es5嚴格模式Json與j...

2json 2019-08-23 16:58 評論0 收藏0
前端基礎匯總

摘要：及相關問題數(shù)據(jù)類型函數(shù)中指向原型作用域閉包面向?qū)ο髮ο髣?chuàng)建模式繼承嚴格模式與對象轉(zhuǎn)換的方法添加屬性，根據(jù)原型創(chuàng)建區(qū)別新特性解構(gòu)賦值簡化對象寫法剪頭函數(shù)三點運算符模板字符串形參默認值異步過程深拷貝與淺拷貝賦值與淺拷貝的區(qū)別淺拷貝的幾種方法實現(xiàn) js及es相關問題數(shù)據(jù)類型函數(shù)中this指向——————原型作用域閉包——————面向?qū)ο髮ο髣?chuàng)建模式繼承——————Es5嚴格模式Json與j...

laznrbfe 2019-08-29 18:38 評論0 收藏0
Flex 布局常見的幾種方式

摘要：之前的布局方式正常流或叫文檔流負布局特點塊級元素側(cè)重垂直方向行內(nèi)布局側(cè)重水平方向，布局是與方向無關的。 flex 之前的布局方式 normal flow（正常流或叫文檔流） float + clear position relative + absolute display inline-block 負margin flex 布局特點塊級元素側(cè)重垂直方向、行內(nèi)布局側(cè)...

April 2019-08-29 15:19 評論0 收藏0