移动端flex左右布局填坑

最新推荐文章于 2023-03-27 10:09:11 发布
最新推荐文章于 2023-03-27 10:09:11 发布
阅读量283 收藏 1
点赞数
原文链接：https://juejin.im/post/5ce3d1a96fb9a07ed064869a
版权

相信很多小伙伴都遇到过

以上这种问题，flex布局之后因为左边的标题太长，导致挤压了右边的图片

！！！但是这个图片明明给了固定宽，居然还会被挤压，但是

移动端一般右边这些文字盒子不是固定宽，所以我们不能给右边固定宽

最终解决方法，左边盒子flex-shrink:0

完美解决

weixin_33719619
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS之(移动端)flex布局
weixin_45707229的博客
07-10 1020
移动端常用的flex布局，使用顺序：设置主轴，是否换行，设置子项在主轴和侧轴排列/对齐方式，包括多行换行和不换行的情况。
移动端布局——Flex布局
m0_45659764的博客
04-02 2074
一、Flex布局 思考 多个盒子横向排列使用什么属性？ 浮动 设置盒子间的间距使用什么属性？ margin 需要注意什么问题？ 浮动的盒子脱标 Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用) 是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...） 布局网页更简单、灵活 避免浮动脱标的问题 一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本 1.1 Flex布局模型构成 作用 基于Fl...
flex 左右布局_移动WEB开发 — 流式布局
weixin_39880337的博客
11-28 186
流式布局一、手机网页没有版心手机网页没有版心，都左右撑满。 这是因为： 1） 手机视口已经非常小了，如果再限制一个版心，左右留白，非常难看。 2） APP都是满的，你没有见过一个app是中间一条，左右是白的。所以手机网页 我们习惯也让他撑满。 没有版心对我们写页面影响很大，比如你版心是980，那么可以精确计算： logo占120，nav占860，nav里面一共10个li，每个li都是86px。...
flex布局总结
iygxv
10-31 527
Flex布局一、flex布局原理二、父项常见属性1.flex-direction 设置主轴的方向2.justify-content设置主轴上的子元素排列方式总结欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出
移动端flex布局遇到错误
Holeran的博客
01-20 288
在这个布局中出现这种情况的原因没太了解，就是居中不了不知道是什么原因，如果有知道的可以帮看看，谢谢
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
携程网移动端flex布局案例
05-16
总结起来，"携程网移动端flex布局案例"涵盖了前端开发中的多项关键技术，包括Flex布局的运用，CSS3样式的深入，以及性能优化技巧如精灵图和渐变色。通过这些技术的组合，开发者能够创建出既美观又适应性强的移动网页...
移动端Flex布局
ykx_angle的博客
03-27 177
就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
flexcss移动端flex布局神器
08-10
FlexCSS是移动端布局的一种高效解决方案，特别是在开发针对微信、UC浏览器以及各种Webview的项目时，它的优势尤为明显。作为一款专为移动端设计的CSS框架，FlexCSS利用了CSS3中的Flexbox布局模型，能够帮助开发者...
flex布局
m0_71988036的博客
06-15 2782
初识flex布局
移动端list布局，左边固定，右边自适应
weixin_30915951的博客
08-21 130
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="...
flex左右布局_掌握Flex布局的这几个常用属性，搞定弹性布局不在话下
weixin_42190623的博客
12-27 924
1.使用display:flex声明一个Flex布局，这个容器称为Flex容器，其包含的子元素称为Flex项目在Flex容器中有几个核心术语容器: 使用display:flex属性元素项目: 容器的"子元素"主轴: 项目排列的轴线交叉轴: 与主轴垂直的轴线 flex快速实现水平居中和垂直居中 .box { width: 15em; ...
Flex布局详解
还好侑脉动的博客
07-29 594
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。 容器默认存在两根轴 ： 水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cro
移动端左右文字布局
月落星河
05-18 533
左右布局，右边内容可以一直增加，左边保持不动，如下图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&
新手小白非常适合的手机端常见布局，flex布局属性详解
爱唯主机
03-14 424
常见的父项属性 flex-direction：设置主轴的方向 flex-direction:属性决定主轴的方向（即项目的排列方向）默认x轴为主轴 注意：主轴和侧轴是会变化的，我们的子元素是跟着主轴排列的 flex-direction:row(默认值)|row-reverse(从右到左)|column（从上到下）| column-reverse(从下到上) justify-content：设置主轴...
移动端布局的5种方式
weixin_30773135的博客
07-04 321
刚换公司，设计稿还没出，也没有安排新任务，所以抽空整理一下移动端布局方式。 移动端布局方式整理： 1.固定meta视图 <meta name="viewport" content="width=750px,user-scalable=no"> 　　这种写法中，利用meta标签，将视图宽度定位了750px，固定值，也就是ios6的标准，然后css也是基于75...
移动端布局常见问题汇总
MoveLikeRabbit的博客
09-25 877
横竖屏限制问题<meta name = "x5-orientation" content="portrait | landscape" /> 只支持x5内核 <meta name = "screen-orientation" content="portrait" /> 只支持UC浏览器 全屏限制问题<meta name = "x5-fullscreen" content="true" />
CSS布局----flex弹性布局(移动端完美解决方案）
weixin_52546522的博客
04-01 845
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性。 我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局网格布局，以后会和大家讲到 目录 1，如何使用 2， Flexbox的两根轴线 3， Flex 容器 4，API以及用例 1，- 如何使用-因为css用法过于简单，所以先给大家
flex 左右布局_移动端开发常用布局：前端弹性布局总结
weixin_39606575的博客
11-26 308
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用.一:什么是弹性布局?弹性布局(flex container),页面中任何一个元素只要设置了display:flex属性,那么当前盒子都称为弹性盒子.弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于...
移动端flex布局案例
最新发布
08-19
当然，我可以为您提供一个移动端的Flex布局案例。假设您想要创建一个简单的导航栏，其中包括三个链接按钮，它们应该在移动...这就是一个简单的移动端Flex布局案例，希望对您有所帮助！如果您有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值