問(wèn)題描述

我在移動(dòng)端做一個(gè)左右排版用了flex，圖片就是自適應(yīng)的，但是出來(lái)的效果這樣是怎么回事？ <p class='contentlist'><p class='_left'> <a target='_blank'> <img src='http://img01.sephome.com/201512/63CED07CABAD4C44B53079C5ABFF8C92.jpg' alt='' width='100%'> </a> </p> <p class='_right'> <a target='_blank'> <img src='http://img01.sephome.com/201512/D34E8FD9D59B4B28B7A955D7AEAA5D56.jpg' alt=''> </a> <a 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; }

出來(lái)的效果是這樣

實(shí)際要這樣

要怎么破

問(wèn)題解答

個(gè)人理解雖然 space-between;是兩端對(duì)齊但是如果圖片太小撐不起p，是不是就會(huì)是上面的那樣。

._left{ width: 100%;} ._right{ width: 100%;}img{ width: 100%;}試一下。回答2：

1、首先你只設(shè)置了父級(jí)元素display: flex， 卻沒(méi)有告訴子集應(yīng)該如何分配他的空間。

2、根據(jù)你的設(shè)計(jì)圖有三種布局方案plan A： 左右兩個(gè)子元素平分，flex的值設(shè)置的越大，那它就可以獲得越多的空間。

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

plan B： 固定左元素的寬，右元素的flex：1， 右元素將會(huì)自動(dòng)占滿父元素剩下的空間。

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

plan C： 固定右元素的寬，左元素的flex：1， 左元素將會(huì)自動(dòng)占滿父元素剩下的空間。

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

建議你到 http://flexboxfroggy.com/ 練習(xí)練習(xí) flex布局，補(bǔ)充基礎(chǔ)知識(shí)

加上 align-items: stretch;

._left{width: 50%;height: 100%; } ._right{width: 50%;height: 100%; } img{width: 100%; } 試試。。。回答5：

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

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

這堆東西確實(shí)是好用，然并...不兼容