Flex布局（彈性布局）

2021-08-28 20:56:58 字數 1029 閱讀 6022

flex是flex box的縮寫，即彈性布局。

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

行內元素也可以使用flex布局。

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

.box
.box
.box
注意：設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。採用flex布局的元素，稱為flex容器（flex container）,簡稱容器。它的所有子元素自動成為容器成員，稱為flex專案（flex item）,簡稱專案。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。

flex-direction屬性決定主軸的方向（即專案的排列方向）。

.box
預設情況下，專案都排在一條軸線上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

.box
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap

.box
justify-content屬性定義了專案在主軸的對齊方式。

.box
align-items屬性定義專案在交叉軸上如何對齊。

.box
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

.box
以下6個屬性設定在專案上。

實踐：flex 布局教程：例項篇 - 阮一峰的網路日誌

flex布局（彈性布局）

flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...

Flex布局 彈性布局

1.flex direction flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse 2.flex wrap 預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定...

Flex布局（彈性布局）

傳統布局 flex布局 建議父級常見屬性 flex direction設定主軸的方向主軸與側軸會變化，變化取決於flex direction值的設定，值設定誰為主軸，剩下的就是側軸 屬性值 描述row預設值，從左到右 row reverse從右到左 column從上到下 column reverse...