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

刚开始以为是  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;
}

转载于:https://www.cnblogs.com/whm-blog/p/8999045.html