移动端入门知识(3)

最新推荐文章于 2024-10-17 06:11:29 发布

小欣不会输

最新推荐文章于 2024-10-17 06:11:29 发布

阅读量124

点赞数 1

文章标签： html5 html 前端 css3

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

版权

flex布局

flex即Flexible Box，其含义就是弹性盒子，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目，主要用来为盒状模型提供最大的灵活性。容器默认存在两个根轴：主轴和交叉轴

注意：任何一个容器都可以定义为弹性盒子！

语法：display:flex;

注意：Webkit内核的浏览器，必须加上-webkit前缀。

一、flex-direction的属性

flex-direction属性决定主轴的方向（也可称之为排列顺序），它有以下4个值：

row（默认值）	主轴为水平方向上，排列顺序从左往右
row-reverse	主轴为水平方向上，排列顺序从右往左
column	主轴为垂直方向上，排列顺序为从上往下
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>
        .box{
            display: flex;
            /* flex-direction: row;默认值，主轴从左往右排列，交叉轴从上往下排列 */
            /* flex-direction: row-reverse;主轴排列从右往左，交叉轴是从下往上排列 */
            flex-direction: column;
            /* 此时原交叉轴边为主轴，原主轴变为交叉轴，主轴排列从上往下排列，交叉轴从左往右排列 */
            /* flex-direction: column-reverse;主轴排列从下往上，交叉轴从右往左排列 */
            justify-content: center;
            align-items: flex-end;
            width: 1000px;
            height: 1000px;
            background-color: #aac;
        }
        .box .top{
            width: 300px;
            height: 300px;
            background-color: #00f;
            font-size: 50px;
        }
        .box .center{
            width: 300px;
            height: 300px;
            background-color: #c9c;
            font-size: 15px;
        }
        .box .bottom{
            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>

运行结果：二、主轴(X轴)对齐方式

语法：justify-content：；

其有6个值：

flex-start（默认值）	默认左对齐
flex-end	右对齐
center	居中对齐
space-around	每一个项目两侧距离相同
space-between	每两个项目之间的距离相同
space-evenly	均匀排列每个元素,每个元素之间的间隔相等

案例：

<!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;
            /* align-items: center;
            justify-content: center;垂直水平居中对齐 */
            /* justify-content: flex-start;X主轴的开始  左对齐*/
            /* align-items: flex-end;交叉轴的结束，底部对齐 */
            /* align-items: baseline; */
            /* 与第一个项目的文字的基线对齐 */
            /* justify-content: space-between;每两个项目之间的距离相同 */
            /* justify-content: space-around;每一个项目两侧的距离相同 */
            justify-content: space-evenly;
            /* 兼容性不好，项目之间的留白宽度相同 */
            width: 1000px;
            height: 1000px;
            background-color: #aac;
        }
        .box .top{
            width: 300px;
            height: 300px;
            background-color: #00f;
            font-size: 50px;
        }
        .box .center{
            width: 300px;
            height: 300px;
            background-color: #c9c;
            font-size: 15px;
        }
        .box .bottom{
            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>

执行效果：

三、交叉轴（Y轴）对齐方式

语法：align-items: ;

其有5个值：

stretch（默认值）	当项目未设置高度或高度为auto时，元素将占满整个容器
flex-start	居上对齐
center	垂直居中对齐
flex-end	居下对齐
baseline	与第一个项目的文字基线对齐

代码大家可以参考上方代码以及图片。

四、换行方式

当容器空间不足时，项目会等比例缩小，空间有剩余时，项目不会放大。

语法：flex-wrap: ;

其有3个值：

nowrap（默认值）	不换行
wrap	第一行在上，第二行在下
wrap-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>
        .box{
            display: flex;
            /* flex-direction: column;
            justify-content: center;
            align-items: flex-end; */
            /* flex-wrap: wrap; */
            /* align-content: flex-start;项目上对齐 */
            /* align-content: flex-end;项目下对齐 */
            /* align-content: center; */
            /* 居中对齐 */
            /* align-content: space-between;上下对齐 */
            /* align-content: space-around;每行两侧的距离相同 */
            /* flex-wrap: wrap-reverse;第一行在下 */
            width: 500px;
            height: 500px;
            background-color: #aac;
        }
        .box .top{
            width: 200px;
            height: 200px;
            background-color: #00f;
            font-size: 50px;
        }
        .box .center{
            width: 200px;
            height: 200px;
            background-color: #c9c;
            font-size: 15px;
        }
        .box .bottom{
            width: 200px;
            height: 200px;
            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>

效果图：

注意观察项目的宽度！

五、align-content的属性

align-content用来定义多根轴线的对齐方式，其值有以下6种：

flex-start	上对齐
center	居中对齐
flex-end	下对齐
space-between	上下对齐
space-around	每根轴线两侧的间隔都相等
space-evenly	均匀排列每个元素,每个元素之间的间隔相等