Question

请查看以下JSFiddle并拖动以调整＆＃34;结果＆＃34;窗口正是我想要在（至少）Firefox，Chrome和Internet Explorer 11上实现的目标：

请注意，在查看JSFiddle时必须使用Firefox，否则您将看不到我想要的行为。相反，您会看到我想要避免的行为。

基本上我想在页面上放一些盒子。当有足够的空间时，我希望页面并排显示所有框，当没有足够的空间时，我希望这些框开始像在Firefox中那样重新定位完全。大约一年前，我一直试图在这个问题上重新发明轮子，这是一种痛苦，并不会一直有效。现在我已经找到了CSS3 Flexible Box模型，看来这已经为我做了，但它只适用于我。

如果可能的话，我不想要使用ul / li来实现此效果。

HTML：

<div class="box">
    <div class="number">1</div>
</div>
<div class="box">
    <div class="number">2</div>
</div>
<div class="box">
    <div class="number">3</div>
</div>
<div class="box">
    <div class="number">4</div>
</div>
<div class="box">
    <div class="number">5</div>
</div>

CSS：

.box
{
width: 40px;
height: 40px;
background-color: black;
margin: 40px;
color: #555;
font-family: arial;
padding: 0px;

display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
}

.number
{
padding: 0px;
margin: 0px;
text-align: center;
width: 20px;
height: 20px;
}

我尝试添加以下内容，但它似乎根本不会影响Internet Explorer 11或Chrome：

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

感谢您的帮助！：）

Answer 1

您使用的是旧版本的flexbox。使用更新的规范：http://jsfiddle.net/D398s/。应该适用于Chrome和Firefox。

HTML：

<div class = "container">
    <div class="box">
        <div class="number">1</div>
    </div>
    <div class="box">
        <div class="number">2</div>
    </div>
    <div class="box">
        <div class="number">3</div>
    </div>
    <div class="box">
        <div class="number">4</div>
    </div>
    <div class="box">
        <div class="number">5</div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.container > div {
    margin: 40px;
    height: 40px;
    -webkit-flex: 0 0 40px;
    flex: 0 0 40px;
    background-color: #aaa;
    text-align: center;
}

.container > div > div {
    line-height: 40px;
}

Answer 2

您需要设置display: flex的容器，并且您需要样式属性的-webkit-版本。

That works in Chrome for me.

CSS3 Flexible Box Model - Boxes应根据可用空间更改位置

2 个答案: