我在移动端做一个左右排版用了flex,图片就是自适应的,但是出来的效果这样是怎么回事?
<p class="contentlist">
<p class="_left">
<a href="http://m.vmei.com/brand/group/19" target="_blank">
<img src="http://img01.sephome.com/201512/63CED07CABAD4C44B53079C5ABFF8C92.jpg" alt="" width="100%">
</a>
</p>
<p class="_right">
<a href="http://m.vmei.com/product/5355" target="_blank">
<img src="http://img01.sephome.com/201512/D34E8FD9D59B4B28B7A955D7AEAA5D56.jpg" alt="">
</a>
<a href="http://m.vmei.com/product/5761" target="_blank">
<img src="http://img01.sephome.com/201512/A68FCD5B9C5842E38337D29ACAE7C12E.jpg" alt="">
</a>
</p>
</p>
.contentlist{
width: 98%;
margin:0.5rem auto;
display: flex;
display: -webkit-flex;
justify-content:space-between;
-webkit-justify-content:space-between;
}
出来的效果是这样
实际要这样
要怎么破
個人理解雖然 space-between;是兩端對齊但是如果圖片太小撐不起p,是不是就會是上面的那樣。
1、首先你只設定了父級元素display: flex, 卻沒有告訴子集應該如何分配他的空間。
2.根據你的設計圖有三種佈局方案
plan A: 左右兩個子元素平分,flex的值設定的越大,那它就可以獲得越多的空間。
plan B: 固定左邊元素的寬,右邊元素的flex:1, 右邊元素會自動佔滿父元素剩下的空間。
plan C: 固定右邊元素的寬,左元素的flex:1, 左元素會自動佔滿父元素剩下的空間。
建議你到 http://flexboxfroggy.com/ 練習練習 flex佈局,補充基礎知識
加上 align-items: stretch;
雷雷
justify-content:space-between;align-items:center;
display:flex;display:-webkit-flex;flex-wrap:wrap;justify-content:flex-start;
這堆東西確實是好用,然並...不相容