Flex彈性布局

1、flex=flexible box的縮寫，採用flex布局的元素，稱為flex容器；它的所有子元素自動成為容器成員，稱為flex專案（flex item）。設定容器屬性display：flex。

2、屬性

容器屬性flex-flow: flex-direction  flex-wrap

flex-direction: row || row-reverse || column || column-reverse（設定主軸方向，即子元素的排列方向）
flex-wrap: nowrap || wrap || wrap-reverse（是否換行）

容器屬性justify-content: flex-start || flex-end || center || space-between || space-around(子元素在主軸方向的排列方式)

容器屬性align-items: flex-start || flex-end || center || stretch(預設值) || baseline，

對於預設值stretch，如果子元素沒有設定高度或者auto，則被拉伸佔整個容器高度或寬度

專案屬性fiex: flex-grow || flex-shrink || flex-basis  (用於處理容器剩餘空間)

flex-grow: 預設值是0，用於擴充套件子元素的寬度，設定當前子元素應該佔據剩餘空間的比例，
該比例 = （該子元素的flex-grow值）除以（所有兄弟元素的flex-grow值之和）；
flex-shrink:預設值為1，當空間不足時，子元素將縮小。

專案屬性align-self:屬性值與align-items相同，設定單個子元素在交叉軸的排列方式。

flex布局（彈性布局）

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

Flex布局（彈性布局）

flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...

Flex布局 彈性布局

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