移动端开发之flex布局

最新推荐文章于 2022-09-03 00:04:12 发布

WGP鹏灬

最新推荐文章于 2022-09-03 00:04:12 发布

阅读量205

点赞数

分类专栏：前端开发学习笔记文章标签： css 前端

本文链接：https://blog.csdn.net/qq_43477251/article/details/121004420

版权

前端开发学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

笔记来源：拉勾教育 - 大前端就业集训营
文章内容：学习过程中的笔记、感悟、经验

一、flex布局

1、与传统布局对比

传统布局

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

flex布局

操作方便，布局极为简单，移动端应用很广泛
PC端浏览器支持情况较差
IE11或更低版本，不支持或仅部分支持

建议：

如果是PC端页面布局，我们还是传统布局
如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

2、flex布局体验

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            display: flex;
            width: 800px;
            height: 200px;
            background-color: aquamarine;
            /* 平均分布 */
            justify-content: space-around;
        }
        span {
            width: 150px;
            height: 100px;
            margin-right: 10px;
            background-color: purple;
            flex: 1;
        }
    </style>
</head>
<body>
    <!--flex父容器-->
    <div>
        <!--子容器flex项目-->
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

3、flex布局原理

flex，意为弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，称为flex容器，简称容器；所有子元素自动成为容器成员，称为flex项目，简称项目

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

4、flex布局常见属性

（一）父项常见属性

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

（1）flex-direction - 设置主轴方向

主轴与侧轴：

在flex中，分为主轴和侧轴两个方向，也叫做行和列、X轴和Y轴
默认情况下：主轴就是X轴（水平向右）、侧轴就是Y轴（垂直向下）

flex-direction属性：决定主轴的方向（即项目（子元素）的排列方向）

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

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

（2）justify-content - 主轴子元素排列方式

定义项目（子元素）在主轴上的对齐方式，在使用之前一定要先确认主轴方向

属性值	解释说明
flex-start	默认值 - 从头部开始，如果主轴是x轴,则从左到右
center	在主轴居中对齐(如果主轴是x轴则水平居中)
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间(重要)
flex-end	在主轴结束位置对齐

（3）flex-wrap - 设置子元素是否换行

flex布局中是默认不换行的（如果超过父盒子子元素会被压缩），项目都排在一条线（又称“轴线”） 上可以使用flex-wrap进行调整

属性值	说明
no-wrap	默认值，不需要设置，默认不换行
wrap	换行

（4）align-items - 侧轴上子元素排列方式（单行）

该元素是控制子项在侧轴（默认Y轴）上的排列方式，在子元素为单项（单行）的时候使用

属性值	解释说明
flex-start	默认值 - 从上到下（顶对齐）
dlex-end	从下到上（底对齐）
center	挤在一起居中（垂直居中）
stretch	拉伸（不设置子元素高度）

（5）align-content - 侧轴上子元素排列方式（多行）

设置子项在侧轴的排列方式，且只能用于子元素出现换行的情况下使用（多行），在单行下没有效果

属性值	解释说明
flex-start	在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头,再平分剩余空间
stretch	设置子项元素高度平分父元素高度

（6）flex-flow复合属性

flex-direction和flex-wrap属性的复合属性

（二）子项常见属性

flex子项目占的份数
align-self 控制子项自己在侧轴排列方式
order 属性定义子项的排列顺序（前后顺序）

（1）flex属性

定义子子项目分配父盒子剩余空间，flex表示占多少份数，属性值为数字，默认值为0
注：分配剩余空间会使用剩余空间/份数之和，然后根据每个子元素的flex值分给多少份

（2）align-self - 控制子元素自己在侧轴上的排列方式

允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，这等同于strech（拉伸）。

（3）order - 项目排列顺序

调整子项加载的顺序，默认值是0，如果想往前提，属性值可以为负数，数值越小排列越靠前。
注：和z-index不一样

WGP鹏灬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端开发之flex布局

一、flex布局1、与传统布局对比传统布局兼容性好布局繁琐局限性，不能在移动端很好的布局flex布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：如果是PC端页面布局，我们还是传统布局如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局2、flex布局体验<!DOCTYPE html><html lang="en"><head> &l
复制链接

扫一扫