移动web开发重点4：实现中间的盒子随着大小，自由的伸缩（流式布局、flex布局）

最新推荐文章于 2022-11-22 15:04:02 发布
最新推荐文章于 2022-11-22 15:04:02 发布
阅读量405 收藏
点赞数
分类专栏： css 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42129553/article/details/113820663
版权
css 同时被 2 个专栏收录
41 篇文章 3 订阅 ¥19.90 ¥99.00
订阅专栏
移动端
9 篇文章 1 订阅
订阅专栏
本文介绍了如何在移动Web开发中实现中间的盒子随着窗口大小自由伸缩，主要探讨了两种方法：一是利用flex布局，通过设置外部盒子、子元素的尺寸和flex属性；二是采用流式布局，通过定位和margin来调整盒子的位置。案例链接提供了详细实现细节。
摘要由CSDN通过智能技术生成

实现中间的盒子随着大小，自由的伸缩

用flex的方法

将最外面的盒子的大小设置为60%,然后将第一个和第三个盒子的宽度和高度设置好，然后父亲盒子的剩余部分就是中间部分，再用flex:1,将父亲盒子的剩余部分分成1份，给第二个盒子

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

<head>
    <meta charset="UTF-
了解本专栏 订阅专栏 解锁全文
小黄呀呀呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
移动WEB开发（流式布局、flex布局、rem适配布局）
linmuqi0928的博客
03-30 800
一、流式布局 视口：就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。 我们移动端布局最想要的是理想视口。 理想视口：对设备来说，是最理想的视口尺寸。需要手动添写meta视口标签通知浏览器操作。 meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们的布局的视口就多宽。 meta视口标签 <meta name="viewport" content="width=device-width, user-scalable=no
css-flex弹性盒模型布局
sam80000的博客
12-07 290
flex弹性盒模型布局一、了解flex二、flex-direction 弹性的方向三、flex-wrap 弹性换行 一、了解flex 当父容器display:flex时，子容器可以用margin居中，且子容器什么宽高都可以很好的自适应居中。flex给父容器加就可以，子容器不用加 #box{width: 300px; height: 300px; border: 1px black solid; margin: 20px auto; display: flex;} #box1{width: 100px; h
点击按钮控制盒子伸缩（animate（）方法）
m0_47697572的博客
03-03 719
点击按钮控制盒子伸缩（animate（）方法）
弹性盒子-伸缩盒布局
weixin_46022982的博客
05-07 757
4 伸缩盒布局 4.1 伸缩容器和伸缩项目 伸缩容器： 一个元素设置 CSS 属性 display:flex 或者 display:inline-flex ，该元素就变为伸缩容器。 伸缩项目： 伸缩容器的子元素就是伸缩项目。 伸缩项目的特点： 伸缩项目会在伸缩容器默认中水平排列。 伸缩项目可以设置宽高、内外边距且不存在外边距塌陷， 不会脱离文档流，具有伸缩性。 一个元素可以同时是伸缩项目和伸缩容器。 4.2 设置主轴方向和换行方式 主轴： 伸缩项目沿着主轴排列， 默认的主轴方向是从左到右。 侧轴：
弹性盒模型（伸缩布局）
weixin_34392906的博客
08-26 258
一、弹性盒模型（伸缩布局） flxible box 前言： 弹性布局，用来为盒子提供灵活性。就像是当把浏览器缩小的的时候，不会像float属性会依然往下掉，灵活性不好。而且当布局盒装模型的时候依赖于float+position+display，例如实现垂直居中就很不方便了。 一）语法 {display: flex;} /*作为块级伸缩盒子显示*/ {display: ...
弹性盒子中间自适应
pingwei_deng的博客
06-25 2094
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;弹性盒子中间自适应&lt;/title&gt; &lt;style&gt; /* 父级添加 display:-webkit-box; d
移动web网页开发（上篇）——流式布局（百分比布局）和Flex弹性布局
m0_53619602的博客
06-09 1260
前面我们学习的一直都是pc端的页面布局，也称为传统布局。传统布局的优点在于兼容性好，但它局限性除了布局繁琐外，在移动端不能很好的布局。为了解决这个问题就出现了两个xuanze——单独制作移动端的页面和响应式页面。 单独制作移动端页面可以分为流式布局（百分比布局），flex弹性布局，less+rem+媒体查询布局，混合布局。...
06前端学习之移动web开发：移动布局(流式布局)、Flex伸缩布局、移动响应式web开发(rem布局)、响应式布局(Bootstrap框架)
浅弋、璃鱼的博客
07-26 672
文章目录一、移动布局(流式布局):二、Flex伸缩布局: 一、移动布局(流式布局): 二、Flex伸缩布局:
移动WEB开发之流式布局
m0_72711350的博客
11-15 448
移动端。
Web页面div盒子拖动的实现
12-19
该拖拽支持IE浏览器、火狐浏览器以及谷歌浏览器，实现方法较为稳定，可以设置父盒子的高度、以及宽度，超出后可出现滚动条，能够有效的集成到项目中
【CSS】flex弹性布局(伸缩布局)
最新发布
IMSI的博客
11-22 601
display、flex、css
flex 弹性盒子子元素宽度被压缩
CSDN前端知识共享
06-14 2524
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，它还有另外一个值，就是0.
css 弹性盒子
weixin_43294560的博客
11-17 500
弹性盒子 在浏览器窗口变化时，盒子相应改变大小 子容器会在父容器内变化 父容器属性 开启弹性盒子 display:flex； 在父容器开启，子容器默认在父容器内水平布局 设置横轴方向的布局方式 justify-content:flex-start; 默认值，位于父容器开头 justify-content:flex-end; 位于父容器结尾 ......
窗口自适应 盒子根据窗口的大小进行改变
m0_55751104的博客
11-02 681
窗口自适应 盒子根据窗口的大小进行改变
flex 布局 左边盒子flex:1 右边盒子固定宽度被推出屏幕右侧
树上骑个猴的博客
03-21 2257
页面左右布局，左边盒子设置flex:1，左边盒子里的内容是el-table。 右边盒子设定固定宽度，当左边盒子里的el-table每次在页码1和页码2之间切换的时候(我的el-table一共是2页，第二页数据少不会出现垂直滚动条，第一页数据多会出现垂直滚动条)，el-table右侧滚动条的出现和消失导致左边el-table的宽度越来越大，所以左边盒子宽度越来越大。导致右边的盒子被推出屏幕右侧边界。 原因：如果左边盒子不设置宽度，左边盒子可以被子节点(el-table)无限撑开。 解决方案： 给左边盒子设置
对于网页缩小之后盒子乱序
qq_45775250的博客
03-25 678
网页缩小盒子乱序问题 当我们在书写网页时可能会遇到全屏网页书写，写完之后缩小当前网页会导致网页排版不一致，出现乱序的问题，如下： 全屏时网页状态 缩小网页时网页状态 我们会发现此时网页中的第二行在全屏网页中时都还是正常状态而缩小网页之后就出现了问题 网页缩小盒子乱序问题解决 下面是盒子乱序时的代码片，css代码未给出，这里我们可以发现第二行网页实际上是被我们分成了三个部分，第一个部分是background盒子，第二个部分是second盒子，第三个部分是search盒子，他们分别在自己的位置上排列着。 &
css3伸缩布局（附实例、图解）
weixin_45135068的博客
08-01 1043
目录 justify-content 调整主轴对齐（水平） align-items 调整侧轴对齐（垂直）单行比较多 flex-wrap控制是否换行 flex-flow是flex-direction、flex-wrap的简写形式 align-content堆栈（由flex-wrap产生独立行）对齐 order控制子盒子的排列顺序 正文 伸缩布局用法： 1，给父盒子添加伸缩布局模式 section { /* 父级盒子添加flex */ display: fle
css[两个子容器同高且撑起父容器高度]
墨水白云的博客
06-16 2112
面对的问题是： 1.左右不同高 2.整体高度低于当前窗口高度 页面内容分为上中下结构，然后中间有侧边栏和主体内容。 需求是：当中间的内容不够高的时候，让页面内容能够铺满整个屏幕，当中间内容过高的时候自动将内容称起来显示滚动条，并且将侧边栏和主题内容高度同高 第一种方式 侧边栏使用 position:absolute; height:100%; left:0; top:0; right:0; bottom:0; 第二种方式 父容器 display:flex; 子容器 height:inherit .
微信小程序Flex布局详解：开发教程与实现技巧
在微微信小程序开发中，Flex布局是一项关键的技术，它允许开发者实现高效、灵活的页面布局。Flex布局起源于W3C在2009年的提议，旨在提供一种简便、完整且响应式的布局方式，适用于各种屏幕尺寸和设备。微信小程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小黄呀呀呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值