align-items 侧轴子元素排列方式单行多行无效 X,Y

最新推荐文章于 2023-06-17 15:10:13 发布

MDR_0820

最新推荐文章于 2023-06-17 15:10:13 发布

阅读量323

点赞数 1

文章标签： css html html5 移动开发 css3

本文链接：https://blog.csdn.net/MDR_0820/article/details/120661472

版权

align-items 侧轴子元素排列方式单行

该属性是控制子元素在侧轴上的排列方式
属性值有
flex-start ：从上到下
flex-end ：从下到上
center：挤在一起居中对齐（垂直居中）
stretch ：拉伸

<style>
        div{
            display: flex;
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 此时X轴为主轴 设置主轴上的子元素 水平居中 */
            justify-content: center;
            /* 设置侧轴上的子元素排列 水平居中 */
            align-items: center;
            /* 设置侧轴上子元素 向底边对齐 */
            /* align-items:flex-end; */
        }
        div span{
            width: 150px;
            height: 150px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

此时 X轴为主轴
justify-content: center;
设置主轴上的子元素排列水平居中
lign-items: center;
设置侧轴上子元素垂直居中
在这里插入图片描述

此时Y轴为主轴

 div{
            display: flex;
            /* 设置Y轴为主轴 */
            flex-direction: column;
            margin: 100px auto;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 此时X轴为主轴 设置主轴上的子元素 水平居中 */
            justify-content: center;
            /* 设置侧轴上的子元素排列 水平居中 */
            align-items: center;
            /* 设置侧轴上子元素 向底边对齐 */
            /* align-items:flex-end; */
        }
        div span{
            width: 150px;
            height: 150px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>