flex布局中的flex:1相关知识

原创 已于 2023-12-14 16:41:44 修改 · 678 阅读 · 10 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
于 2023-12-07 09:47:13 首次发布
本文详细介绍了CSSflex布局中的关键属性flex,包括flex-grow用于放大项目比例，flex-shrink控制缩放，flex-basis决定初始大小。还解释了flex:initial,flex:1,flex:auto和flex:none的具体行为。

一、flex属性

flex属性是以下三个属性的简写：

属性描述
flex-grow项目的放大比例，默认为0
flex-shrink项目的缩小比例，默认为1
felx-basis在分配多余空间之前，项目占据的主轴空间

二、flex:initial

默认值为felx:initial表示为flex:0 1 auto;默认不放大 放不下了缩小 优先采用自己本身宽度 

三、flex:1

flex:1表示为flex:1 1 0% ;说明有剩余空间就放大 空间不够就缩小 本身宽度为0

四、flex:auto 

flex:auto表示为flex:1 1 auto ;说明有剩余空间就放大 空间不够就缩小 优先采用自己本身宽度

五、flex:none

flex:none表示为flex:0 0 auto ;既不放大也不缩小 优先采用自己本身宽度

标签
#前端 #javascript #开发语言
lhhbk
关注
CSS之flex布局
dachaoxuexi的博客
02-13 1932
</div>.item1 {.item2 {.item3 {.item4 {
工业界实战：小红书推荐系统中的AB测试策略解析——分层、Holdout与反转实验
最新发布
transformer2023的博客
03-06 453
本文深入解析了小红书推荐系统在工业界实践中采用的AB测试核心策略。重点阐述了分层实验如何解决多实验并行与干扰问题，Holdout机制如何作为评估黄金标准提供稳定基准，以及反转实验如何作为全量上线后的终极安全网进行风险控制。这些策略共同构成了科学、严谨的线上评估体系，是保障推荐系统迭代效果与决策质量的关键。
flex:1到底是什么
misterHao的博客
12-30 796
一、子项默认值 flex: 0 1 auto，表现如下。 子项宽度和 < 父元素宽时, 不占剩余空间 <body> <div class="wrap"> <div class="lf son">所发生的方式得分</div> <div class="rt son">sdfs我是</div> </div> </body> <style> .wrap { dis
【华为OD机试真题 新系统】959、 水库溃坝填补 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS）
KJ.JK
03-02 2722
【华为OD机试真题 2025C卷】959、 水库溃坝填补 | 机试真题+思路参考+代码解析（C++、Java、Py、C语言、JS） 华为od机试，华为od机试真题，华为od机试E卷，华为odE卷，华为od机试真题E卷，华为OD，华为OD机试，华为OD机试真题，华为od机考，华为od机试D卷，华为od机试真题D卷，华为od手撕代码，华为od，华为od机试C卷，华为od e卷，华为2025e卷，od机试，2025E卷，华为OD机试E卷，什么是华为od，华为od介绍，全面了解华为od，2025华为od，如何备战华
一文搞懂flex:0,1,auto,none
程序员小明1024
12-20 3484
.markdown-body { color: rgba(56, 56, 56, 1); font-size: 15px; line-height: 30px; letter-spacing: 2px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open...
用Flex实现的百分比布局
热门推荐
Handsome_fan的博客
04-16 2万+
弹性布局在移动端页面非常的有用，弹性布局主要利用的是CSS3的flex属性。 下面分享一个用flex来实现百分比布局的方法，这在移动端中是很常用的一种适配方法。 代码如下：          Flex布局          .Grid{         display: flex;     }     .Grid-cell{         flex: 1;
flex系列一:flex-direction(主轴方向)
提醒幺儿吃药喝水健康重要
08-28 300
<!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> *{
在Flexbox布局中，flex: 1
奋斗的小前端
06-17 514
摘要：flex:1是Flexbox布局中常用的简写属性，包含三个值：flex-grow:1（按比例分配剩余空间）、flex-shrink:1（允许空间不足时缩小）、flex-basis:0（不考虑内容初始大小）。该属性使元素自动占据剩余空间，适用于等高布局、导航栏等场景。与flex:auto的区别在于前者不考虑内容大小，后者会考虑。
flex布局和flex:1详解
阿浩dorom
02-22 510
Flex 布局教程：语法篇 - 阮一峰的网络日志flex:1 表达的含义 - 简书
flex：1是什么含义及flex弹性布局详解
weixin_43342105的博客
04-21 5074
flex：1 阮一峰flex教程
CSS专题之flex: 1常见问题
m0_56326830的博客
05-24 1209
本文探讨了Flex布局中flex: 1的常见问题及其解决方案。当元素设置了flex: 1却未按预期填满剩余空间，或文本溢出处理失效时，这通常是由于Flex子元素的min-width默认为auto导致的。该默认值会基于内容决定最小宽度，使得长文本可能撑开容器。解决方案是将min-width设为0，强制元素可以收缩到小于内容尺寸。文章通过实例演示了问题现象，分析了规范依据，并提供了简洁有效的修复方法。
【css知识】flex-grow: 1
DecorateCC的博客
05-20 1379
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
以后要把flex用起来
weixin_34413103的博客
05-29 118
flex 布局： 父级元素定义display:flex, 子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同 .left{ flex: 2; } .middle{ flex:1; } .right{ flex: 3; } 2,1,3 都是占比（2 是占2份 1是占1份 3是占三份） 转载于:https://www.cnblo...
使用flex布局实现3个div并排，两侧的div宽度固定，中间的div自适应面试官问过，当时不知道，今天工作中遇到了。
haohao_____的博客
04-25 1549
设置一个父div，添加样式display：flex。中间div设置flex-grow：1，（等同代码中设置flex：1。flex是grow、shrink、basis的简写）但是盒模型默认紧紧挨着，可以使用margin控制外边距。middle一定在中间，否则需要order属性来调整。通过项目属性flex-grow设置middle的放大比例，将空余的空间用middle来填充，使三个项目排满一整行；默认为0，也就是对剩余空间不做处理。通过项目属性flex-basis 设置left和right的固定宽度。
多列等高布局
Sunshine_366的博客
07-11 269
一、弹性布局 flex属性默认是0 1 auto，【父控件有剩余控件也不放大，父控件空间不足按1缩小，保持本身的空间大小】 flex:1; 的值是1 1 0%，【父控件有剩余空间占1份放大，父控件空间不足按1缩小，自身的空间大小是0%】 二、margin和padding 每列加上padding-bottom:9999px; margin-bottom:-9999px;同时父元素设置o...
flex布局布局之flex:1属性详解
一梦晓三生的博客
12-25 9872
弹性布局基本概念 采用Flex布局的元素，称为 Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main
前端知识——css 之 flex 布局
weixin_42771853的博客
04-04 3941
flex 是 flex-grow || flex-shrink || flex-basis 的简写，flex 属性可以指定1个、2个或3个值。item 多出1个的时候，布局仍是正常的；只有item大于等于2个时，才会出现分散的分布，需要i进行补齐。flex-flow 属性是 flex-direction 和 flex-wrap 的简写，顺序任何。/* 只能设置宽度，不能设置高度，这样i的数量超出时也不会影响布局 */flex-wrap 取默认值时，若一行放不下所有的item元素，则会。
flex布局
z_y_j229970438的博客
11-19 3093
本文章介绍了HTML页面中的flex布局，并通过三个小练习帮助大家快速掌握本文章的学习内容
【CSS3】Flex布局详解
叶子与海的博客
10-05 4087
Flex是Flexible Box 的缩写，也称为弹性盒子布局。 Flex布局组成： - flex容器（`flex container`） - flex项（`flex items`） - 主轴（`main axis`） - 交叉轴（`cross axis`） - 自动弹性伸缩 - 更轻松地设计灵活的响应式布局结构 - 精确灵活控制块级盒子的布局方式 - 在pc端和移动端都适用
【CSS】flex布局用法解析，快速上手flex布局，flex:1是什么意思？肯定看的懂好吧？
余浩的博客
12-24 5593
flex-wrap属性定义，如果一条轴线排不下，如何换行。nowrap（默认）：不换行。wrap：换行，第一行在上方。（常用此项）wrap-reverse：换行，第一行在下方。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap// 主轴水平向右，并且元素自动换行。
粤港澳大湾区shp文件
粤港澳大湾区shp数据；shape data for Guangdong–Hong Kong–Macau Greater Bay Area (GBA)GBA
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值