设置flex-shrink:0. flex布局只占位,不占空间

最新推荐文章于 2024-05-21 23:20:00 发布
最新推荐文章于 2024-05-21 23:20:00 发布
阅读量443 收藏
点赞数
文章标签： css css3 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71939262/article/details/128754213
版权

问题: 这个汉堡按钮把文字给压住了

解决方法: 在汉堡结构前面放一个空的

div元素进行占位

问题: 这个汉堡按钮把文字给压住了

解决方法: 在汉堡结构前面放一个空的

div元素进行占位

因为咱们添加的这个元素

它的父元素是flex布局

而父元素里面的孩子已经

设置flex-basic:22%.

平分了空间

所以我们给这个div'设置

width为33px,就不生效

此时可以给这个div

设置flex-shrink:0

表示我不占空间'

就是有个位置而言

岁月神偷もう
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 Flexbox中flex-shrink属性的用法示例介绍
09-25
当flex items的大小超过了flex container时， 各个flex item的压缩比例，下面有个不错的教程，大家可以参考下
flex布局设置成元素本身的大小
qq_39131699的博客
04-02 616
flex: 0 1 auto;
FLEX中的组件隐藏显示是否占用位置的问题
wating_you的博客
10-08 832
控制显示/隐藏组件的属性： 1、display 隐藏不占用位置，页面上的元素重新排列 2、visible 隐藏占用位置，即使隐藏也能看到空出的位置 3、includeInLayout 隐藏不占用位置。 如果想要在flex中设置一个按钮根据权限可见，又不想让他在隐藏的时候占用位置可以如下： visible = false includeInLayout = false ...
转---30 分钟学会 Flex 布局
weixin_34345560的博客
03-04 92
正文从这开始～ Flex 基本概念： 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cro...
flexbox布局详解
大白兔
06-10 850
flexbox——一维布局模型，由flex-container和flex-item（flex容器）构成，为flex-item（flex元素）之间提供了强大的空间分布和对齐能力。
flex布局瀑布流占位两边对齐不对称
TianQiWanLaiQiu的博客
06-30 481
【代码】flex布局瀑布流占位两边对齐不对称。
详解flex布局中flex-grow与flex-shrink的计算方式
11-21
　flex-basis 决定了项目占据主轴的空间，除非使用 box-sizing 进行设置，否则它将设置内容框的大小，因此当你指定一个flex项的大小时需要额外小心，因为它很肯能包含内边距与边框。 　你可以为其指定一个具体的CSS...
详解关于flex-shrink如何计算的冷知识
09-22
本篇文章给大家带来的内容是关于flex-shrink如何计算？flex-shrink的计算方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助
Node.js-Bootstrap-Starter-Template：Node.js，Express，Pug，Twitter Bootstrap，入门模板
01-31
Node.js引导程序入门模板 一个快速简单的Node.js + + + Twitter 5.0模板项目。... main.flex-shrink-0 .container h1.mt-5 Program Name p.lead | Hello world. 作者 科里·贝克尔（Kory Becker）
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 128
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
艾恩小灰灰的博客
05-21 202
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
css笔记总结2
fishniu35的博客
05-15 438
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。3.id 选择器和类选择器最大的不同在于使用次数上。
详解CSS（三）及案例实现
Romised的博客
05-21 385
弹性布局、弹性布局案例、flex 布局基本概念、常用属性、justify-content、align-items、案例实现：小广告、案例实现：百度热榜
CSS-元素堆叠顺序
Kevin7_35Durant的博客
05-18 150
元素的堆叠效果，是根据书写的顺序来的，后面的在上面绿色在最上面，随后是红色，最后是蓝色，跟书写的顺序一样我们可以改变这个顺序。
css如何实现边框模糊的效果
rolling_kitten的博客
05-14 693
其实并不难，用属性 filter: blur(数字px); 即可。效果如下： 图上的圆形内有色彩的渐变，同样也是用filter: blur(数字px); 实现的，代码如下：、
【介绍下SCSS的基本使用】
最新发布
cz88888888666的博客
05-21 217
这些只是SCSS的一些基本用法，你可以进一步探索SCSS的功能和概念，例如条件语句、循环等。要将SCSS转换为纯CSS，你需要使用SASS编译器或与构建工具（例如Webpack）集成使用。🛸SCSS（Sassy CSS）是CSS的一个扩展版本，它引入了一些有益的功能和概念，使得CSS更加方便和可维护。SCSS允许你在样式规则内嵌套其他规则，这样可以更清晰地组织你的样式。SCSS中的混合器允许你定义一组样式，并在需要的地方进行重用。SCSS允许你声明并使用变量，这样可以重复使用相同的值。
CSS Modules与Styled Components：提升CSS可维护性
天涯学馆
05-21 306
选择CSS Modules、Styled Components，或者是两者的结合，取决于项目的特点、团队的偏好以及你对CSS和JavaScript的熟练程度。关键是要找到一个既能满足项目需求，又能提高代码可维护性的解决方案。无论你选择哪种方式，都要确保团队对所选技术有足够的理解和熟练度，以便于长期的开发和维护。2500G计算机入门到高级架构师开发资料超级大礼包免费送！2500G计算机入门到高级架构师开发资料超级大礼包免费送！
vue-cli2项目中使用scss
Hi_MrXiao的博客
05-21 219
首先要搞清楚Sass和Scss的区别：实际上Sass和Scss是同一种东西，Scss是 Sass3 引入新的语法，它们都是css预处理器。：Sass 默认使用“.sass”作为文件扩展名，而 Scss 使用“.scss”作为扩展名。：Sass 最初是以严格的缩进式语法规则来书写，不带大括号和分号，这种方式使得代码更加简洁，但在某些情况下可能不如Scss直观易读；相比之下，Scss的语法允许使用大括号和分号，与常规的 css语法相似，这使得 Scss更容易被 css开发者接受和使用。
3D效果轮播图
weixin_46041602的博客
05-21 178
/margin;padding;box-sizing;body;;width;height;margin;溢出隐藏和3D变化会导致子元素溢出父元素盒子的问题相冲突，会导致不同图片3D效果切换无法实现*/position;;transition;imgdisplay;width;height;position;top;left;20%
vue3 设置div隐藏并占用空间
06-01
要设置一个 div 隐藏并占用空间，可以使用 CSS 属性 `visibility: hidden;`。这会将元素隐藏，但它仍然占用其在文档流中的空间。例如： ```html <div style="visibility: hidden;"> 这个 div 元素被隐藏了，但它仍然占用空间。 </div> ``` 另一种方法是使用 `opacity: 0;` 属性，这会将元素的透明度设置为零，元素不可见，但仍然占用空间。例如： ```html <div style="opacity: 0;"> 这个 div 元素被隐藏了，但它仍然占用空间。 </div> ``` 注意，使用 `display: none;` 属性会将元素从文档流中移除，不再占用空间。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值