flex布局常見用法小結

1，display：flex

這個在父容器中宣告；

2，flex-direction:row / column

預設為橫向，也在父容器中設定，定義flex布局的主軸方向；一條軸為主軸，那麼另一條軸自然而然就是副軸；

3，flex：1

在子元素中設定，表示所有的子元素不管內容如何，其寬度和高度都完全一樣，且加起來剛好充滿父容器；

4，align-items:center | flex-start | flex-end | space-between | space-around

這個表示元素在副軸方向上的排列；

5，justify-content:center | flex-start | flex-end | space-between | space-around

表示元素在主軸方向上的排列，在父容器中設定，center代表所有元素擠到最中間顯示，如下：

而space-between則意味著空格將主要處於橫向頁面的中間，換言之，左右兩邊界沒有空隙，效果如下：

space-around則代表所有的子元素左右間隙相等，左右邊界均有空隙，效果如下：

6.flex-wrap:no-wrap(預設)  |  wrap

這是關於是否換行的問題，如已經設定子元素的大小，但子元素的數量加起來長度超過螢幕一行，那麼因為預設是不換行的，子元素原來被設定的寬度將被壓縮，所有子元素硬擠在一行顯示，如下。

更改屬性flex-wrap:wrap，讓其換行顯示，子元素的寬高又恢復正常，看下圖

更多專業前端知識，請上

【猿2048】www.mk2048.com

flex布局常見用法小結

1，display flex 這個在父容器中宣告 2，flex direction row column 預設為橫向，也在父容器中設定，定義flex布局的主軸方向 一條軸為主軸，那麼另一條軸自然而然就是副軸 3，flex 1 在子元素中設定，表示所有的子元素不管內容如何，其寬度和高度都完全一樣，且加...

Flex布局理論小結

flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。衍生過程 display box display flexbox display flex 任何乙個容器都可以指定為flex布局。行內元素也可以使用flex inline 布局。flex direction 決...

彈性布局flex小結

檢視css某個屬性的相容情況 calc 25 1px box sizing center box 向外擴充套件 box sizing border box 向內擴充套件 父級身上的屬性 display flex 新增瀏覽器字首 webkit postcss外掛程式 自動加字首 display web...