css flex容器屬性總結

2022-08-18 05:33:10 字數 835 閱讀 5603

display:flex;
flex-disrection屬性:

justify-content屬性:

*center 水平居中對齊

align-items屬性:

flex-wrap屬性:

flex-shrink屬性:flex-shrink值為1,而另乙個專案的flex-shrink值為3,則值為的專案3將縮小為另乙個專案的3倍

flex-grow屬性:flex-grow值為1,而另乙個專案的flex-grow值為3,則值為的專案3將放大為另乙個專案的3倍

flex-basis屬性:指定flex-shrinkflex-grow的初始大小。

flex-basis:20em;
flex屬性:

flex:1 1 150px;

引數位置關係

flex:flex-grow flew-shrink flex-basis;

order屬性:order小的值會排在order值大的前面,可以使用負數

align-self屬性:align-self接受與align-items該align-items屬性相同的值,並將覆蓋該屬性設定的任何值

Flex布局 容器屬性(總結)

y豎向x橫向 元素的排列方向 flex direction row 預設樣式,從左到右排列 flex direction row reverse 從右到左排列 flex direction column 從下到上排列 flex direction column reverse 從下到上排列 設定是否...

flex布局基礎入門總結 容器屬性)

div flex 將物件作為彈性伸縮盒顯示,inline flex 將物件作為內聯塊級彈性伸縮盒顯示 寬度撐開 div row 預設值 主軸為水平方向,起點在左端 row reverse 主軸為水平方向,起點在右端 column 主軸為垂直方向,起點在上沿 column reverse 主軸為垂直方...

CSS flex 布局 一些基本屬性應用

box orient box pack box align box direction box lines box orient horizontal vertical inline axis block axis 預設值 horizontal 適用於 伸縮盒容器 繼承性 無 動畫性 否 計算值 指...