移动端布局——Flex布局

已于 2022-04-03 12:20:32 修改
阅读量2.1k 收藏 10
点赞数 5
CC 4.0 BY-SA版权
文章标签： 前端
于 2022-04-02 16:44:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45659764/article/details/123869905
本文深入探讨了Flex布局在移动端的应用，详细介绍了Flex布局模型构成、主轴和侧轴的对齐方式、弹性盒子尺寸特点及伸缩比。通过案例分析了小兔鲜儿的确认订单和PC端页面，阐述了如何利用Flex实现灵活的布局，解决浮动布局的脱标问题，并提供了浏览器兼容性的参考。

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

一、Flex布局

思考

  • 多个盒子横向排列使用什么属性？
    • 浮动
  • 设置盒子间的间距使用什么属性？
    • margin 
  • 需要注意什么问题？
    • 浮动的盒子脱标 

Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用)

  • 是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...）
  • 布局网页更简单、灵活
  • 避免浮动脱标的问题 

一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本 

1.1 Flex布局模型构成

作用

  • 基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
  • Flex布局非常适合结构化布局

设置方式

  • 父元素添加display:flex;子元素可以自动的挤压或拉伸 （一行排列/水平排列）
  • 水平排列：默认主轴在水平，弹性盒子都是沿着主轴排列

组成部分

  • 弹性容器（父元素）
  • 弹性盒子 （子元素）
  • 主轴
  • 侧轴/交叉轴

 

 1.2 主轴对齐方式

使用justify-content调节元素在主轴的对齐方式

  • 思考：网页中，盒子之间有距离吗？        
    • 有

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距 

属性值 作用
flex-start 默认值，起点开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
  • 修改主轴对齐方式属性：justify-content

 

 

 

 

 1.3 侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式

 修改侧轴对齐方式属性：

  • align-items (添加到弹性容器)
  • align-self:控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
属性值 作用
flex-start 默认值，起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认值，弹性盒子沿着侧轴线被拉伸至铺满容器（子盒子没有高度的时候）

 

 

控制某个盒子在侧轴方向的对齐方式

 

 1.4 Flex弹性盒子尺寸特点

 

 

 2.1 伸缩比

使用flex属

最低0.47元/天 解锁文章

200万优质内容无限畅学
Flex弹性布局
m0_74284133的博客
05-11 1811
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
移动端特点(重点)~~~
weixin_57320268的博客
02-12 1285
1 移动端特点 PC端 屏幕大，网页固定版心 浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流） 移动端 手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度 移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性 2 物理分辨率和逻辑分辨率 物理分辨率：硬件所支持的，屏幕出厂就设定无法修改 逻辑分辨率：软件可以达到的， 我们开发中写的是逻辑分辨率 3 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域..
Flex布局,绝对定位,层叠布局Stack的详细讲解
最新发布
weixin_35874865的博客
06-29 22
你也可以这样写：Text('使用定位').position({ right:10,top:0}).backgroundColor(Color.Pink)在使用Flex布局时，如果不进行换行，子元素的宽度大于父元素。语法：组件.position({x:数值,y:数值}) 或者 组件.position({right:数值,top:数值})绝对定位后的组件不再占用自身原有位置，可以实现层叠效果，原本的位置就不进行占用了。默认情况下，绝对定位的堆叠层级与组件的加载顺序有关，在最后的组件往往在最上面。
Flex移动端布局
weixin_33743880的博客
12-20 200
目前使用flex布局典型的网站有天猫和网易新闻。首先，利用flex的项目不需要对viewport进行缩放，直接：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">简单回顾一下flex的属性一、设置在容器上的属性1、flex-dire...
移动端flex布局
紫月i的博客
10-04 163
1.flex给父级添加属性： flex-direction：设置主轴的方向（默认是横向的，） justify-content：设置主轴上的子元素排列方式 flex-warp：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items：设置侧轴上的子元素的排列方式（单行） justify-content： flex-warp：在flex盒子内，没有设置flex-warp时，如果子盒子总共的宽度超过了父盒子的宽度，flex会自动缩小子盒子的宽度，不会换行显
flex-常见移动端布局
IT子也
03-06 1200
最近在开发一个微信小程序的项目，用flex布局那叫一个爽，这里记录一下心得。 这里不再累诉flex的基础知识了(可以到以下链接学习，网上有很多) http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/494230cd4a72 1、九宫格 <style type="text...
移动端布局——移动适配
m0_45659764的博客
04-05 3990
什么叫移动适配？网页元素的宽高都要随着设备的宽度等比缩放 如何实现？ rem：目前多数企业再用的解决方案 vw/vh：未来的解决方案 一、rem 能够使用rem单位设置网页元素的尺寸 网页效果 屏幕宽度不同，网页尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位 百分比布局特点宽度自适应，高度固定 rem单位 相对单位 rem单位相对于HTML标签（根标签）的字号计算结果 1rem=1HTML字号大小 注意：使用re...
案例制作——携程移动端首页（flex布局）代码
11-09
携程移动端首页的Flex布局是一种响应式设计技术，它允许页面元素在容器内自适应排列，提供更流畅的用户界面体验。以下是使用HTML、CSS和Flexbox创建一个简单的携程移动端首页布局的基本示例： ```html <!DOCTYPE ...
flex布局项目——携程在线首页（原生轮播图效果）.zip
04-16
携程在线首页。适合零基础入门的人使用的demo，对布局这块有不错的...采用的是flex布局使用了原生js实现的tab栏切换等。自己可以通过swiper插件或者TouchSlide插件以及bootstrap框架来替换！可以把这个demo进行更改。
案例制作——携程移动端首页（flex布局）
qq_43498002的博客
10-29 2544
案例制作——携程移动端首页（flex布局） 1.index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" co
移动端布局之flex布局
Wanan_J的博客
01-14 1087
弹性布局 flex布局 常见属性
flex布局
qq_38053677的博客
11-25 2054
flex布局 一、什么是flex布局 ​ Flex 是 Flexible Box缩写，意为“灵活的盒子”或“弹性的盒子”，所以flex布局一般也叫弹性布局 二、什么是flex容器（flex container）？ ​ 采用flex布局的元素，称为flex容器 三、什么是flex项目（flex item）？ ​ flex 容器的所有子元素自动成为容器成员，称为flex项目（注意：孙子元素不会成...
移动端布局-flex布局
weixin_49455047的博客
12-06 1055
一.flex布局体验 1.1传统布局与flex布局 建议： 如果是PC端页面布局，我们还是传统布局 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 1.2初体验 1.搭建HTML结构 <body> <div> <span></span> <span></span> <span></span>.
移动端布局--flex布局
weixin_45899362的博客
03-05 212
为盒状模型提供最大的灵活性 将父盒子设置为flex布局以后，子元素的float、clear和vertical-align都将失效 伸缩布局=弹性布局=伸缩盒布局=flex布局 1.布局原理 通过给父盒子添加flex布局来控制子盒子的位置和排列方式 2.flex布局常见父项属性 flex-direction:设置主轴方向 默认x方向为主轴，取值如下 justify-content:设置主轴上的子元素排列方式 注意：使用这个属性前一定要确定好主轴是哪个 flex-wrap:设置子元素是否换行
【Flex】Flex布局，移动端最常用的布局。
Lin_Yu_的博客
08-12 533
flex布局。目前最主流的布局方式。
CSS之(移动端)flex布局
weixin_45707229的博客
07-10 1104
移动端常用的flex布局，使用顺序：设置主轴，是否换行，设置子项在主轴和侧轴排列/对齐方式，包括多行换行和不换行的情况。
移动端Flex布局
c_perfectworld的博客
10-31 178
分辨率 物理分辨率是生产屏幕时固定的，不可改变 逻辑分辨率是由软件（驱动）决定的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值