水平居中弹性容器答案

【问题标题】：Horizontally centering a flex container水平居中弹性容器
【发布时间】：2016-02-12 22:07:08
【问题描述】：

当使用 flex 创建图像网格时，如何将网格本身水平居中在页面上？我仍然希望图像在每一行上左对齐。我希望它对每行的元素数量是动态的。

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.gallery-artwork {
  width: 400px;
  display: flex;
  margin: 10px;
}

<div class="gallery">
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
</div>

【问题讨论】：

基本上......很难......通常需要JS或隐藏的虚拟元素。
stackoverflow.com/questions/32802202/…
我不确定这里是否真的需要详细的规范答案。 Flexbox 不是为网格设计的。它旨在通过分配空白空间来实现更灵活的布局。对于网格，W3C 正在开发CSS Grid Layout Module。在它获得浏览器支持之前，您可以使用Masonry。

标签： html css flexbox

【解决方案1】：

无论元素数量和宽度如何，此解决方案都可以使用。

https://jsfiddle.net/p01mx39h/14/

function addDummies() {
  imgsPerRow = Math.floor($(".gallery").width() / $(".gallery-artwork").outerWidth(true));
  if (imgsPerRow > 1) {
    missingImages = imgsPerRow - $(".gallery-artwork").length % imgsPerRow;
    while (missingImages > 0) {
      $(".gallery").append("<div class='gallery-artwork-dummy'></div>");
      $(".gallery-artwork-dummy").css('width', $('.gallery-artwork').outerWidth(true));
      missingImages--;
    }
  }
}

$(document).ready(function() {
	addDummies();
});

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: center;
}

.gallery-artwork {
  width: 400px;
  display: flex;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
</div>

【讨论】：

使用宽度使底部元素居中而不是向左移动。

【解决方案2】：

正如此处和网络上的许多答案所述，您将需要（至少目前）虚拟元素。
这是一种无需计算且使用纯 JavaScript 即可轻松完成的方法：

添加与.gallery-artwork 元素数量一样多的虚拟对象
为这些假人提供相同的样式，没有任何高度，也没有垂直边距

这种方法有一个好处：你不需要做任何计算！你肯定总是有足够的假人（无论屏幕宽度、元素数量和每行的数量）来将你的元素推到容器的左侧。

这是代码！

var gallery = document.querySelector('.gallery'),
    artworks = gallery.querySelectorAll('.gallery-artwork'),
    dummy = document.createElement('div');
dummy.classList.add('gallery-dummy');

// One element = one dummy
[].forEach.call(artworks, function() {
  gallery.appendChild(dummy.cloneNode());
});

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.gallery-artwork {
  width: 400px;
  margin: 10px;
}
.gallery-dummy {
  width: 400px;
  margin: 0 10px;
  height: 0;
}

<div class="gallery">
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
  <div class="gallery-artwork">
    <img src="http://placehold.it/400x225">
  </div>
</div>

【讨论】：

刚刚编辑了我的答案，我错过了使用cloneNode()函数，对不起。

【解决方案3】：

您可以将一个元素包裹在整个事物周围，然后像往常一样居中。
让弹性项目左对齐就像使用默认值justify-content: flex-start 一样简单，但它不居中。因此，为了保持居中对齐的弹性项目，我们使用 justify-content: center。
它完美居中，但如果第二行的弹性项目数量较少，那么它看起来像 this
为了保持所有内容水平居中，和在最后一行有一个很好的左对齐行为，我们可以添加一个额外的 flex-item 并给它：visibility: hidden。如果弹性项目的数量是动态的，我们使用以下选择器：.gallery-artwork:last-of-type { visibility: hidden; }

这是Demo

CSS

/* The wrap element that surrounds and centers everything */
.exhibition {
  padding: 10px;
  margin: 20px auto;
}
/* justify-content: center is needed for centering of the flex-items */   
.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-artwork {
  width: 400px;
  margin: 10px;
}
 /* This is the last of the gallery-artwork (flex-item). 
 Being of the same dimensions as the other flex-items and hidden from site,
fills in the gap of an uneven row of flex-items. */

.gallery-artwork:last-of-type {
  visibility: hidden;
}

HTML

<section class="exhibition">
  <div class="gallery">
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
    <div class="gallery-artwork">
      <img src="http://placehold.it/400x225">
    </div>
  </div>
</section>

【讨论】：

【解决方案4】：

这是您更新后的 CSS：

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content:center;
}

.gallery-artwork {
  width: 400px;
  display: flex;
  flex-flow: column;
  margin: 0.5em;
}

jQuery:

$(document).ready(function(){
var i = $('.gallery-artwork').length;
    if (i % 2 == 0){
    }else{
        $(".gallery").append("<div class='gallery-artwork'></div>");
    }
});

小提琴：https://jsfiddle.net/debraj/p01mx39h/9/

【讨论】：

但是最后一张图片不是左对齐的。
你愿意添加一些 jQuery 吗？
我希望它对每行的元素数量是动态的。
您可以动态添加元素。它将计算gallery 下的所有 div，如果总数为奇数，则仅附加间隔 div。
这不是动态的元素数量。试试这个：jsfiddle.net/ceab4gts/13/show

【解决方案5】：

稍微改变你的画廊 css：

justify-content: center;

我今天使用了这个，所以这就是我立即弹出它的原因。但是这个CSS-tricks 页面确实有助于解决弹性问题。

【讨论】：

但是最后一行不是左对齐