Question

是否有其他方法来包装具有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; }属性包装它们，但那里还有它们吗？

＆＃13;

<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>

＆＃13;

os.system(r'PATH_TO_EXE')

＆＃13;

Answer 1

使用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 2

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

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

Answer 3

有一天，另一种选择是display: grid：

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

Pen demo

柔性包装的替代方案

3 个答案: