1,彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器
常用flex來編寫盒子橫向分布;
flex-direction
屬性指定了彈性子元素在父容器中的位置。
flex內容對齊(justify-content)屬性應用在彈性容器上,把彈性項沿著彈性容器的主軸線(main axis)對齊。-direction
:row
|row
-reverse
|column
|column
-reverse
justify-content:flex-start |flex-end|center |space-between |space-around
效果圖:
align-items
設定或檢索彈性盒子元素在側軸(縱軸)方向上的對齊方式。
align-items:flex-start |flex-end|center |baseline |stretchflex-wrap屬性用於指定彈性盒子的子元素換行方式、
flex-wrap:nowrap|wrap|wrap-reverse|initial|inherit;
align-content
屬性用於修改flex-wrap
屬性的行為。類似於align-items
, 但它不是設定彈性子元素的對齊,而是設定各個行的對齊。
align-content:flex-start |flex-end|center |space-between |space-around |stretch
order:在父級元素定義display: flex;用整數值來定義排列順序,數值小的排在前面。可以為負值。
在子級元素新增
margin:
auto屬性
align-self
屬性用於設定彈性元素自身在側軸(縱軸)方向上的對齊方式。
align-self:auto|flex-start |flex-end|center |baseline |stretch
flex
屬性用於指定彈性子元素如何分配空間。
flex:auto|initial |none |inherit |[flex-grow ]||[flex-shrink ]||[flex-basis ]可以理解為 子元素在父級元素中佔的份數!!!
一些css的屬性
一些css的屬性 使整個頁面的元素都沒有頁邊距 margin 與填充距離 padding body 使整個頁面居中顯示 padding 12px 元件能與邊緣的距離 moz border radius 6px 6px 6px 6px 圓角 float left div同行顯示 margin 30px...
css的一些屬性
1 文字的水平居中 css實現單行文字水平居中 text align center 2 塊元素居中 保證margin left和margin right都為auto,就可以保證塊元素水平居中 如果要是使用margin 0 auto來實現塊元素居中,就要 指定這個元素的寬度 3 行內元素 使用text...
vertical align屬性的一些理解與認識
在工作上遇到這個問題,只知道vertical align屬性設定元素的對齊方式,所以自己有必要深入理解vertical align作用,順便整理出來。先了解一下vertical align一些屬性 值描述 baseline 預設。元素放置在父元素的基線上。sub垂直對齊文字的下標。super 垂直對...