相关疑难解决方法(0)

我希望flex项目居中,但是当我们有第二行时,将5(从下面的图像)下调到1并且不在父项中居中.

这是我的一个例子:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

http://jsfiddle.net/8jqbjese/2/

我有X个图像(所有相同的高度和宽度),我想在网页上显示它们.但我想让页面在调整浏览器大小时自动显示一行中的最大图像数量(不调整图像大小),并将图像显示为固定距离.

此外,图像应在页面中央组合在一起,并一个接一个地显示.

例如,当浏览器窗口宽度足以在一行上显示3个图像时,它们应显示如下.

每行3个图像以固定的距离分组在一起,在页面的中心,一个接一个.

如果浏览器变得更宽,那么可以在一行上显示4个图像,它们应该像这样显示.

每行4个图像(不调整图像大小),在页面中心一个接一个地分开固定距离.

到目前为止,我已经编写了以下代码:

HTML

<div class="outer-div">
    <div class="inner-div">
        <div class="image-div"><img src="images/1.png"></div>
        <div class="image-div"><img src="images/2.png"></div>
        <div class="image-div"><img src="images/3.png"></div>
        <div class="image-div"><img src="images/4.png"></div>
        <div class="image-div"><img src="images/5.png"></div>
    </div>
</div>

CSS

img {
    height: 200px;
    width: 200px;
    padding: 10px;
}

.image-div {
    display: inline;
}

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left;
    display: inline;
}

因此,图像以div(inner-div)内部的10px填充内联显示,然后在outer-div内居中.并且图像在内部div内部与文本对齐.

但问题是它们显示如下:

当浏览器变宽时,如下所示

有人可以告诉我如何显示像第一组图像的图像？

即每行的最大图像数(不调整图像大小),一个接一个地在页面中心组合在一起,固定距离(包裹).

我有一个瓷砖(或div)的容器,我希望容器居中,而瓷砖在容器中左对齐.

所以如果窗口很小:

..[s][s][s]..
..[s][s].....

如果窗口稍微加宽:

...[s][s][s]...
...[s][s]......

进一步:

.[s][s][s][s].
.[s]..........

我试过了:

#container's-parent: { display: block; text-align: center; }
#parent: { display: inline-block; text-align: left; }
.tiles: { display: inline-block }

但这似乎不起作用.

我希望至少在Chrome中使用它,但我还需要最终支持最新的FF,Safari和IE 10+