微信小程式-Flex 佈局是什麼

云罗郡主
發布: 2019-01-21 11:56:02
轉載
3986 人瀏覽過

Flex 是 Fl​​exible 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),簡稱為「項目」。

微信小程式-Flex 佈局是什麼

容器預設存在兩根軸:水平的主軸(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中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!