align-content
作用:
會設定自由盒內部各個項目在垂直方向相片順序。
條件:
必須對父元素設定自由盒屬性display:flex;,並且設定相片順序為橫向排列flex-direction:row;並且設定換行,flex-wrap:wrap;這樣這個屬性的設定才會起作用。
設定對象:
這個屬性是對她容器內部的項目起作用,對父元素進行設定。
取值:
stretch:預設設定,會展開容器內每個項目佔用的空間,填充方式為給每個項目下方增加空白。第一個項目預設從容器頂端開始排列。
<!DOCTYPE=html><html lang="zh-cn"><head><meta charset="UTF-8"><title>Align-content</title><style>#father{ width:200px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:strech; height:200px; background-color:grey;}.son1{ height:30px; width:100px; background-color:orange;}.son2{ height:30px; width:100px; background-color:red;}.son3{ height:30px; width:100px; background-color:#08a9b5;}</style></head><body><p id="father"><p class="son1">q</p><p class="son2">w</p><p class="son3">e</p><p class="son3">e</p><p class="son3">e</p></p></body></html>
Center:這個會取消項目之間的空白並把所有項目垂直置中。
<!DOCTYPE=html><html lang="zh-cn"><head><meta charset="UTF-8"><title>關於文件項目測試</title><style>#father{ width:200px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:center; height:200px; background-color:grey;}.son1{ height:30px; width:100px; background-color:orange;}.son2{ height:30px; width:100px; background-color:red;}.son3{ height:30px; width:100px; background-color:#08a9b5;}.son4{ height:30px; width:100px; background-color:#9ad1c3;}.son5{ height:30px; width:100px; background-color:rgb(21,123,126);}</style></head><body><p id="father"><p class="son1">q</p><p class="son2">w</p><p class="son3">e</p><p class="son4">e</p><p class="son5">e</p></p></body></html>
Flex-start:這個會取消項目之間的空白,並把項目放在容器頂部。
<!DOCTYPE=html><html lang="zh-cn"><head><meta charset="UTF-8"><title>關於文件項目測試</title><style>#father{ width:200px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:flex-start; height:200px; background-color:grey;}.son1{ height:30px; width:100px; background-color:orange;}.son2{ height:30px; width:100px; background-color:red;}.son3{ height:30px; width:100px; background-color:#08a9b5;}.son4{ height:30px; width:100px; background-color:#9ad1c3;}.son5{ height:30px; width:100px; background-color:rgb(21,123,126);}</style></head><body><p id="father"><p class="son1">q</p><p class="son2">w</p><p class="son3">e</p><p class="son4">e</p><p class="son5">e</p></p></body></html>
flex-end:這個會取消項目之間的空白並把項目放在容器底部。
align-content:flex-end;
space-between這個會使項目在垂直方向左右對齊。即上面的項目對齊容器頂部,最下面一個項目對齊容器底部。留相同間隔在每個項目之間。
align-content:space-between;
Space-around:這個會使每個項目上下位置保留相同長度空白,使得項目之間的空白為兩倍的單個項目空白。
align-content:space-around;
Inherit:使得元素的這個屬性繼承自它的父元素。
innitial:使元素這個屬性為預設初始值。