html - flex布局，如何实现9宫格列表两端对齐

问题描述

如图所以，用flex布局方式，如何让热门应用的的右端与边框对齐，达到两端对齐的效果，因为是循环列表，不是单行，不知道该如何控制，请大神指点一下！

问题解答

授人以鱼不如授人以渔。flex布局

在最外层p设置display:flex;之后在里面分三个p设样式

.row{ display: flex; width: 100%;}.col-33{ flex: 0 0 33.3%; max-width: 33.3%; }.text-center{ text-align:center;}

<p> <p class='col-33 text-left'></p> <p class='col-33 text-center'></p> <p class='col-33 text-right'></p></p>回答3：

对容器使用justify-content: space-between;可以两边对齐

父级容器使用justify-content: space-between;两端对齐，项目之间的间隔都相等！你耶可以参考这个

justify-content : 在主轴上的对齐方式 flex-start 做对齐 flex-end 右对齐 center居中 space-between 两端对齐，项目之间的间隔都相等 space-around 每个项目两侧的间隔相等，所以，项目之间的间隔要大与与边框的距离回答5：

这种场景更适合用百分比宽度来布局，而不是flex。任何布局都有它的局限性，要灵活使用。3个的话就设置width:33.33%

补充一点，如果你要在移动端使用flex.建议只使用flex 属性。可以参考下淘宝的做法，flex 和 box 搭配使用，参考链接：http://h5.m.taobao.com/mlapp/...

其它参考：https://css-tricks.com/old-fl...https://www.html5rocks.com/en...

flex版的: 详解实现网页的各种布局

父元素 设置display:flex;子元素 设置 justify-content: space-between;