css3:flex排版问题
巴扎黑
巴扎黑 2017-04-17 11:30:22
0
5
479
我在移动端做一个左右排版用了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;
  }

出来的效果是这样

实际要这样

要怎么破

巴扎黑
巴扎黑

全部回覆(5)
小葫芦

個人理解雖然 space-between;是兩端對齊但是如果圖片太小撐不起p,是不是就會是上面的那樣。

._left{
    width: 100%;
}
 ._right{
    width: 100%;
}
img{
    width: 100%;
}
试一下。
迷茫

1、首先你只設定了父級元素display: flex, 卻沒有告訴子集應該如何分配他的空間。

2.根據你的設計圖有三種佈局方案
plan A: 左右兩個子元素平分,flex的值設定的越大,那它就可以獲得越多的空間。

._left{
        flex:1;
    }
 ._right{
       flex:1;
  }

plan B: 固定左邊元素的寬,右邊元素的flex:1, 右邊元素會自動佔滿父元素剩下的空間。

._left{
        width:10rem;
    }
 ._right{
       flex:1;
  }

plan C: 固定右邊元素的寬,左元素的flex:1, 左元素會自動佔滿父元素剩下的空間。

._left{
        flex:1;
    }
 ._right{
       flex:1;
       width:10rem;
  }

建議你到 http://flexboxfroggy.com/ 練習練習 flex佈局,補充基礎知識

Peter_Zhu

加上 align-items: stretch;

PHPzhong

雷雷

洪涛

justify-content:space-between;align-items:center;

display:flex;display:-webkit-flex;flex-wrap:wrap;justify-content:flex-start;

這堆東西確實是好用,然並...不相容

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板