flex盒子布局

flex布局語法教程

網頁布局(layout)是css的乙個重點應用

布局的傳統解決方案：基於盒狀模型，依賴display+position+float屬性。它對於那些特殊布局非常不便，比如，垂直劇中就不易實現

//

傳統解決垂直居中
class = "
content
">

通過position設定為不是static的其他值，如relative,absolute,fixed等。然後，就可以通過top,botton,right,left等屬性使它在文件中發生位置便宜(注意，relative是不會使元素脫離文件流的，absolute和fixed則會。也就是說,relative會佔據著移動之前的位置，但是absolute和fixed就不會)。

使用flex布局實現垂直居中：

//

flex布局實現垂直水平居中
class = "
content
">

flex布局可以簡便、完整、響應式

一.flex布局是什麼 ？

flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

任何乙個容器都可以指定flex布局

.box

行內元素也可以用flex布局

.box

webkit核心的瀏覽器，必須加上-webkit字首

.box

注意：設為flex布局之後，子元素的float、clear和vertical-align屬性將失效

二.基本概念

採用flex布局的元素，成為flex容器(flex container)，簡稱容器。它的所有子元素自動成為容器成員，成為flex專案(flex item),簡稱為專案

容器預設存在兩根軸：

水平的主軸(main axis)和垂直的交叉軸(cross axis)。

主軸的開始位置(與邊框的交叉點)叫main start，結束位置叫做main end；

交叉軸的開始位置叫做cross start，結束位置叫做cross end

三.容器的屬性

以下6個屬性設定在容器上

flex-direction               //

決定主軸的方向
flex-wrap                    //
專案排放軸線
flex-flow                     //
flex-direction  flex-wrap簡寫
justify-content            //
專案在主軸(水平)上的對齊方式
align-items                 //
專案在交叉軸(垂直)上的對齊方式
align-content              //
多根軸線的對齊方式(若一根軸線，可忽略)

.box

nowrap(預設)                     
//不換行
wrap                            //
換行，第一行在上方
wrap-reverse                    //
換行，第一行在最下方

.box

.box

flex-start（預設值）                  //
左對齊flex-end                            //
右對齊center                              //
居中space-between                       //
兩端對齊，專案之間的間隔都相等
space-around                        //
每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍

.box

flex-start                     //
交叉軸的起點對齊（頂部對齊）
flex-end                       //
交叉軸的終點對齊 （底部對齊）
center                         //
交叉中的中點對齊（居中）
baseline                       //
專案的第一行文字的基線對齊
stretch（預設值）                //
如果專案未設定高度或設為auto，將佔滿整個容器

.box

flex-start                         //
與交叉軸起點對齊
flex-end                           //
與交叉軸中點對齊
center                             //
與交叉軸中點對齊
space-between                      //
與交叉軸兩端對齊，軸線之間的間隔平均分布
space-around                       //
每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch （預設值）                   //
軸線佔滿整個交叉軸

四.專案的屬性

以下的6個屬性設定在專案上

order                                      //

專案的排列順序。數值越小，排列越靠前，預設為0
flex-grow                                  //
專案的放大比例，預設為0
flex-shrink                                //
專案的縮小比例，預設為1
flex-basis                                 //
分配多餘空間，預設auto
flex                                       //
flex-grow，flex-shrink，flex0basis的簡寫，預設為0 1 auto
align-self                                 //
允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items，預設為auto

.item

//1  1  1  1  2  3  3  4  5  7 
//-1  2  5  6  7  
//2  2  99

.item

.item

.item

.item

.item

flex盒子布局

看過很多對於彈性盒子flex的簡介，但還是覺得阮一峰大神的解析和張鑫旭大神 舊版flex 的解析比較容易理解，下面，我以自己的理解來敘述關於flex彈性布局！在flex中，有容器和專案之分，但也只是相對的，假如說 div1裡面有div2，div2裡面有div3，而且他們都被定義為flex盒子 div...

彈性盒子布局 flex布局

彈性盒子布局方式 box 設為flex布局後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 容器...

flex布局 彈性盒子

1.display flex inline flex 子元素的float clear和vertical align屬性將失效。flex direction 主軸的方向即專案排列方向 預設row flex wrap 軸線排不下，如何換行 flex flow 預設值為row nowrap justify...