Question

这是the demo（调整大小以查看效果）。

（注意：此刻此演示不适用于Firefox 27及以下版本以及Safari 7及以下版本 - 使用Firefox 28 +，Chrome 31 +，Opera 19或IE11）

问题是，当包裹div增长并且我们进入多行模式时，我的各个文章条目之间会产生额外的空间。有没有办法强制文章全部包装到给定“列”的顶部？

这是我的问题的例证：

http://sirmium.org/bmp/fleksboks.png http://sirmium.org/bmp/fleksboks.png

这可以用flexbox完成吗？

来自JSFiddle的现有代码：

HTML

<div class="section">
    <div class="article">Someething A</div>
    <div class="article">Something B</div>
    <div class="article">Some content C</div>
    <div class="article">Some content D</div>
    <div class="article">Something E</div>
    <div class="article">Some content</div>
    <div class="article">Something F</div>
    <div class="article">Some content G</div>
</div>

CSS

.section {
    border :3px solid red;
    width:100%;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.article {
    width:300px;
    border:2px solid green;
    margin: 5px 5px 5px 5px;

    flex-grow: 1;
}

Answer 1

谢谢Mathias，cimmanon和Lokesh Suthar，你给了我很好的指导。非常感谢。我认为我完成了（在你的帮助下）我想要做的事情......

这是DEMO（调整大小以查看效果）

HTML

    <!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>TEST</title>
    <link href="00_layout.css" rel="stylesheet" type="text/css">
</head>

  <body>
    <div class="header"> header HEADER </div>
    <div class="nav"> nav TOP MENU </div>
    <div class="konteiner">
    <div class="aside">
    aside <br>
    LEFT MENU LINK 1<br>
    LEFT MENU LINK 2<br>
    LEFT MENU LINK 3<br>
    LEFT MENU LINK 4<br>
    LEFT MENU LINK 5<br>
    </div>
    <div class="main">
    <div class="section">

    <div class="article">
article1 1111 2222 1111 2222 11111  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222 </div>
    <div class="article">
article2&nbsp; 1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  1111111 2222222  1111111 2222222  1111111 2222222  11111111 22222222 11111111 22222222 11111111 22222222</div>
    <div class="article">
article3 1111 2222  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  1111111 2222222  1111111 2222222  1111111 2222222  11111111 22222222 11111111 22222222 11111111 22222222</div>
    <div class="article">
article4 1111 2222 </div>
    <div class="article">
article5 1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  1111111 2222222  1111111 2222222  1111111 2222222  11111111 22222222 11111111 22222222 11111111 22222222 
    </div>
    <div class="article">
article6 1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  1111 2222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  11111 22222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  111111 222222  1111111 2222222  1111111 2222222  1111111 2222222  11111111 22222222 11111111 22222222 11111111 22222222</div>

</div>
</div>
</div>
</body></html>

CSS

    body {
    font-family: sans-serif;
    border: none; 
    margin: 0px; 
    padding: 0;
    background: #3F3F7B; 
}

.header {
    width: 100%; 
    height: 70px;
    min-width: 670px; 
    background-color: #1E1E3D; 
}

.nav {
    width: 100%; 
    height: 30px;
    background-color: #2C2C5C; 
}

.aside {
    float: left;
    width: 220px; 
        background-color: #3A3A71; 
}

.konteiner {
    min-width: 670px;
}

.main {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    overflow: auto;
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 20px 0 0 20px;
        background-color: #B8C68B;

}

.section {
    width: 100%;  
    min-width: 270px; /* column width + column-gap x 2 */
    -ms-columns: auto 250px; 
    -moz-columns: auto 250px; 
    -webkit-columns: auto 250px; 
    columns: auto 250px; 

    -ms-column-gap: 10px; 
   -moz-column-gap: 10px; 
   -webkit-column-gap: 10px; 
   column-gap: 10px;

        background-color: #CDDAA4; 
}

.article {
    width: auto; 
    overflow: hidden; /* Firefox fix */
    margin: 0px 0px 10px 0px; 
    padding: 10px; 
        background-color: #E3F1B7; 
        border-radius: 8px; 
        word-wrap: break-word; 

    break-inside: avoid-column; 
    -ms-column-break-inside: avoid; 
    page-break-inside: avoid; /* Firefox fix */
    -moz-column-break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid; 
    break-inside: avoid; 
}

        .article:first-child {
    margin-top: 0; 
}

我在桌面浏览器上测试过：Firefox 24 +，Chrome 32 +，Opera 19 +，IE10 +（IE 7,8,9不支持列 - 根本不适用于IE6！）。我需要进行Safari测试......

flexbox - 我想我想要比预期更多的东西

HTML

CSS

1 个答案: