元素與主軸的對齊方式
/* 定義flex容器 */
display
: flex;
/* 設定容器內部元素的排列方向
row:定義排列方向，從左到右
row-reverse:從右到左
column:從上到下
column-reverse:從下到上
*/flex-direction
: row-reverse;
/* nowrap:不換行
wrap:換行
*/flex-wrap
: nowrap;
/* 設定元素在主軸上的對齊方式
flex-start:（預設）左對齊 向上
flex-enf:右對齊 向下
center:居中對齊
space-between: 兩端對齊，元素之間平均等分剩餘空白間隙部分
space-around: 元素兩邊平均等分剩餘空白間隙部分，最左或最右和元素之間距離是1:2
*/justify-content
: space-between;
/* 設定容器中元素在交叉軸上的對齊方式
stretch:（預設）當元素的高度沒有設定，則元素的高度會拉伸至容器高度一致
flex-start:在交叉軸上向起點位置（向上或向左）對齊
flex-end:在交叉軸上向起點位置（向下或向右）對齊
center:居中對齊
baseline:保證元素中的文字在同一條基準線，也就是每個文字都在同一水平線上
*/align-items
: center;
/* 當軸線超過1條的時候，flex容器可以把多條軸線視為元素對待，可以進行對齊
center:居中
flex-start：向左對齊
flex-end：向右對齊
stretch：當寬度width沒有設定的時候，軸線可以被拉伸
space-between:兩端對齊，元素之間的空白等比切分
space-around:軸線兩邊的空白等比切分
*/align-content
: center;
/* 重寫容器中元素在交叉軸上的對齊方式
auto:預設，表示繼承父級元素的align-items屬性
stretch:（預設）當元素的高度沒有設定，則元素的高度會拉伸至容器高度一致
flex-start:在交叉軸上向起點位置（向上或向左）對齊
flex-end:在交叉軸上向起點位置（向下或向右）對齊
center:居中對齊
baseline:保證元素中的文字在同一條基準線，也就是每個文字都在同一水平線上
*/align-self
: auto;
/* order:用於設定flex容器內部的每個元素的排列順序，預設是0；排序規則：從小到大
flex-grow:用於設定元素的放大比例，預設為0，則不放大，使元素均等分填充空白多餘的部分
flex-shrink:用於定義屬性的縮放比例，預設為1，為0的時候，不進行縮放
flex-basis：設定元素固定或自動空間的佔比
*/order
: 1;
flex-grow
: 1;
flex-shrink
: 1;
object-fit
: cover;
/*等比例顯示*/
/* 處理最後一行的問題
將大的div設定為flex，然後在最後面新增乙個div元素，使其佔據的部分大於其它部分
*/#imt::after
vertical-align
: top;
/* 取出下方的留白 */
="container"
>
="red txt"
>
a<
/view>
="green txt"
>
b<
/view>
="blue txt"
>
c<
/view>
<
/view>
<
/template>
<
/script>
.container
.txt
.red
.green
.blue
<
/style>
樣式布局flex的使用
說到頁面布局，無外乎水平垂直，先說說水平，最開始使用最多的是float屬性，但是它有後遺症，塌陷呀清除呀，最後放棄轉戰flex。需要謹記的是，flex是設定在需要生效的元素的父元素上面的。display flex flex direction row column 其中row為水平布局，column...
flex使用樣式和字型
flex所支援的樣式比flash要豐富，樣式定義的方法也很多。這也是flex比flash要強大 適合網頁開發的地方之一。樣式定義型別 1.外部樣式表 1 flex會呼叫全域性樣式表global.css，該全域性樣式表由flex config.xml定義，如 1 web inf flex global...
Flex中 style 樣式使用基本說明
樣式的定義方式 1.外部樣式表 flex會呼叫全域性樣式表global.css，該全域性樣式表由flex config.xml定義，如 web inf flex global.css 系統預設的樣式表檔案global.css檔案其實沒有任何樣式定義，我們可以手動新增全域性樣式，也可以更改預設的全域性...