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;
}