彈性盒子常用屬性

2021-07-23 19:13:42 字數 911 閱讀 1994

display設定為flex屬性
flex-direction屬性:設定子元素的排列方式,同時設定主軸,預設的情況下x軸為主軸
flex-direction: row | column | row-reverse | column-reverse

justify-content屬性:設定主軸的排列方式,此屬性作用于父元素上
justify-content: center | flex-start | flex-end | space-around | between-around

align-items屬性:設定側軸的排列方式,此屬性作用于父元素上
align-items: center | flex-start | flex-end | space-around | between-around

align-self屬性:彈性子元素的屬性,用於設定彈性元素自身在側軸(縱軸)方向上的對齊方式。
align-content: center | flex-start | flex-end | space-around | between-around

align-self屬性:彈性子元素的屬性,用於設定彈性元素自身在側軸(縱軸)方向上的對齊方式。
align-content: center | flex-start | flex-end | space-around | between-around

flex-wrap屬性:當多個子元素的寬超過父元素時,設定是否換行
flex-wrap: wrap | no-wrap | wrap-reverse(反轉)

可參考**:

彈性盒子常用屬性

新增瀏覽器字首 webkit 也可用postcss自動新增 display webkit flex 如果用了彈性布局,子元素不需要浮動,webkit justify content 子元素水平排列方式方式。center 水平居中 space between 兩端對齊 space around 手拉手...

flex彈性盒子常用屬性

屬性值描述 display flex 定義乙個盒子為彈性盒子 flex direction row子盒子水平排列,從左到右 row reserve 子盒子水平反向排列 column 子盒子垂直排列,從上到下 column reserve 子盒子垂直反向排列 flex wrap no wrap 子盒子...

彈性盒子內容體居右對其 彈性盒子常用屬性

新增瀏覽器字首 webkit 也可用postcss自動新增 display webkit flex 如果用了彈性布局,子元素不需要浮動,webkit justify content 子元素水平排列方式方式。center 水平居中 space between 兩端對齊 space around 手拉手...