移动端入门知识(4)

最新推荐文章于 2024-08-08 23:04:40 发布

小欣不会输

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量443

点赞数 1

文章标签：前端 css3 ios

本文链接：https://blog.csdn.net/wx112728/article/details/123706084

版权

上篇文章我们介绍了容器的属性，这篇我们来介绍一下项目的属性。

项目的属性有以下6种：

align-self
order
flex-grow
flex-shrink
flex-basis
flex

一、align-self 的属性

align-self是用来定义单个项目在交叉轴上的对齐方式，它允许单个项目与其他项目在对齐方式上不同，可覆盖align-items的属性值。

auto（默认值）	继承父容器的属性值，若没有父容器，就等同与stretch。
flex-start	居上对齐
flex-end	居下对齐
center	居中对齐

案例：

<!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>
        .box{
            display: flex;
            /* flex-direction: column; */
            justify-content: center;
            width: 1000px;
            height: 1000px;
            background-color: #aac;
        }
        .box .top{
            align-self: flex-start;
            /* 定义单个项目在交叉轴上的对齐方式 */
            /* 默认值是auto 它会继承父容器align-items的值，若没有父容器默认stretch值。 */
            width: 300px;   
            height: 300px;
            background-color: #00f;
            font-size: 50px;
        }
        .box .center{
            align-self: flex-end;
            width: 300px;
            height: 300px;
            background-color: #c9c;
            order: -1;
            font-size: 15px;
        }
        .box .bottom{
            align-self: center;
            order: -2;
            width: 300px;
            height: 300px;
            background-color: #80a;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">这是蓝色</div>
        <div class="center">这是粉色的盒子</div>
        <div class="bottom">这是紫色的盒子</div>
    </div>
</body>
</html>

效果图：

二、order的属性

order定义项目的排列顺序，无单位，值越小，越靠前。

默认值是“0”，需要注意的是其值必须是整数！

代码及效果图我们可以看上方的代码端，里面已经包含了。

三、flow-grow 的属性

定义项目放大比例，默认值是“0”，即有剩余空间时，也不放大。

注意：flow-grow的属性值没有负值！

案例：

<!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>
        .box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 1000px;
            height: 1000px;
            background-color: #aac;
        }

        .box .top {
            align-self: flex-start;
            /* 定义单个项目在交叉轴上的对齐方式 */
            /* 默认值是auto 它会继承父容器align-items的值，若父容器未设置默认stretch值。 */
            width: 300px;
            height: 300px;
            background-color: #00f;
            font-size: 50px;
        }

        .box .center {
            width: 300px;
            height: 300px;
            background-color: #c9c;
            order: -1;
            font-size: 15px;
            flex-grow: 1;
        }

        .box .bottom {
            align-self: center;
            order: -2;
            width: 300px;
            height: 300px;
            background-color: #80a;
            font-size: 15px;
            flex-grow: 3;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">这是蓝色</div>
        <div class="center">这是粉色的盒子</div>
        <div class="bottom">这是紫色的盒子</div>
    </div>
</body>

</html>

效果图：

从上面我们可得知，flex-grow的值我们可以加在一起，得出的值就认为它把容器剩余的空间分成几份，在进行占空间。

四、flex-shrink 的属性

其用来定义项目缩小比例，默认值时“1”，若空间不足时，项目将平均缩小，注意：它和flex-grow一样无负值 。若想让项目中的其中一个不缩小给予值“0”即可。

代码我们可以把上方的案例改一下，例如：

效果就是这样了：

五、flex 的属性

flex是flex-grow、flex-shrink和flex-basis的简写。默认值是：“ 0 1 auto”

flex-shrink和flex-basis的默认值可以省略

该属性值有两个快捷值：1. auto（1 1 auto）

2. none（0 0 auto）

代码就是这样：

六、flex-basis的属性

这个属性我们了解一下就行，它只是计算在分配多余空间之前，项目占据的主轴空间。在我们运行后计算机已经默认计算出它的多余空间，所以我们几乎用不到。在这里我就不多说了。

小欣不会输

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端入门知识(4)

上篇文章我们介绍了容器的属性，这篇我们来介绍一下项目的属性。项目的属性有以下6种：align-self order flex-grow flex-shrink flex-basis flex一、align-self 的属性align-self是用来定义单个项目在交叉轴上的对齐方式，它允许单个项目与其他项目在对齐方式上不同，可覆盖align-items的属性值。auto（默认值）继承父容器的属性值，若没有父容器，就等同与stretch。 flex-start 居上
复制链接

扫一扫