要素が小さい画面に縦に積み重なっていない、幅が狭くなっています

3つの列の高さをコンテンツの最も高い列と一致させるためにflexを使用しました。要素が小さい画面に縦に積み重なっていない、幅が狭くなっています

しかし、ページは現在応答しません。

モバイルデバイスをエミュレートするためにブラウザのサイズを小さくすると、要素は垂直に積み重ねられませんが、幅は縮小されます。

誰でも解決策がありますか？ここで

は例です：

.w3-row { 
 
     display: -webkit-flex; 
 
     display: flex; 
 
     -webkit-align-items: stretch; 
 
     align-items: stretch; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 

 
<body> 
 
    <div class="w3-row"> 
 
    <div class="w3-third w3-indigo w3-card-2 w3-margin w3-padding"> 
 
     <h2>Column 1</h2> 
 
     <p>Text</p> 
 
     <p>More text</p> 
 
    </div> 
 
    <div class="w3-third w3-card-2 w3-margin w3-padding"> 
 
     <h2>Column 2</h2> 
 
     <p>Text</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
    </div> 
 
    <div class="w3-third w3-red w3-card-2 w3-margin w3-padding"> 
 
     <h2>Column 3</h2> 
 
     <p>Text</p> 
 
     <p>More text</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-05-29 Geoff

、 'フレックスラップをしてみてください。wrap' – maioman

あなたが不足しているもの、あなたのコンテナにflex-wrap: wrapです。

デフォルトはflex-wrap: nowrapで、フレックスアイテムは強制的に1行に残ります。あなたの例のように、フレックスアイテムは幅を縮小しますが、折り返すことはできません。

これを試してみてください：

.w3-row { 
    display: flex; 
    align-items: stretch; /* initial setting; can be omitted */ 
    flex-wrap: wrap;  /* allow container to have multiple lines */ 
}

DEMO

参考：包装用のオプションがあります

5.2. Flex Line Wrapping: the flex-wrap property

出典

2016-06-11 04:03:22

要素が小さい画面に縦に積み重なっていない、幅が狭くなっています

答えて

関連する問題