資訊專欄INFORMATION COLUMN
摘要：布局兩端對齊當(dāng)最后一排數(shù)量不夠時，會出現(xiàn)以下布局情況這時，我們可以下面?zhèn)晤悾鉀Q最后一排數(shù)量不夠兩端分布的情況加上偽類，解決最后一排數(shù)量不夠兩端分布的情況最終效果，完美解決兩端對齊布局混亂的情況當(dāng)然，如果布局每列有個
flex 布局兩端對齊當(dāng)最后一排數(shù)量不夠時，會出現(xiàn)以下布局情況
這時，我們可以下面after偽類，解決最后一排數(shù)量不夠兩端分布的情況
.tem-flex{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
text-align: justify;
}
.tem-flex:after{
content: "";
width: 30%;
border:1px solid transparent;
}
.tem-list{
width:30%;
border:1px solid #ff6600;
margin-bottom: 10px;
}
最終效果，完美解決兩端對齊布局混亂的情況
當(dāng)然，如果布局每列有4個，5個可以以此類推，舉一反三
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116011.html
摘要：提綱介紹盒子模型什么是基礎(chǔ)項目實戰(zhàn)視頻源碼鏈接介紹參考文檔什么是層疊樣式表是層疊樣式表的縮寫。布局簡稱，布局是中一種新的布局模式，用于改進傳統(tǒng)模式中標(biāo)簽對齊方向以及排序等等缺陷。主要用設(shè)置在容器里面嚴(yán)著主軸的排列方式。 提綱 CSS介紹 盒子模型 什么是flexbox flex-direction flex-wrap flex-flow justify-content align-i...
摘要：屬性定義了多根軸線的對齊方式。負(fù)值對該屬性無效。屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋屬性。默認(rèn)值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。 本文主要記錄一些自己遇見的flex布局案例 簡單回顧一下flex常用屬性 6個常用的容器屬性 flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。 f...
摘要：需要注意的是當(dāng)時設(shè)置布局之后，子元素的的屬性將會失效。各行向彈性盒容器的中間位置堆疊。各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。各行將會伸展以占用剩余的空間。 flex的簡介 在flex的容器中默認(rèn)存在兩條軸，水平主軸main axis和垂直交叉軸cross axis，這是默認(rèn)的設(shè)置，不過我們可以通過設(shè)置將主軸的方向變成垂直方向，交叉軸變成水平方向。 在一...
閱讀 2984·2021-11-16 11:51
閱讀 2616·2021-09-22 15:02
閱讀 3732·2021-08-04 10:21
閱讀 3620·2019-08-30 15:43
閱讀 1955·2019-08-30 11:04
閱讀 3606·2019-08-29 17:14
閱讀 499·2019-08-29 12:16
閱讀 2942·2019-08-28 18:31
