css3:flex排版問題

問題描述

我在移動端做一個左右排版用了flex，圖片就是自適應的，但是出來的效果這樣是怎么回事？ <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; }

出來的效果是這樣

實際要這樣

要怎么破

問題解答

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

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

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布局，補充基礎知識

加上 align-items: stretch;

._left{width: 50%;height: 100%; } ._right{width: 50%;height: 100%; } img{width: 100%; } 試試。。?；卮?：

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

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

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