移动web开发—— flex布局

最新推荐文章于 2022-11-19 23:30:46 发布

原创

最新推荐文章于 2022-11-19 23:30:46 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

本文对比了传统布局和Flex布局，指出Flex布局在移动端的便利性，但PC端支持不佳。介绍了Flex布局的基本概念、主要属性，包括flex-direction、justify-content、flex-wrap、align-items等，并通过示例代码展示其效果，适合移动端开发者参考。

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

传统布局和flex布局对比

传统布局

兼容性好
布局繁琐
局限性，不能再移动端很好的布局

flex布局

操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分

建议

如果是pc端页面布局，还是采用传统方式
如果是移动端或者是不考虑兼容的pc则采用flex

初体验

在这里插入图片描述

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
     
     
            /*flex布局，使得span可以添加大小，等等*/
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }
        
        div span {
     
     
            /* width: 150px; */
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            /*三等份 ,根据屏幕自适应*/
            flex: 1;
        }
    </style>
</head>

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

</html>

代码效果：

在这里插入图片描述

flex布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- 因为flex布局可以让子元素一行显示，不需要浮动，所以就不需要清除浮动
- flex布局还可以设置盒子垂直居中，之前只能设置水平居中。
flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

总结：就是通过给父盒子添加display:flex属性，来控制子盒子的位置和排列方式

父项常见属性

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素的排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-direction设置主轴的方向

在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x 轴和y 轴

默认主轴方向就是 x 轴方向，水平向右

默认侧轴方向就是 y 轴方向，水平向下

在这里插入图片描述

注意：主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
     
     
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 行 row  那么y轴就是侧轴喽 */
            /* 我们的元素是跟着主轴来排列的 */
            /* flex-direction: row; */
            /* 简单了解 翻转 */
            /* flex-direction: row-reverse; */
            /* 我们可以把我们的主轴设置为 y轴 那么 x 轴就成了侧轴 */
            flex-direction: column;
        }
        
        div span {
     
     
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

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

</html>

效果：

主轴为x-正方向：row

在这里插入图片描述

主轴为x-反方向：row-reverse

在这里插入图片描述

主轴为y-正方向：column

在这里插入图片描述

justify-content 设置主轴上的子元素排列方式

justify-content 属性定义了项目在主轴上的对齐方式（项目就是子元素）
注意：使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值从头部开始如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间（重要）

例子—x主轴

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <