CSS Flex Center 和 Masonry JS 冲突答案

【问题标题】：CSS Flex Center and Masonry JS ConflictCSS Flex Center 和 Masonry JS 冲突
【发布时间】：2017-02-26 04:30:41
【问题描述】：

我正在使用Masonry 制作一个简单的图片库。

https://jsfiddle.net/q6ugvqrg/

砌体示例图像位于具有max-width 和margin auto 中心的div 容器中。

html body 设置为 css flex，用于我页面上的其他元素。

如果我使用flex 和margin auto center，砌体将停止工作。

砌体 CSS 冲突

body {
  display: flex;
  flex-direction: column;
}

.container {
  margin: 0 auto;
}

将该 css 正文代码添加到我的 jsfiddle 示例中以查看。

HTML

 <div class="container">

  <!-- Gallery -->
  <div class="gallery" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 130 }'>

    <div class="grid-item">
      <img src="https://i.imgur.com/Rl9CUbF.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/LwzLtKh.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/V7xsUgj.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/pCfp0Gk.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/LwzLtKh.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/Rl9CUbF.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/pCfp0Gk.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/V7xsUgj.jpg">
    </div>

  </div> <!-- Gallery End -->

</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {

  background: #eadcca;
}
.container {
  margin: 0 auto;
  max-width: 680px;
  padding: 1em;
  background: white;
  border: 1px solid black;
}

.gallery img {
  display: block;
  width: 120px;
  padding: 4px;
}

https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js

$('.gallery').masonry({
  itemSelector: '.grid-item',
  columnWidth: 130,
  isFitWidth: true
});

【问题讨论】：

标签： javascript jquery html css flexbox

【解决方案1】：

.container 需要一个宽度。由于您定义了max-width，因此您可以使用width: 100%;

$('.gallery').masonry({
  itemSelector: '.grid-item',
  columnWidth: 130,
  isFitWidth: true
});

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {

  background: #eadcca;
}
.container {
  margin: 0 auto;
  max-width: 680px;
  padding: 1em;
  background: white;
  border: 1px solid black;
}

.gallery img {
  display: block;
  width: 120px;
  padding: 4px;
}
body {
  display: flex;
  flex-direction: column;
}
.container {
  margin: 0 auto;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js"></script>
 <div class="container">

  <!-- Gallery -->
  <div class="gallery" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 130 }'>
  
    <div class="grid-item">
      <img src="https://i.imgur.com/Rl9CUbF.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/LwzLtKh.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/V7xsUgj.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/pCfp0Gk.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/LwzLtKh.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/Rl9CUbF.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/pCfp0Gk.jpg">
    </div>
    <div class="grid-item">
      <img src="https://i.imgur.com/V7xsUgj.jpg">
    </div>
    
  </div> <!-- Gallery End -->
  
</div>

【讨论】：