【CSS】Flexboxの[flex-wrap: wrap;]が効かない。

現在、Masonryレイアウトの練習で、試しにコーデイングを行っていますが、flex-wrap: wrap;が効かない問題に直面しておりますので、ご相談したい次第です。

いくつか、資料を当たって試してみましたが、解決には至っていません。よろしくお願いいたします。

現在、以下のように、wrapによる折り返しが機能していない状況になっています。

HTML

<body>
  <div class="container">
	<div class="flexbox">
	  <div class="item">
	    <img src="http://placehold.it/240x150" alt="" />
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	  </div>
	  <div class="item">
	    <img src="http://placehold.it/240x150" alt="" />
	    <p>Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.</p>
	  </div>
	  <div class="item">
	    <img src="http://placehold.it/240x150" alt="" />
	    <p>Integer ornare felis eu risus ultrices pharetra eu non velit.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.</p>
	  </div>
	  <div class="item">
	    <img src="http://placehold.it/240x150" alt="" />
	    <p>Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.</p>
	  </div>
	  <div class="item">
	    <img src="http://placehold.it/240x150" alt="" />
	    <p>Integer ornare felis eu risus ultrices pharetra eu non velit.Nulla pharetra porta sagittis. Mauris et suscipit diam.Nulla pharetra porta sagittis. Mauris et suscipit diam.</p>
	  </div>
	</div>
  </div>
</body>

CSS

.flexbox{
  display:flex;
  flex-wrap: wrap;  =>これが効いておらず、折り返しがなされていません。
  flex-direction: column;
  max-height: 800px;
}

.item{
  background: #edf;
  padding: 10px;
  margin: 5px;
  border-radius: 10px;
  width: 25%;
}

行動規範の内容に同意します

回答3件

きいているようですが。
flex-direction: column; を勘違いしているでしょうか？
columnなので、縦に並んでいます。

https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

投稿2018/10/10 07:12

x_x

総合スコア13749

x_x

2018/10/10 07:19

なお、フレックスボックスはMasonryに向かないと思うので、グリッドレイアウトか段組みレイアウトをお勧めします。 https://sitest.jp/blog/?p=11921

YousukeTanaka

2018/10/10 07:28

「フレックスボックスはMasonryに向かない」。そうだったのですね。これは知りませんでした。チュートリアルをやっていたのですが、無理してやる必要はないですね。ありがとうございます。

x_x

2018/10/10 07:48

チュートリアルとは？それを知らないので必要かどうかは知りません

行動規範の内容に同意します

勘違いされているようですがwrapは効いてます。
flex-direction: column;があるので縦に並べて、親の縦の長さを超えたので横にwrapしています。

行を下に落としたいんでしょうか？
もし、そうなのであればflex-direction: column;を削除すればいいと思います。

投稿2018/10/10 06:30

root_jp

総合スコア4666

YousukeTanaka

2018/10/10 06:34

ご返信ありがとうございます。flex-direction: column;は削除してみたのですが、そうすると、確かに下に落ちるのですが、均等な高さをもった要素が並びます。実現したいことは、Masonryレイアウトで、異なる高さをもった要素を配置したいということでしたので、どうしたものかと頭を悩ませています。

root_jp

2018/10/10 06:39

.flexbox に align-items: flex-start; を追記しましょう。

root_jp

2018/10/10 06:40

あーでも、それだと空白の部分ができるので、ちょっと違うかもしれませんね。高さの違うコンテンツを隙間なくしきつめたいですもんね。

YousukeTanaka

2018/10/10 07:29

そうなんです。いろいろと試してみます。ありがとうございました。

行動規範の内容に同意します

子要素である.itemの幅が％指定だからです。

投稿2018/10/10 05:52