我有一个简单的flex-box布局的容器,如:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
现在我想让最后一行中的项目与其他项目对齐。justify-content:之间的空间;应使用,因为网格的宽度和高度是可以调节的。
目前看来
在这里,我希望右下角的项目在“中间一列”中。最简单的方法是什么?下面是一个展示这种行为的小jsfiddle。
.exposegrid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
</div>
这个版本是固定宽度的块的最佳方法:
http://codepen.io/7iomka/pen/oxxeNE
在其他情况下-达尔加德版本
http://codepen.io/dalgard/pen/Dbnus
body {
padding: 5%;
}
div {
overflow: hidden;
background-color: yellow;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content:center;
margin: 0 -4px -4px 0;
list-style: none;
padding: 0;
}
li {
flex: 1 0 200px;
height: 200px;
max-width:200px;
min-width:200px;
border-right: 4px solid black;
border-bottom: 4px solid black;
background-color: deeppink;
}
li:empty {
height: 0;
border: none;
}
*,
:before,
:after {
box-sizing: border-box;
}
<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
哦,男孩,我想我找到了一个很好的解决方案与最小的CSS和没有JS。看看吧:
img {width:100%;}
li {
display: inline-block;
width:8em;
list-style:none;
}
ul {text-align: justify;}
<ul>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
这里的关键是要记住,我们试图实现的正是text-align: justify所做的!
HTML中的空元素是为了在不改变外观的情况下完美地显示最后一行,但考虑到您试图实现的目标,可能不需要这些空元素。为了在每种情况下实现完美的平衡,您至少需要x-4个空元素,x是要显示的元素数量,或者n-2, n是要显示的列的数量。