03-修改主轴方向

秋枫 ~

已于 2022-10-13 13:39:35 修改

阅读量198

点赞数

分类专栏： Flex布局文章标签： css

于 2022-10-13 13:36:56 首次发布

本文是秋枫 ~原创文章，转载请附上博文链接！

本文链接：https://blog.csdn.net/weixin_43472938/article/details/127299759

版权

Flex布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用 flex-direction改变元素排列方向

主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性：flex-direction

属性值	作用
row	行，水平（默认值）
column	* 列，垂直
row-reverse	行，从右向左
column-reverse	列，从下向上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }
        .box li {
            display: flex;
            width: 80px;
            height: 80px;
            border: 1px solid rgb(184, 180, 180);
            /* 先确定主轴方向  再选择对应的属性实现主轴或侧轴对齐方式 */
            /* 修改主轴方向：列 */
            flex-direction: column;

            /* 视觉效果：实现垂直效果居中 */
            justify-content: center;
            /* 视觉效果：实现水平效果居中 */

            align-items:center;
        }
        .box img {
            width: 32px;
            height: 32px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <img src="./媒体.png" alt="">
                <span>媒体</span>
            </li>
        </ul>
    </div>
</body>
</html>