web移动端之改变主轴排列方式

最新推荐文章于 2023-09-27 16:58:12 发布

流川枫不风流

最新推荐文章于 2023-09-27 16:58:12 发布

阅读量144

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/YasWestmere/article/details/127214837

版权

本文探讨了Web移动端布局中如何改变主轴对齐方式，以及在使用精灵图时的注意事项。在使用3倍图时，需要通过pxCook转换为iOS 3倍图以确保显示效果。同时，调整精灵图的`background-size`保持宽度可缩放，高度自适应，避免图像变形。此外，文章还涉及了多行排列及侧轴对齐的实现方法。

摘要由CSDN通过智能技术生成

1. 改变主轴对齐方式

    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
            display: flex;
            flex-direction: column;
            /* 改变主轴方向:上述代码把x轴改变成y轴 */
            justify-content: center;
            align-items: center;
            flex-direction: column-reverse;
            /* 列排列从下到上原来的排列从第二变成第一 reverse代表反方向 */
            
            flex-direction: row;
            /* flex-direction: row;是默认x轴 */
            flex-direction: row-reverse;
            /* x轴的反方向 */
        }
        .box span:first-child {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .box span:last-child {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="box">
        <span></span>