如何完成Google Keep布局之类的工作

Question

在Google Keep中,它们有几列(取决于您的视口宽度)相等宽度的音符,它们会使它们看起来不均匀.

如何才能完成这样的事情？我猜他们在某些宽度上有特定的断点,并且在考虑了填充和边距之后,它们使图像与所需的宽度匹配,并且简单地让图像高度保持相同的宽高比.

这只是我的猜测; 怎么做？

Answer 1

这不是一个很好的例子，但你可以做的一件事是在列中使用弹性框。

.note {
  max-width: 100px;
  margin: 5px 10px;
}
div.container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   background-color: lightgray;
}
div.column {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   background-color: lightgray;
}

<div class="container">
<div class="column">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg">
</div>
<div class="column">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg">
</div>
<div class="column">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg">

</div>
</div>