柔性包装的替代品

Question

还有其他方法可以包装这些具有display: flex; 属性的图片项吗？现在我正在使用flex-wrap 属性包装它们，但是还有更多吗？

body {
  margin: 0px;
}

img {}

h1 {}

p {}

a {
  background-color: #ddd;
  border: 1px solid #000;
  padding: 10px 20px;
  margin: 10px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: #eee;
  padding: 10px;
  margin: 10px;
}

<div class="container">

  <div class="item">
    <img src="http://lorempixel.com/1024/512/" alt="">
    <h1>Title 1</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/512/" alt="">
    <h1>Title 2</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/1024/512/" alt="">
    <h1>Title 3</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/256/" alt="">
    <h1>Title 4</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/512/" alt="">
    <h1>Title 5</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/1024/512/" alt="">
    <h1>Title 6</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/512/" alt="">
    <h1>Title 7</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

</div>

Answer 1

有一天，替代方案将是display: grid：

.container {
  display: grid;
  grid-auto-flow: column;
}

Pen demo

Answer 2

使用flex-wrap: wrap 的替代方法是使用媒体查询从flex-direction: row 切换到column。

jsFiddle demo

body {
  margin: 0px;
}

img {}

h1 {}

p {}

a {
  background-color: #ddd;
  border: 1px solid #000;
  padding: 10px 20px;
  margin: 10px;
}

.container {
  display: flex;
  /* flex-wrap: wrap; */
}

.item {
  background-color: #eee;
  padding: 10px;
  margin: 10px;
}

@media ( max-width: 500px ) {
.container {
  flex-direction: column;
}

<div class="container">

  <div class="item">
    <img src="http://lorempixel.com/1024/512/" alt="">
    <h1>Title 1</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/512/" alt="">
    <h1>Title 2</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/1024/512/" alt="">
    <h1>Title 3</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/256/" alt="">
    <h1>Title 4</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/512/" alt="">
    <h1>Title 5</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/1024/512/" alt="">
    <h1>Title 6</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/512/" alt="">
    <h1>Title 7</h1>
    <a href="#">Link</a>
    <p>Lorizzle ipsizzle dolor shizzle my nizzle crocodizzle amizzle, yo mamma fo shizzle mah nizzle fo rizzle, mah home g-dizzle elit. Nullizzle mofo velizzle, dizzle volutpizzle, suscipizzle fo shizzle, phat vizzle, fizzle. Pellentesque eget rizzle. Sizzle
      erizzle. Shizzle my nizzle crocodizzle izzle bling bling dapibus turpis tempizzle crunk.</p>
  </div>

</div>

Answer 3

flex 的另一个替代方法是删除容器上的 display: flex 并在所有项目图像上使用 display: inline-block。

.item{
  display: inline-block;
  background-color: #eee;
  padding: 10px;
  margin: 10px;
}