筆記+小案例
<style>
.zi{
height:100px;
width:100px;
background:purple;
margin:2px;
line-height:100px;
text-align: center;
color:#fff;
}
.fu{
height:400px;
width:600px;
margin:50px;
background:pink;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
justify-content:space-around;
}
</style>
<body>
<div >
<div >一</div>
<div >二</div>
<div >三</div>
<div >四</div>
<div >五</div>
</div>
</body>
</html>
<script>
flex:1; //反正就是占滿了,移動端適配的時候合適.
flex-direction row row-reverse column column-reverse
// 主軸方向 左向右 右向左 上向下 下向上
flex-wrap nowrap wrap wrap-reverse
// 換行不 不換 換 規定元素在必要的時候拆行或拆列，但是以相反的順序
align-items center flex-start flex-end baseline
// 縱軸方向 中心 開頭 下頭 基線(沒覺得有啥用)
justify-content flex-start flex-end center space-between space-around
// 主軸方向對齊方式 開頭 結尾 中心 兩邊貼邊兒 兩邊不貼邊兒
align-content //同上
// 縱軸方向對齊方式
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/98407.html
標籤：Html/Css
上一篇：萬能清除法
下一篇：文字溢位省略