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

最新推荐文章于 2024-03-15 10:10:22 发布

流川枫不风流

最新推荐文章于 2024-03-15 10:10:22 发布

阅读量193

点赞数

文章标签：前端 html javascript

本文链接：https://blog.youkuaiyun.com/YasWestmere/article/details/127214837

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
        <span></span>
    </div>
</body

2.精灵图使用注意事项

1.在使用精灵图时,有的图片是3倍图,得进入pxCook改成ios 3倍图才能,这样才能使得图片显示出来

2. 修改精灵图时,要注意 background-size:( 具体精灵图大小)px auto; auto自适应

宽度可以缩放,高度不能缩放,因为缩放之后整个大图片会发生变化,所以一般让高度自适应

   ul {
            width: 200px;
            margin: 0 auto;
            list-style: none;
        }

        li {
            width: 58px;
            height: 58px;
            background-image: linear-gradient(180deg, #3c83fa, #50b2fa);
        }

        li a {
            height: 100%;
            text-decoration: none;
            color: #fff;
            /* 弹性容器 */
            display: flex;
            /* 改变主轴 */
            flex-direction: column;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;
        }

        li a span:first-child {
            width: 28px;
            height: 28px;
            background: url(./images/nav.png) no-repeat 0px -170px;
            /* auto宽度可以缩放,高度不能缩放,因为缩放之后整个大图片会发生变化,所以一般让高度自适应 */
            background-size: 28px auto;
        }

多行排列:

 ul {
            width: 1000px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;
            list-style: none;
            /* 弹性容器 */
            display: flex;
            /* 弹性盒子换行 */
            flex-wrap: wrap;
        }

        /* 弹性盒子  默认在一行显示不换行*/
        ul li {
            width: 200px;
            height: 200px;
            margin-right: 10px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>

4.多行侧轴对齐方式


        /* 注意点:关键点在于你的盒子有没有换行,换行之后就是多行,没有换行之前用单行 */
        ul {
            width: 1000px;
            height: 800px;
            background-color: pink;
            margin: 0 auto;
            list-style: none;
            /* 弹性容器 */
            display: flex;
            /* 弹性盒子换行 */
            flex-wrap: wrap;

            /* 单行侧轴对齐方式 */
            /* align-items: center; */

            /* 多行侧轴对齐方式  align-content*/

            /* 多行侧轴盒子居中 */
            /* align-content: center; */

            /* 多行盒子从上排列 */
            /* align-content: start; */

            /* 多行盒子从下排列 */
            /* align-content: flex-end; */

            /*多行盒子侧轴靠边对齐 */
            /* align-content: space-between; */

            /* 多行盒子侧轴1比2垂直对齐 */
            /* align-content: space-around; */

            /* 多行盒子侧轴1比1垂直对齐 */
            align-content: space-evenly;
        }

        /* 弹性盒子  默认在一行显示不换行*/
        ul li {
            width: 200px;
            height: 200px;
            margin-right: 10px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>