04-align-content 它對於當單行是沒有效果的

時間 2020-06-02

標籤 align content 對於單行沒有效果简体版

原文原文鏈接

/* 運用在父級元素上 align-content: 它通產與子元素的div{margin:10px 一塊兒聯合使用 }*/flex

ps==>用在子項出現換行的狀況下，並是多行的狀況下哦。運用在子項在側軸上的排列方式。spa

align-content: flex-start ; 頂部對齊（默認值）
align-content:center; 垂直方向上居中
align-content: flex-end交叉軸的終點對齊(與底部對齊)。
align-content:space-around
第一個子元素距離頂部的距離==最後一個子元素距離底部的距離
除第一個子元素和最後一個子元素外,第2個,第3個...一直到倒數第二個子元素，這些子元素距離左右兩邊的間距都是相等
巧記：around 是四周，說明四周是有間距的。

justify-content: space-between;
運用在父級元素上
第一個子元素和最後一個子元素分別靠在最頂部和最底部
除第一個子元素和最後一個子元素外,第2個,第3個...一直到倒數第二個子元素，這些子元素距離上下兩邊的間距都是相等3d

justify-content 一般和子元素中的div{margin:10px} 聯合使用的（重點重點） code

經過對比能夠發現align-content:center對單行是沒有效果的,而align-items:center無論是對單行仍是多行都有效果,而在咱們平常開發中用的比較多的就是align-items.

blog

#main { width: 800px; height: 300px; border: 1px solid #c3c3c3; display: flex; flex-wrap: wrap; align-content: center; } #main>div{ width: 150px; height: 100px; background: #0099FF;  margin: 10px; } </style> </head> <body> <div id="main"> <div style="background-color:coral;">11</div> <div style="background-color:lightblue;">22</div> <div style="background-color:pink;">33</div> <div style="background-color:olive;">4</div> <div style="background-color:coral;">55</div> <div style="background-color:lightblue;">66</div> </div>

align-content: flex-start;開發

align-content: flex-end;it

align-content: space-around;class

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。