Flex布局

dockerclub 發布于2019-08-30 15:53 / 2186人閱讀

摘要：這相當于設置屬性為定義子項多帶帶在側軸縱軸方向上的對齊方式屬性可重寫靈活容器的屬性語法格式紅色藍色帶有更多內容的綠色參考

Flex布局 1.什么是Flex布局

Flex是Flexible Box的縮寫,意為彈性布局,任何容器都可以設為彈性布局.

.box{
    display:flex;
    display:inline-flex;   //行內元素
    display:-webkit-flex;  //Webkit內核的瀏覽器
}

設為Flex布局以后,子元素的float、clear和vertical-align屬性將失效.

2.容器屬性 flex-direction

指定了內部元素是如何在flex容器中布局的,定義了主軸的方向(正方向或反方向).
語法格式:flex-direction:row | row-reverse | column | column-reverse




    
    Title
    


This is a Column-Reverse

    A
    B
    C

This is a Row-Reverse

    A
    B
    C

flex-wrap

指定flex元素單行還是多行顯示.如果允許換行,該屬性允許你控制行的堆疊方向.
語法格式:flex-wrap: nowrap | wrap | wrap-reverse




    
    Title
    


This is an example for flex-wrap:nowrap 

    1
    2
    3

This is an example for flex-wrap:wrap 

    1
    2
    3

This is an example for flex-wrap:wrap-reverse 

    1
    2
    3

flex-flow

是flex-direction和flex-wrap的簡寫.
語法格式: flex-flow: || ,例如:flex-flow: column-reverse wrap;

justify-content

定義了瀏覽器如何分配順著父容器主軸的彈性元素之間及其周圍的空間.
語法格式:justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start 從行首開始排列.每行第一個彈性元素與行首對齊,同時所有后續的彈性元素與前一個對齊.
flex-end 從行尾開始排列.每行最后一個彈性元素與行尾對齊,其他元素將與后一個對齊.
center 伸縮元素向每行中點排列.每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同.
space-between 在每行上均勻分配彈性元素.相鄰元素間距離相同.每行第一個元素與行首對齊,每行最后一個元素與行尾對齊.
space-around 在每行上均勻分配彈性元素.相鄰元素間距離相同.每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半.




    
    Title
    


This is an example for justify-content:space-between

    1
    2
    3

This is an example for justify-content:flex-start 

    1
    2
    3

This is an example for justify-content:space-around 

    1
    2
    3

align-items

以與justify-content相同的方式在側軸方向上將當前行上的彈性元素對齊.
語法格式：align-items:flex-start | flex-end | center | baseline | stretch
flex-start 元素向側軸起點對齊.
flex-end 元素向側軸終點對齊.
center 側軸中點對其.
baseline 項目的第一行文字的基線對齊.
stretch 彈性元素被在側軸方向被拉伸到與容器相同的高度或寬度.

align-content




    
    Title

align-items與items-content的區別

`align-items屬性適用于所有的flex容器,它是用來設置每個flex元素在側軸上的默認對齊方式.讓每一個單行的容器居中而不是讓整個容器居中.
align-content屬性只適用于多行的flex容器,并且當側軸上有多余空間使flex容器內的flex線對齊.`
對于Flex容器里面單行的情況,align-content是不起作用的.

對于多行的,也就是多個cross axis的情況.

3.項目屬性 order

元素按照order屬性的值的增序進行布局.擁有相同order屬性值的元素按照它們在源代碼中出現的順序進行布局.

flex-grow

定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大.




    
    Title
    


This is a Flex-Grow
A,C are flex-grow:1 . B is flex-grow:2 .

    A
    B
    C

flex-shrink

指定了 flex 元素的收縮規則.flex 元素僅在默認寬度之和大于容器的時候才會發生收縮,其收縮的大小是依據 flex-shrink 的值.
如果一個項目的flex-shrink屬性為0,其他項目都為1,則空間不足時,前者不縮小.

Title

the width of content is 500px, flex item is 500px.

A, C are flex-shrink:1. B is flex-shrink:2

flex-basis

指定了 flex 元素在主軸方向上的初始大小.如果不使用 box-sizing 來改變盒模型的話,那么這個屬性就決定了 flex 元素的內容盒（content-box）的寬或者高（取決于主軸的方向）的尺寸大小.




    
    Title

flex

規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間,flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto.后兩個屬性可選.
語法格式: flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
其中auto (1 1 auto) 和 none (0 0 auto).




    
    Title
    



    auto
    auto
    auto


    auto
    initial
    initial


    auto
    auto
    none



    initial
    none
    none


    4
    2
    1


    Flex box (click to toggle raw box)
    Raw box

auto 元素會根據自身的寬度與高度來確定尺寸,但是會自行伸長以吸收flex容器中額外的自由空間,也會縮短至自身最小尺寸以適應容器.這相當于將屬性設置為 "flex: 1 1 auto".
initial 屬性默認值,元素會根據自身寬高設置尺寸.它會縮短自身以適應容器,但不會伸長并吸收flex容器中的額外自由空間來適應容器.相當于將屬性設置為"flex: 0 1 auto".
none 元素會根據自身寬高來設置尺寸.它是完全非彈性的:既不會縮短,也不會伸長來適應flex容器,相當于將屬性設置為"flex: 0 0 auto".
元素會被賦予一個容器中自由空間的指定占比。這相當于設置屬性為"flex: 1 0".

align-self





align-self




  紅色
  藍色  
  帶有更多內容的綠色 div

參考:
https://css-tricks.com/snippe...

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

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

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

CSS6：flex布局

摘要：主要用來做橫向的布局。元素的布局學習我分成兩個部分，第一個部分是元素布局。以下幾個屬性影響著元素的布局。詳細還是看分鐘徹底弄懂布局講的非常明白。的時候，伸縮時需要考慮，按照進行等比例伸縮。布局套路學習布局教程實例篇前言：這是我看過最好的flex布局教程：30分鐘徹底弄懂flex布局傳統的布局方法與flex屬性通覽 showImg(https://segmentfault.com/i...

Jioby 2019-08-29 17:09 評論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
CSS Flex 布局：用 Flex 來實現圣杯布局

摘要：布局是年提出的，目前已經被所有瀏覽器支持，也是我現在布局的首選方案。實踐用來實現圣杯布局圣杯布局指的是一種最常見的網站布局。一般情況下，這種布局要求固定高度，固定寬度，自適應。 Flex 布局是 W3C 2009年提出的，目前已經被所有瀏覽器支持，也是我現在布局的首選方案。Flex 布局使用起來是非常簡單的，本文談一談平時使用可能需要注意的問題。 align-content 平時使用 ...

Olivia 2019-08-22 15:13 評論0 收藏0