CSS：弹性布局里的align-items和align-self

https://segmentfault.com/a/1190000019837669
https://blog.csdn.net/xqiitan/article/details/88425895

示例

align-items

用于弹性容器里，即"box"，该容器内的所有元素都一致受制于align-items的值。

align-self

用于弹性容器内部的元素，即"box1"、"box2"，align-self可以分别控制不同的元素取不同的值。

1. align-items 横向排列

<style>
    #box{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        display: flex; /*默认值flex-direction:row，即横向排列*/
        align-items: center; /*水平居中*/
    }
    #box1{
        width: 50px;
        height: 50px;
        background-color: tomato;
    }
    #box2{
        width: 50px;
        height: 50px;
        background-color: orange;
    }
</style>

align-items 横向排列

2. align-items 纵向排列

<style>
    #box{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        display: flex; /*默认值flex-direction:row，即横向排列*/
        flex-direction: column; /*修改为纵向排列*/
        align-items: center; /*垂直居中*/
    }
</style>

align-items 纵向排列

3. align-self 横向排列

<style>
    #box{
        width: 200px;
        height: 100px;
        border: 1px solid #000000;
        display: flex; /*默认值flex-direction:row，即横向排列*/
    }
    #box1{
        width: 50px;
        height: 50px;
        background-color: tomato;
        align-self: center; /*水平居中*/
    }
    #box2{
        width: 50px;
        height: 50px;
        background-color: orange;
        align-self: flex-start; /*排列在水平线上方*/
    }
</style>

ialign-self 横向排列

4. 2. align-self 纵向排列

<style>
    #box{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        display: flex; /*默认值flex-direction:row，即横向排列*/
        flex-direction: column; /*修改为纵向排列*/
    }
</style>

align-self 纵向排列


补充：justify-content与align-items类似（且也用在弹性容器中），但多了几种令元素更多样的排列。