3
私はフレックスで作業しているので、何か問題があると謝罪します。フレックスの自動塗りつぶしスペース、伸縮しない
@media all and (min-width: 672px) {
main {
width: 672px;
margin: 0 auto;
overflow: auto;
border: 7px solid transparent;
border-image: url(../images/border.png) 40% stretch;
}
}
@media all and (max-width: 671px) {
main {
width:340px;
margin: 0 auto;
overflow: auto;
border: 7px solid transparent;
border-image: url(../images/border.png) 40% stretch;
}
}
main {
display: flex; flex-flow: row wrap;
justify-content: space-between;
}
main > div {
width: 320px; height: 250px; margin: 4px;
border: 1px solid gray;
background-color: lightgray;
}
#facebook { height: 508px; }<main>
<div id="one">
<img src="images/avatar.jpg" alt="Profile image">
</div>
<div id="two">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
</div>
<div id="facebook">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
</div>
<div id="four">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
</div>
<div id="five">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
</div>
<div id="six">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente at, omnis quibusdam, quam eveniet laudantium commodi. Delectus veniam molestias consequatur eum, libero nostrum quas. Rem fugit amet nisi possimus eligendi eius, quaerat quam nihil, nesciunt recusandae nobis! Ea quod, alias quisquam laborum enim atque. Porro, laudantium? Et, explicabo, praesentium?</h2>
</div>
</main>が、私は以下の画面のように結果を得る： ここで問題です
しかし、私はそれがために必要などとの：
main {
min-height: 600px;
background-color: black;
}
main > div {
width: 320px; height: 250px; margin: 4px;
border: 1px solid gray;
background-color: lightgray;
float: left;
}
多分尋ねる：
それは私が必要とするこのような結果を与えていますか？私はフレックスのものを使用しているので、私のコンテナの順序を調整するために "順序"。スペースを埋めるためにフレックスを作る方法は誰も知っていますが、伸ばすことはできません。
を見てしたい場合がありますが、グリッドレイアウトをしたいように思えます。しかし、フレックスボックスはグリッドシステムではありません。あなたは、Masonry JSを試すことができます。ここに詳細があります：http://stackoverflow.com/a/34481128/3597276 –
ああ私が探していたものを見つけました。ここに石積みをリンクしてくれてありがとう、私はもっと深く掘り下げて見つけました：http://packery.metafizzy.co/私が必要としていたもの。しかしもう一つの質問があります。スクリプトなしでそれを行うもう一つの簡単な方法がありますか？ – Eugene
JSは現在、最も簡単な方法です。最終的に、ブラウザがサポートを提供すると、CSSグリッドがあります：https://www.w3.org/TR/css-grid-1/ –