移动web第四篇

最新推荐文章于 2024-11-01 13:37:40 发布

一只小老虎ovo

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量29

点赞数

文章标签：前端 css html html5 css3 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_57564064/article/details/129425787

版权

文章介绍了Flex布局中的主轴方向设置，包括flex-direction属性的四个值，以及修改主轴方向的应用场景。同时，详细讲解了弹性盒子的换行显示、侧轴对齐方式，包括align-items和align-content的用法，以及各种对齐方式的效果。最后，提到了justify-content用于主轴对齐的各种策略。

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

设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

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

红色字体着重记

语法：

flex-direction：column;

修改完毕，主轴是Y轴，侧轴是X轴。

如何去算是几背图

精灵图的宽度/装精灵图盒子的宽度=倍数

修改主轴经常的使用场景：

请完成如下场景：

比如：

代码样式:

<!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>主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box li {
            /* 弹性容器 */
            display: flex;
            /* 主轴排列方向 */
            /* 垂直方向排列 使用最多 */
            flex-direction: column;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;
            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
        }
        
        .box img {
            width: 32px;
            height: 32px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/media.png" alt="">
                <span>媒体</span>
            </li>
        </ul>
    </div>
</body>

</html>

弹性盒子换行

特性：给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 : flex-wrap:

语法：

flex-wrap: wrap;

设置侧轴对齐方式

注意:

此处设置侧轴多行的垂直对齐方式。 align-content（用的少）

和前面学过的 align-items （侧轴单行垂直对齐）（用的多）

align 垂直比如 align-items 垂直对齐 align-content 多行垂直对齐

content 主轴 justify-content align-content 侧轴多行对齐

align-content：center；

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间