4.移动端布局-flex布局**

已于 2022-12-28 22:37:51 修改
阅读量497 收藏 2
点赞数 1
分类专栏： 移动端 文章标签： css css3
于 2022-12-26 22:03:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128446432
版权

1、传统布局和flex布局

传统布局：PC端

  • 兼容性好
  • 布局繁琐
  • 局限性，不能在移动端很好的布局
    flex布局：PC端、移动端
  • 操作方便，布局简单，移动端应用广泛
  • PC端浏览器支持情况较差
  • IE11或更低版本，不支持或仅部分支持

2、布局原理

1、flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
2、采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目。子容器可以横向排列或纵向排列
3、总结：通过给父盒子添加flex属性，控制子盒子的位置和排列方式

  • 当我们为父盒子设为flex布局后，子元素的float、clear、vertical-align属性将会失效
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

3、flex布局父盒子常见属性

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

3.1 flex-direction设置主轴方向

（1）主轴和侧轴

行和列、x轴和y轴
默认主轴方向是x轴，水平向右。可以改变主轴方向
默认侧轴方向是y轴，水平向下
主轴和侧轴是会变化的，看flex-direction设置谁为主轴，剩下的就是侧轴。子元素是根据主轴排列的

（2）属性值

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

使用传统布局：
span行标签设置宽高，不生效

<!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>
        div{
            background-color: green;
            width: 600px;
            height: 300px;

        }
        div span{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>


使用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>
        div{
            display: flex;
            flex-direction: column;
            background-color: green;
            width: 600px;
            height: 300px;

        }
        div span{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

在这里插入图片描述

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

注意：使用该属性之前先确定好主轴是哪个

属性值说明
flex-start默认值从头部开始，如果主轴是x轴，则从左到右
flex-end从尾部开始排列
center在主轴居中对齐（如果主轴是x轴，则水平居中）
space-around平分剩余空间
space-between先两边贴边，再平分剩余空间（**）
<!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>
        div{
            display: flex;
            /* 设置主轴是x轴 */
            flex-direction: row;
            /*设置两边贴边，中间平分*/
            justify-content: space-between;
            background-color: green;
            width: 600px;
            height: 300px;

        }
        div span{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

在这里插入图片描述

3.3 flex-wrap设置子元素是否换行*

flex布局中，子元素默认不会换行（项目都排在轴线上），如果一行装不下所有的子元素，就会通过缩小子元素的宽度以放到父元素中1行进行展示。

属性值说明
wrap换行
nowrap不换行，默认不写

在这里插入图片描述
添加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>
        div{
            display: flex;
            /* 设置主轴是x轴 */
            flex-direction: row;
            /*设置两边贴边，中间平分*/
            justify-content: space-between;
            /* 设置子元素换行 */
            flex-wrap: wrap;
            background-color: green;
            width: 600px;
            height: 300px;

        }
        div span{
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

在这里插入图片描述

3.4 align-items 设置侧轴子元素排列方式（单行）*

在子元素为单项的时候使用

属性值说明
flex-start沿着主轴从上到下（左到右），贴着父盒子上（左）沿
flex-end从下到上
center垂直居中，居中
stretch拉伸（默认值），子盒子不要设置高度。拉到和父亲一样高
<!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>
        div{
            display: flex;
            /* 设置主轴是x轴 */
            flex-direction: row;
            /*设置两边贴边，中间平分*/
            justify-content: space-between;
            /* 设置子元素换行 */
            flex-wrap: wrap;
            /* 设置垂直居中(单行) */
            align-items: center;

            background-color: green;
            width: 600px;
            height: 300px;

        }
        div span{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

在这里插入图片描述

3.5 align-content设置子元素沿侧轴排列方式（多行）*

看主轴上有无出现换行,行指的是主轴的方向
适用于子项出现换行的情况（多行），单行使用没有效果

属性值说明
flex-start默认值，在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度
<!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>
        div{
            display: flex;
            /* 设置主轴是x轴 */
            flex-direction: row;
            /*设置两边贴边，中间平分*/
            justify-content: space-between;
            /* 设置子元素换行 */
            flex-wrap: wrap;
            /* 设置垂直居中(单行) */
            /* align-items: center; */
            /* 设置两边贴在侧轴头部 */
            align-content: space-between;
            background-color: green;
            width: 600px;
            height: 300px;

        }
        div span{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
    </div>
</body>
</html>

在这里插入图片描述

3.6 flex-flow

是flex-wrap和flex-direction的简写属性

flex-flow:row wrap;

<!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>
        div {
            display: flex;
            /* 设置主轴是x轴 */
            flex-direction: row;
            /*设置两边贴边，中间平分*/
            justify-content: space-between;
            /* 设置子元素换行 */
            flex-wrap: wrap;
            /* 设置垂直居中(单行) */
            /* align-items: center; */
            /* 设置两边贴在侧轴头部：多行 */
            align-content: space-between;
            /* 设置主轴和换行 */
            flex-flow: column wrap;
            background-color: green;
            width: 600px;
            height: 300px;

        }

        div span {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
    </div>
</body>

</html>

在这里插入图片描述

4、子项属性使用

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

4.1 flex属性

定义子项目分配剩余空间，flex表示占多少份数

.item{
	flex:1;/*default 0*/
}

可以实现圣杯布局：缩放屏幕时，两边固定，中间自适应

<!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>
        section{
            display: flex;
            width: 60%;
            margin: 0 auto;
            height: 150px;
            background-color: #ccc;
        }
        section div:first-child{
            width: 100px;
            height: 150px;
            background-color: green;
        }
        section div:nth-child(2){
            flex:1 ;
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

在这里插入图片描述

<!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>
        
        p{
            display: flex;
            width: 60%;
            margin: 100px auto;
            height: 150px;
            background-color: #ccc;
        }
        p span{
            flex:1;
        }
    </style>
</head>
<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
</html>

在这里插入图片描述
设置第2个盒子占2份：

<!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>
      
        p{
            display: flex;
            width: 60%;
            margin: 100px auto;
            height: 150px;
            background-color: #ccc;
        }
        p span{
            flex:1;
        }
        p span:nth-child(2){
            flex: 2;
            background-color: green;
        }
    </style>
</head>
<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
</html>

在这里插入图片描述

4.2 align-self控制子项自己在侧轴的排列方式

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

span:nth-child(2){
	//设置第2个盒子在侧轴上的排列方式
	align-self:flex-end;
}

<!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>
        section{
            width:60%;
            height: 200px;
            display: flex;
            /* 设置子项沿侧轴从底部开始排列 */
            align-items: flex-end;
            background-color: #ccc;
        }
        section div{
            width: 100px;
            height: 150px;
            margin: 10px;
            background-color: orange;
        }
        section div:nth-child(2){
            /* 设置第二个子项是沿着侧轴顶部排列 */
            align-self: flex-start;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>

在这里插入图片描述

4.3 order属性定义项目的排列顺序

数值越小越靠前，默认是0

<!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>
        section{
            width:60%;
            height: 200px;
            display: flex;
            /* 设置子项沿侧轴从底部开始排列 */
            align-items: flex-end;
            background-color: #ccc;
        }
        section div{
            width: 100px;
            height: 150px;
            margin: 10px;
            background-color: orange;
        }
        section div:nth-child(2){
            /* 设置第二个子项是沿着侧轴顶部排列 */
            align-self: flex-start;
            /* 设置2号盒子在1号盒子之前，默认是0 ，-1<0 */
            order:-1;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>

在这里插入图片描述

MY Daisy
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端布局之flex布局1：flex布局体验、flex布局原理、flex布局父项常见属性
qq_34306228的博客
06-05 1046
以下有6个属性是对父元素设置的在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴flex-direction属性决定主轴的方向（即项目的排列方向） 注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的 justify-content属性定义了项目在主轴上的对齐方式 默认情况下， 项目都排在一条线(又称“轴线”上)。flex-wrap属性定义，flex布局中默认是不换行的 该属性是控制子项在侧轴（默认
【Flex】Flex布局，移动端最常用的布局。
Lin_Yu_的博客
08-12 389
flex布局。目前最主流的布局方式。
移动端Flex布局
ykx_angle的博客
03-27 136
就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
移动端基础 Flex布局详解
m0_69287579的博客
08-18 205
1.1传统布局1.1传统布局目标： 能够使用Flex布局模型灵活、快速的开发网页思考 多个盒子横向排列使用什么属性？浮动 设置盒子间的间距使用什么属性？margin 需要注意什么问题？浮动的盒子脱标。
CSS之(移动端)flex布局
weixin_45707229的博客
07-10 985
移动端常用的flex布局，使用顺序：设置主轴，是否换行，设置子项在主轴和侧轴排列/对齐方式，包括多行换行和不换行的情况。
stkwn#ctrip#移动端布局-携程网-flex布局方式1
07-25
设置背景图的时候，先除3，把background-size设置为除以3之后的。渐变色：
【移动端网页布局】Flex 弹性布局案例 ③
最新发布
03-06
【移动端网页布局】Flex 弹性布局案例 ③
flex布局-携程网-移动端
02-23
flex布局，包括主页面，我的页面，登录页面
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
移动端优先的flex三栏布局的使用方法
09-22
felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用... 这篇文章主要介绍了移动端优先的flex三栏布局的使用方法，感兴趣的小伙伴们可以参考一下
移动端布局之flex布局
Wanan_J的博客
01-14 883
弹性布局 flex布局 常见属性
移动端的适配
qq879222800的博客
05-16 346
移动端的一般采用flex布局+rem单位来做。 flex + viewport width /vh单位 做适配效果 （马上的一个趋势 ） 让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕 rem 单位 rem 是一个相对单位，1rem 就是 html 文字的大小 例：则此时 1rem 就是 35像素。 html { font-size: 35px; } 媒体查询（了解） 媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小。 .
移动端特点(重点)~~~
weixin_57320268的博客
02-12 1116
1 移动端特点 PC端 屏幕大，网页固定版心 浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流） 移动端 手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度 移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性 2 物理分辨率和逻辑分辨率 物理分辨率：硬件所支持的，屏幕出厂就设定无法修改 逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率 3 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域..
移动端之flex布局
yexiangCSDN的专栏
05-10 433
一、移动端之flex布局 1. 传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 flex 弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC 端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 建议： 1. 如果是PC端页面布局，我们还是传统布局 2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 2.flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，...
移动Web：Flex布局、移动端适配、视口、二倍图
孤安先生的博客，作者主站正在重构中，敬请期待！
11-04 496
系统会将视口的宽度和高度分为100份，1vw 就占用视口宽度的百分之一，1vh 就占用视口高度的百分之一。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。动态单位，会随着 html 根元素字体大小的变化而变化（相对单位）。不会随着视口的大小变化而变化，像素是一个固定的 (绝对) 单位。动态单位，会随着参考元素字体大小的变化而变化（相对单位）。动态单位，会随着网页视口大小的变化而变化（相对单位）。动态单位，永远跟着元素的父元素作为参考进行计算。设置给项目，不是给容器。
pc端 移动端常见页面布局方式
weixin_53125457的博客
12-24 1014
圣杯布局 左右两端宽度固定，中间center宽度自适应。 布局方法： 1、在主体内部外嵌套一个div 2、center在结构里面要靠前 3、centere,left,right，设置浮动 4、清除浮动 5、center的宽度为100%，left，right的宽度固定 6、left通过margin-left为负值（-100%），移动到center的最左边 7、right通过margin-left为负值（自身的宽度），移动到center的最右边 8、center的内容会被left，right遮盖 9、最外层的
移动端的四种布局方式
qq_56405776的博客
08-22 408
移动端适配建议由rem为主，百分比适配、vw/vh适配为辅的方案。vw单位兼容性比rem稍差，ios8、安卓4.4及以上才完全支持。这也是rem适配主流的原因。
移动端布局——Flex布局
m0_45659764的博客
04-02 2039
一、Flex布局 思考 多个盒子横向排列使用什么属性？ 浮动 设置盒子间的间距使用什么属性？ margin 需要注意什么问题？ 浮动的盒子脱标 Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用) 是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...） 布局网页更简单、灵活 避免浮动脱标的问题 一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本 1.1 Flex布局模型构成 作用 基于Fl...
移动端的自适应布局神奇—Flex Box(1)
fareise的博客
02-08 6444
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; -webkit-text-stroke: #000000} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; -webkit-text-stroke: #000000; min-height: 13
flex 移动端布局
03-03
Flex布局是一种用于移动端开发的弹性盒子布局模型，它可以方便地实现页面元素的自适应和灵活排列。以下是Flex布局的一些特点和用法： 1. 容器和项目：Flex布局由容器和项目组成。容器是指应用Flex布局的父元素，而项目则是容器内的子元素。 2. 主轴和交叉轴：Flex布局中有主轴和交叉轴两个方向。主轴是项目排列的方向，默认为水平方向（row），交叉轴则是垂直于主轴的方向。 3. 容器属性： - display: flex; 设置容器为Flex布局。 - flex-direction: 设置主轴的方向，可以是row（水平方向）、column（垂直方向）、row-reverse（反向水平方向）或column-reverse（反向垂直方向）。 - justify-content: 设置项目在主轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）或space-around（每个项目两侧间隔相等）。 - align-items: 设置项目在交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、baseline（基线对齐）或stretch（拉伸对齐）。 - flex-wrap: 设置项目是否换行，可以是nowrap（不换行）或wrap（换行）。 - align-content: 设置多行项目在交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）或space-around（每行两侧间隔相等）。 4. 项目属性： - flex: 设置项目的伸缩比例，默认为0，即不伸缩。可以通过设置不同的值来实现不同的伸缩效果。 - order: 设置项目的排列顺序，数值越小越靠前，默认为0。 - align-self: 设置单个项目在交叉轴上的对齐方式，覆盖容器的align-items属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值