aligin-items與aligin-content的區別

align-items 屬性使用於所有的flex容器，它是用來設置每個flex元素在側軸上的默認對齊方式

aligin-items 與align-content有相同的功能，不過不同點是它是用來讓每一個單行元素在容器居中而不是讓整個容器居中

demo:align-items:單行元素：

html:

<div class='flexBox'>
        <div class='box1'></div>
        <div class='box2'></div>
    </div>

css:

.flexBox {
            width: 300px;
            height: 500px;
            display: flex;
            border: 1px solid red;
            align-content: center;
        }
        
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .box2 {
            background-color: yellow;
        }

 

 修改flexBox的樣式，使元素多行：

flex-wrap：wrap;

 

 刪除align-items:center; 添加align-content:center;