用户投稿在还没认识Flex前我的水平垂直置中招式，永远都只有这几招，line-height+margin auto或用postion来设定，但每次遇到的状况还不一定能用以上的方式解决！ (ఠ్ఠ ˓̭ ఠ్ఠ)，直到我认识到了Flex，才了解什么叫做相见恨晚！
今天就让我们浅谈Flexbox
容我用w3cschool的图，以我的了解直白的做解释
display:flexjustify-content//根据Mainalign-items//根据Crossflex-direction//根据Start、End其中每一个Item的摆放位置，透过 Main、Cross这两条线来去划分。将我们的区块放入我们想要的位置。
flex-direction
row：预设值，由左到右，从上到下row-reverse：与 row 相反column：从上到下，再由左到右column-reverse：与 column 相反可点击标题了解
justify-content
flex-start：预设值，对齐最左边的 main startflex-end：对齐最左边的 main endcenter：水平置中space-between：平均分配内容元素，左右元素将会与 main start 和 main end 贴齐space-around：平均分配内容元素，间距也是平均分配可点击标题了解
align-items
flex-start：对齐最上面的 cross startflex-end：对齐最下面的 cross endcenter：垂直置中stretch：预设值，将内容元素全部撑开至 Flexbox 的高度baseline：以所有内容元素的基线作为对齐标準可点击标题了解
所以我们就能利用justify-content、align-items使图片置中了。
<body> <div class="container"> <h1>妈！我置中了</h1> </div> <style> .container{ width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; border: 2px solid #000000; } h1{ color: navy; } </style></body>
以上皆参考自w3cschool文章
微信扫一扫打赏
支付宝扫一扫打赏
