CSS align-items侧轴对齐属性

2019-11-22 本文已影响0人 Kkite

align-items属性值（垂直对齐）

值	描述	白话文
stretch	默认值。项目被拉伸以适应容器	让子元素的高度拉伸适用父容器（子元素不给高度的前提下）
center	项目位于容器的中心	垂直居中
flex-start	项目位于容器的开头	垂直对齐开始位置
flex-end	项目位于容器的结尾	垂直对齐结束位置

html案例代码

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        section{
            width: 60%;
            height: 600px;
            border: 2px solid pink;
            margin: 100px auto;
            display: flex;
            /*justify-content: flex-start;  让子元素从父容器的开头开始排序 但是盒子顺序不变*/
            /*justify-content: flex-end;    让子元素从父容器的后面开始排序 但是盒子顺序不变*/
            /*justify-content: center;      让子元素从父容器中间显示*/
            /*justify-content: space-between; 左右的盒子贴近父盒子，中间的平均分配空白间距*/
            justify-content: space-around; /*相当于给每个盒子添加了左右margin外边距*/

            /*align-items: flex-start;*/
            /*align-items: flex-end;*/
            /*align-items: center;*/
            /*align-items: stretch;*/
        }
        div{
            width: 250px;
            height: 200px;
        }
        div:first-child{
            background-color: pink;
        }
        div:nth-child(2){
            background-color: purple;
        }
        div:nth-child(3){
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>