資訊專欄INFORMATION COLUMN
摘要：這是一個很常用的布局，這里給出一種實現(xiàn)方案代碼實現(xiàn)效果解析子元素等分排滿屏幕寬度，父元素設(shè)置子元素設(shè)置，意思是寬度自動填滿剩余空間，如果有多個并列子元素，會按照數(shù)值等比分配空間子元素間隔相等，所有子元素設(shè)置，第一個子元素使用偽類設(shè)
這是一個很常用的布局，這里給出一種實現(xiàn)方案
代碼 htmlcssHello
W3School
W3School
div {
display:flex;
width:100%;
border:1px solid black;
}
p {
flex:1;
margin-right:15px;
border:1px solid red;
}
p:first-child {
margin-left:15px;
}
實現(xiàn)效果
解析
子元素等分排滿屏幕寬度，父元素設(shè)置display:flex;
子元素設(shè)置flex:1，意思是寬度自動填滿剩余空間，如果有多個并列子元素，會按照數(shù)值等比分配空間；
子元素間隔相等，所有子元素設(shè)置margin-right:15px，第一個子元素使用偽類(first-child)設(shè)置margin-left:15px;
這樣子就可以實現(xiàn)等寬等間距布局，如果不想等寬，可以設(shè)置不同的flex實現(xiàn)按比例分配；
兼容問題flex存在很多兼容性問題，還需要設(shè)置以下屬性，可以兼容Android4.0+、iOS7.0+
div {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
p {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
更多flex兼容性問題，參考騰訊ISUX文章《移動端全兼容的flexbox速成班》
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111903.html
摘要：支持多張圖片拖動排序。解決方法是設(shè)置變量表示單元格在方向的在添加偏移的時候，增加判定條件。根源出現(xiàn)這個問題的原因在于依次移動目標(biāo)圖片到目標(biāo)位置，對多張目標(biāo)圖片，會有一個移動先后的考量。 效果 showImg(https://segmentfault.com/img/bVp0ye);showImg(https://segmentfault.com/img/bVp0GA);拖動+響應(yīng)式效果...
摘要：支持多張圖片拖動排序。解決方法是設(shè)置變量表示單元格在方向的在添加偏移的時候，增加判定條件。根源出現(xiàn)這個問題的原因在于依次移動目標(biāo)圖片到目標(biāo)位置，對多張目標(biāo)圖片，會有一個移動先后的考量。 效果 showImg(https://segmentfault.com/img/bVp0ye);showImg(https://segmentfault.com/img/bVp0GA);拖動+響應(yīng)式效果...
閱讀 2595·2023-04-25 15:07
閱讀 705·2021-11-24 10:21
閱讀 2298·2021-09-22 10:02
閱讀 3517·2019-08-30 15:43
閱讀 3222·2019-08-30 13:03
閱讀 2287·2019-08-29 17:18
閱讀 3586·2019-08-29 17:07
閱讀 1873·2019-08-29 12:27
