【移动端网页布局】flex 弹性布局 ① ( 传统布局与 flex 弹性布局 | flex 弹性布局简单使用 | flex 弹性布局下直接为行内元素设置宽高 | flex 弹性布局设置权重 )

韩曙亮

发布于 2023-05-07 20:28:54

84900

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、传统布局与 flex 弹性布局

传统布局特点 :

兼容性好 : 可以在 PC 端 / 移动端 , 各种新旧浏览器中适配的非常好 , 显示效果基本一致 ;
布局繁琐 : 要考虑标准流 , 浮动 , 定位等样式 ;
局限性 : 鉴于上述问题 , 传统布局有很多局限性 , 移动端的页面没有必要兼容 PC 端 , 因此使用传统布局不是最佳选择 ;

flex 弹性布局特点 :

布局简单 : flex 布局非常简单 , 编写方便 , 在移动端使用效果非常好 ;
不兼容 PC 端 : 在 PC 端浏览器 , 兼容性很差 ;
不兼容低版本浏览器 : 在 IE 11 及以下的低版本浏览器中 , 不支持使用 flex 弹性布局 ;

传统布局与 flex 弹性布局选择 :

PC 端页面 , 推荐使用传统布局 ;
移动端页面 , 不考虑兼容 PC 端页面 , 使用 flex 弹性布局 ;

二、flex 弹性布局简单使用

1、代码示例 - flex 弹性布局下可以直接为行内元素设置宽高

在下面的代码中 , 父容器设置了 flex 弹性布局显示样式 , 可以直接为该 <div> 父容器布局中的 <span> 行内元素设置宽高属性 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 布局宽度充满整个 浏览器 / 设备 */
            width: 100%;
            /* 布局高度 200 像素 */
            height: 200px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            /* flex 样式下可以直接为 行内元素设置宽高 */
            width: 150px;
            height: 100px;
            background-color: skyblue;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

展示效果 :

2、代码示例 - flex 弹性布局设置权重

在下面的代码中 , 父容器设置了 flex 弹性布局显示样式 , 如果子容器中都设置了 flex:1 样式 , 则这些子容器平均布满整个父容器 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 布局宽度充满整个 浏览器 / 设备 */
            width: 100%;
            /* 布局高度 200 像素 */
            height: 200px;
            /* 设置背景颜色 */
            background-color: pink;
            /* 内容自适应设置 */
            justify-content: space-around;
        }
        
        div span {
            height: 100px;
            background-color: skyblue;
            margin-right: 5px;
            /* 直接设置布局平均分为 3 等份 */
            flex: 1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

展示效果 :