如何alignment多行柔性盒中最后一行/最后一行
我有一个flexbox布局的主要问题。 我用一个装满图像的盒子构build一个容器，我决定使用flexbox布局来certificate内容的正确性，使它看起来像一个网格
她的代码是：
<div class="container"> <div class="item"></div> <div class="item"></div> ... <div class="item"></div> </div> 和CSS：
.container { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-around; -webkit-justify-content: space-around; -moz-justify-content: space-around; flex-flow: row wrap; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; } .container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }
除了最后一行/行，一切看起来都不错 – 当它不包含与其他行相同数量的元素时，居中元素会打破我的网格效果。
http://jsfiddle.net/puz219/7Hq2E/
如何alignment最后一行/行到左侧？
得到它了。 （我想）（这是我的第一个贡献！）
想象一下，每行需要有4个图像的布局。 w：205 h：174问题：使用justify-content：space-around，如果最后一行没有4个图像（有3个，2个或1个），他们不会尊重网格，它们会传播。 所以。
在html 3 div中创build这样的类“填空小孩”。
.filling-empty-space-childs { width:205px; /*the width of the images in this example*/ height:0; /*Important! for the divs to collapse should they fall in a new row*/ }
flexbox容器有显示：flex / flex-wrap：wrap; / justify-content：space-around
最后一行可以有4,3,2,1个图像。 4张图片：没问题，这三个divs会因为没有高度而在新的一排中崩溃。 3张图片：没问题，一个div会在同一行，不可见，另外两个会换行，但是会因为没有高度而崩溃。 2图像：没问题，两个div将在同一行，隐形，其余…倒塌1图像：没问题，三个div将填补空间。
不幸的是，这是不可能的与flexbox。
最好的解决办法是在最后一行添加无形的儿童“填满”空的“块”。 这样，实际的，可见的元素左alignment。
类似的问题： Flex-box：将最后一行alignment到网格
您可以在最后一个子项目上使用margin-right:auto 。
这里的问题是，你将失去这个弹性项目的左侧属性之间的空间。
希望能帮助到你！
我认为这个例子可能对需要多个项目并允许响应的人有用，网格项目根据视口大小而改变。 它不使用任何看不见的孩子，这一切都通过CSS来完成。
当最后一行有较less的项目，并且需要页面响应时，可以帮助某人尝试将项目alignment到左侧。
http://codepen.io/kunji/pen/yNPVVb
示例HTML
<div class="main-container"> <div class="main-items-container"> <div class="item-container"> <h2>Item Name</h2> </div> <div class="item-container"> <h2>Item Name</h2> </div> <div class="item-container"> <h2>Item Name</h2> </div> <div class="item-container"> <h2>Item Name</h2> </div> <div class="item-container"> <h2>Item Name</h2> </div> <div class="item-container"> <h2>Item Name</h2> </div> </div> </div>
示例CSS
.main-container { max-width: 1000px; min-width: 300px; margin: 0 auto; padding: 40px; box-sizing: border-box; border: 1px solid #000; } .main-items-container { display: -ms-flexbox; display: flexbox; display: -webkit-flex; display: -ms-flex; display: flex; padding: 0; margin: 10px 0; list-style: none; width: auto; -webkit-flex-flow: row wrap; justify-content: flex-start; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; box-sizing: border-box; } @media (min-width: 971px) { .item-container { margin: 10px 2%; width: 22%; padding: 10px; border: 1px solid #000; box-sizing: border-box; } .item-container:nth-child(4n+1) { margin-left: 0; } .item-container:nth-child(4n) { margin-right: 0; } } @media (min-width: 550px) and (max-width: 970px) { .item-container { margin: 10px 2.50%; width: 30%; padding: 10px; border: 1px solid #000; box-sizing: border-box; } .item-container:nth-child(3n+1) { margin-left: 0; } .item-container:nth-child(3n) { margin-right: 0; } } @media (max-width: 549px) { .item-container { margin: 10px 0; width: initial; padding: 10px; border: 1px solid #000; box-sizing: border-box; } }
您没有指定是否需要100％响应，但类似这种技术的作品。
每行使用一个容器，并用最小宽度限制它，还添加隐藏的元素，使计算工作：
HTML
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item empty"></div> <div class="item empty"></div> </div>
CSS
.container { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-around; -webkit-justify-content: space-around; -moz-justify-content: space-around; flex-flow: row wrap; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; min-width:580px; background:rgba(00,00,00,0.5); } .container .item { width: 130px; height: 180px; background: #000; margin: 0 1% 24px; } .container .item.empty{opacity:0;}
这里是例子 。
这不是你想达到的效果？
CSS：
.container { display: flex; display: -webkit-flex; display: -moz-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; } .container .item { width: 23%; height: 180px; background: red; margin: 0 1% 20px; }
HTML：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
我已经检查过它，它在我的HTML编辑器工具中效果更好
脚本应该是这样的
CSS部分
。容器 {
显示：flex;
显示：-webkit-flex;
显示：-moz-flex;
justify-content：space-around;
-webkit-justify-content：space-around;
-moz-justify-content：space-around;
flex-flow：排行;
-webkit-flex-flow：换行;
-moz-flex-flow：换行;
}.container .item {width：130px; height：180px; 背景：绿色; 保证金：0 1％24px; }
HTML部分
<div class="container"> <div class="item"><a href='google.com'>Google</a></div> <div class="item"><a href='google.com'>Yahoo</a></div> <div class="item"><a href='google.com'>Bing</a></div> </div> <div class="container"> <div class="item"><a href='google.com'>Google</a></div> <div class="item"><a href='google.com'>Yahoo</a></div> <div class="item"><a href='google.com'>Bing</a></div> </div>
您可以使用flexbox with max-width （已删除供应商前缀）：
.container { display: flex; width: 100%; justify-content: space-around; flex-direction: row; flex-wrap: wrap; } .column { flex: 1 0 33.333%; max-width: 33.333%; }
和HTML
<div class="container"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> </div>
在CodePen上查看： http ://codepen.io/anon/pen/gpwEJW
