CSS6：flex布局

Jioby 發布于2019-08-29 17:09 / 2595人閱讀

摘要：主要用來做橫向的布局。元素的布局學習我分成兩個部分，第一個部分是元素布局。以下幾個屬性影響著元素的布局。詳細還是看分鐘徹底弄懂布局講的非常明白。的時候，伸縮時需要考慮，按照進行等比例伸縮。布局套路學習布局教程實例篇

前言：
這是我看過最好的flex布局教程：
30分鐘徹底弄懂flex布局

傳統的布局方法與flex屬性通覽

文檔流：塊級元素獨占一行，從上往下排列，行級元素從左往右排列。

display inline-block主要用來做橫向的布局。
用分離負maigin用來產生位移。

元素的布局

學習flex我分成兩個部分，第一個部分是元素布局。以下幾個屬性影響著元素的布局。

/*容器上：*/
justify-content
align-items
flex-direction
flex-wrap
flex-flow
align-content
/*元素上：*/
order
align-self

做完下面的游戲，看完下面的兩篇文章，理解了上面幾個屬性的用法，就理解了元素的布局。他們已經寫得很詳細了。這里不需要我班門弄斧。
30分鐘徹底弄懂flex布局
Flex 布局教程：語法篇

CSS3【Flex布局】有趣的青蛙游戲
游戲一共24關，每關把所有顏色青蛙移動到對應顏色荷葉上即可過關
通關后就會使用影響布局的屬性。

伸縮與尺寸

而影響大小和伸縮與尺寸的屬性flex-grow、flex-shrink、flex-basis這三個屬性比較難理解，可以看30分鐘徹底弄懂flex布局和深入理解flex布局的flex-grow、flex-shrink、flex-basis

在這里記錄一下自己的理解。

flex-basis

flex-basis 用于設置元素在主軸上的大小（如果軸體變成從上到下，就會覆蓋height）。

flex-basis: 0 表示元素根據內容撐開寬度，width不管用了。

flex-basis優先級比width高。

flex-basis為auto時，如設置了width則元素尺寸由width決定；沒有設置則由內容決定。（默認就是auto）所以如果一個容器設置為flex布局，那么他里面的元素在沒有設置寬高的時候，大小都由內容撐開！

詳細還是看30分鐘徹底弄懂flex布局講的非常明白

flex-shrink

如果不換行flex-wrap: nowrap;主軸上的元素總和超了容器寬度，那么默認會縮小。

flex-shrink默認是1，即縮小因子是1，也就是當不夠分配時，元素都將等比例縮小，占滿整個寬度。

flex-shrink是0表示這個元素不縮小，如果超了，就在其他元素上動手腳縮小。

詳細還是看30分鐘徹底弄懂flex布局講的非常明白。

flex-grow

默認為flex-grow:0，即，不擴大。原來是多大就是多大（flex-basic或者width、height的長度）

然后按照擴大因子按權分配。例如有50px沒有分配，兩個子元素flex-grow:分別為flex-grow:3和flex-grow:2，那么第一個元素就分配30px，第二個元素分配20px。

如果第一個元素設置flex-grow為1，另一個沒有設置，那么多出來的全部的大小都會分配給第一個元素。

詳細還是看30分鐘徹底弄懂flex布局講的非常明白。

flex

flex = flex-grow + flex-shrink + flex-basis
一些簡寫

flex: 1 = flex: 1 1 0%//
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // **常用于固定尺寸 不伸縮**

flex: 1和 flex: auto的區別

flex-grow + flex-shrink都是1的話意思就是不管是超出這一行，還是小于這一行，都按比例占滿這一行（放大或縮小元素）！！

flex:1 和 flex:auto 的區別
都是按比例放大縮小，然后占滿一行。
其實可以歸結于flex-basis:0和flex-basis:auto的區別。

flex-basis是指定初始尺寸，當設置為0時（絕對彈性元素），此時相當于告訴flex-grow和flex-shrink在伸縮的時候不需要考慮我的尺寸；相反當設置為auto時（相對彈性元素），此時則需要在伸縮時將元素尺寸納入考慮。
總結：

flex: 1的時候，伸縮時不需要考慮width，因為flex-basis:0（元素為內容撐開的寬度），只需要按照元素的內容寬度進行等比例的伸縮。

flex: auto的時候，伸縮時需要考慮width，按照width進行等比例伸縮。

舉例：flex：1應用：

#container{
    display: flex;
    flex-wrap: nowrap;
    width: 200px;
    height: 200px;
    background-color: orange;
}

#item:nth-child(1){
    flex:1;/*這里*/
    width: 100px;

    height:100px;
    background-color: blue;
}
#item:nth-child(2){
    flex:1;/*這里*/
    width:50px;

    height:100px;
    background-color: green;
}
#item:nth-child(3){
    /* flex:1; *//*這里沒寫*/
    width:30px;

    height: 100px;
    background-color: #ccc;
}

前兩個元素將剩余的空間平局分了，因為沒有內容，顯示的寬度都是0，于是兩個元素分得的擴大像素一樣，所以平分了。

而如果是flex：auto，那么將會根據width按比例伸縮，占滿一行。

flex布局套路學習

Flex 布局教程：實例篇

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

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

css權重

摘要：什么是權重大基礎選擇器權重指的是大基礎選擇符的優先級，優先級高的樣式會覆蓋優先級底的樣式，優先級越高說明權重越高，反之亦然。 1、什么是css權重？css6大基礎選擇器 css權重指的是css6大基礎選擇符的優先級，優先級高的css樣式會覆蓋優先級底的css樣式，優先級越高說明權重越高，反之亦然。 css6大基礎選擇器： a）、id選擇器(#box{}) b）、類選擇器(.box{})...

lyning 2019-08-30 15:55 評論0 收藏0
結合CSS3的布局新特征談談常見布局方法

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

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

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

cnTomato 2019-08-01 15:01 評論0 收藏0
幾種常見布局的flex寫法

摘要：幾種常見布局的寫法首先要對父元素設置布局方式，同時在本案例中，利用媒體查詢，當屏幕分辨率小于的時候，布局變成縱向排列。兩列布局定寬是的簡寫方式。 flex布局目前基本上兼容主流的瀏覽器，且實現方式簡單。我整理了flex的一些知識點，并且總結歸納了幾種常見布局的flex寫法 ?flex基礎知識點 flex-grow和flex-shrink相關計算公式公式1：子元素空間 < 父容器父...

fish 2019-08-01 17:08 評論0 收藏0
我所知道的flex布局 —— 上篇

摘要：布局也經歷了一段演變歷史。不同于將要出現的網格布局針對目標為大比例布局，彈性盒布局更適用于應用組件和小比例布局。常規布局是基于塊和內聯流方向，而布局是基于流。前言你還在用display+position+float來進行css布局嗎？有沒有覺得用傳統的這種布局方法來實現特殊布局特別麻煩困難，例如：垂直居中。今天來記錄一下自己對flex布局的了解（雖然不算神馬新東西了都可以說是舊東西...

andycall 2019-08-30 13:13 評論0 收藏0