display:flex布局,均匀分布怎么做?

昨天接了客户的一个网站,他让我给底部上面加一个推荐的框,布局是这样的:

image


红框选中部分是做好的,其实刚做的时候我是想用浮动的,但是觉得可以用弹性布局会快点,所以就用来弹性布局,给大家看一下没有用弹性布局的样子


image


是直接一排就过来了对吧,我在写html的时候,就直接给了行内元素<p><sapan></span></p>,所以写好以后我就可以直接选择弹性布局给他均匀分布就可以了。


首先在祖父级给他撑起来内边距,边框,外边距给到:


image


接着在父级给他写弹性布局:


image


.Product_Center p {

    color: #fff;

    font-weight: bold;

    display: flex;

    justify-content: space-between;

}

接着给个元素,让产品对齐:

image


span.field {

   flex: 1;

}


display:flex布局,做到均匀分布还是很简单的,而且也很方便。


微信扫码咨询
建站咨询
cache
Processed in 0.006925 Second.