flex:1解析

最新推荐文章于 2024-07-16 17:16:30 发布
最新推荐文章于 2024-07-16 17:16:30 发布
阅读量71 收藏
点赞数
分类专栏： 知识记录 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaohao_123/article/details/127301615
版权

flex:initial（默认布局）

flex:    0       1      auto
//     grow    shrink  basic

flex:1 （经常用的布局）

flex:    1       1      0
//     grow  shrink   basic

详细

grow：1 子元素如果未占满父级时会等比例占满
shrink：1 子元素如果超出父级时会等比例（每个都设置的是1）收缩
basic：0  会优先把所有的同级都变成一样，比较委婉

basic：auto 第一个子元素会扩大地盘，撑到最大，比较霸道（默认auto）

可以静下心来看看这篇文章中分财产的例子

少昊~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局及 flex:1解析
和大家一起涨芝士
11-21 504
flex布局及 flex:1解析
解析flex属性：flex：1究竟是什么
热门推荐
weixin_43554584的博客
02-17 4万+
成功搞懂了flex:1呢！
弹性盒中 flex详解及flex：1的用法解析
Hr_ving的博客
08-05 1万+
在写弹性盒布局的时候，实现上下两栏固定，中间部分自适应的时候都会使用flex=1这个样式，但这个样式具体是什么呢，接下来我将讲解一下我对这个flex=1的理解
css中flex:1表示什么
weixin_41111189的博客
12-04 922
我们知道flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 css语法： flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; 当我们设置flex:1时，浏览器解析为如下： ...
flex:1在IE与谷歌浏览器中效果不一样：在IE中文字被后面的的元素遮挡，变垂直，没有正常显示
weixin_44370837的博客
04-20 1047
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 遇到的问题： 今天在适用flex布局时，遇到了flex:1;在谷歌和IE浏览器中显示不一样的问题。谷歌浏览器的效果与预期相符合。 预期效果: IE浏览器的效果图： 完整的页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta cha
flex:1 到底代表什么?
firstcode666的博客
03-03 1785
今天在做项目的时候遇到一个关于布局的问题, 就是 flex: 1; 我一直以为 flex: 1; 代表的是 flex: aoto; 后来发现结果并不是这样, 所以写一篇博客来讲解一下 flex: 1; 代表什么 代码第一版 <div class="container"> <div class="div">我是一个div</div> <div class="div">我是一个很多字div</div> <div class="d
【CSS】flex布局用法解析，快速上手flex布局，flex:1是什么意思？肯定看的懂好吧？
余浩的博客
12-24 5156
flex-wrap属性定义，如果一条轴线排不下，如何换行。nowrap（默认）：不换行。wrap：换行，第一行在上方。（常用此项）wrap-reverse：换行，第一行在下方。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap// 主轴水平向右，并且元素自动换行。
flex布局中flex属性的深入探讨
小何程序员的博客
12-21 905
前言 首先我们以一个题目来引出flex属性的使用规则 问题一 如何实现下面图片的效果 首先我们可能会提出一种解决方案 最大的灰色盒子里面包含着三个小盒子，大盒子使用flex布局，然后每个小盒子设置属性flex: 1; 这样即可完成图片效果。代码如下 <style> .main { display: flex; justify-content: center; align-items: center;
css --- > flex:n的解析
栗子好好吃的博客
09-26 231
起步 效果如下: 在父元素中,将3个盒子平均分成了3等份 代码如下: p span { flex: 1; background-color: lightcoral; } p span:nth-child(even) { border-right: 1px solid black; border-left: 1px solid black; } 假设有3个子元素 flex:1 的...
flex：Symfony的Composer插件
02-06
这个文件包含了Flex的核心功能，包括解析Composer的依赖、应用预定义的配置（即“recipes”）以及与Symfony项目的交互。 综上所述，Flex作为Symfony的Composer插件，极大地简化了基于Symfony框架的PHP应用的开发...
Flex 解析Json
12-23
Flex 解析Json 引入：import json JParser; var uinfo:Object new Object ; uinfo fun "checkMeetingUser"; uinfo uid "12"; uinfo meetId "1"; var strJson:...
flex解析xml
09-15
总结，Flex解析XML文件主要通过XML和XMLList类，它们提供了丰富的API来操作XML数据。理解这些概念和方法，将有助于你在Flex应用中有效地处理和展示XML数据。无论是简单的数据展示还是复杂的交互逻辑，Flex都能通过...
Flex CSV文件解析类
05-03
Flex CSV文件解析类是ActionScript编程中用于处理逗号分隔值（CSV）文件的工具。在Flex开发中，CSV格式常被用来交换表格数据，因为它简单、通用且易于读写。CSV文件由一系列行组成，每行包含一个或多个字段，字段...
parser:全部解析器
04-01
1. LL解析器：自左向右扫描输入，使用左递归文法。这类解析器简单且易于实现，但处理某些类型的文法时可能会遇到问题。 2. LR解析器：也是自左向右扫描，但采用右递归文法。LR解析器比LL解析器更强大，可以处理更...
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 87
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
Web前端-Web开发CSS基础3-盒模型
最新发布
a15735748145a的博客
07-16 608
1. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；2. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；3. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 1052
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
基于CSS两种菜单创建方式
sunbeacher的博客
07-13 954
HTML多种场景下需要菜单的实现，这里提供两种方式： （1）基于CSS的POPUP式菜单 特征：按需显示POPUP菜单，但布局是浮动的。 （2）覆盖式弹出菜单。 特征：按需显示菜单，菜单以弹出窗口模式显示，会覆盖下面的内容
flex-shrink: 1;
08-18
- *1* *2* [弹性盒中 flex详解及flex：1的用法解析](https://blog.csdn.net/Hr_ving/article/details/119425445)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值