css flex 使内容 水平居中 的方法...

2018/05/06 18:12
阅读数 0

刚开始以为是  justify-content : center 设置为 居中... 的确,,当 元素满了时 的确能 居中.但是 当只有一个元素时,这一个元素也会居中...

想了半天没找到方法..突然发现 

  • justify-content:  space-between

当设置成 两端对齐时, 然后 给 父容器一个 margin 不就好了吗..唉,没动脑子------

 

一个典型的 flex 布局例子.....↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

父容器:

.goods-item-container {
display: flex;
flex-wrap: wrap;
margin: 6px 6px;
justify-content: space-between;
}
子容器:
.goods-item {
width: 30%;
height: 156px;
box-shadow: 1px 2px 3px 1px #888888;
margin: 5px;
overflow: hidden;
border-radius: 3px;
}
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部