css align-items的测试
生活随笔
收集整理的這篇文章主要介紹了
css align-items的测试
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
測試源代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jerry 測試</title> <style> #main {width: 220px;height: 300px;border: 1px solid black;display: flex; }#main div {flex: 1; } </style> </head> <body><div id="main"><div style="background-color:coral;">RED</div><div style="background-color:lightblue;">BLUE</div><div style="background-color:lightgreen;">Green div with more content.</div> </div> </body> </html>加一行align-items: center
-
stretch: 默認值。元素被拉伸以適應容器。
如果指定側軸大小的屬性值為’auto’，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照’min/max-width/height’屬性的限制。 -
center: 元素位于容器的中心。
彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
更多Jerry的原創文章，盡在：“汪子熙”:
總結
以上是生活随笔為你收集整理的css align-items的测试的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL 行子查询(转)
- 下一篇： 资本利得是什么意思 什么是资本利得