Flex 是 Flexible Box 的縮寫,意為"彈性佈局",用來為盒狀模型提供最大的彈性。 【推薦教學:小程式開發教學】
任何一個容器都可以指定為 Flex 版面。
.box{ display: flex; }
行內元素也可以使用 Flex 版面。
.box{ display: inline-flex; }
Webkit 核心的瀏覽器,必須加上-webkit前綴。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意,設為 Flex 佈局以後,子元素的float、clear和vertical-align屬性將會失效。
Flex基本概念
採用 Flex 佈局的元素,稱為 Flex 容器(flex container),簡稱"容器"。它的所有子元素自動成為容器成員,稱為 Flex 項目(flex item),簡稱為「項目」。
容器預設存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的起始位置(與邊框的交叉點)叫做main start,結束位置叫做main end;交叉軸的起始位置叫做cross start,結束位置叫做cross end。
項目預設沿主軸排列。單一專案佔據的主軸空間叫做main size,佔據的交叉軸空間叫做cross size。
容器的屬性
flex-direction:屬性決定主軸的方向(即項目的排列方向)。 (左中右 上中下)
flex-wrap:屬性定義,若一條軸線排不下,如何換行。
flex-flow:flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap
justify-content:屬性定義了項目在主軸上的對齊方式。 (左中右)
align-items:屬性定義項目在交叉軸上如何對齊。 (上中下)
align-content:屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,則該屬性不起作用。
以上是微信小程式-Flex 佈局是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!