关于弹性盒布局子盒子的宽度失效问题

最新推荐文章于 2023-11-03 09:27:51 发布
最新推荐文章于 2023-11-03 09:27:51 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： vue学习记录 uni-app学习记录 文章标签： 前端 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44161722/article/details/127571601
版权

因为设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了flex布局的基础上，再进行子元素宽度的设置，可以应用下面的样式：（在该子元素上设置）

width: 120px;
flex-shrink: 0;

flex-grow;此属性为是否自动增长空间，
flex-shrink;此属性为是否自动缩小空间，
默认值都是1，即自动增长/缩小，设置为0时，不会自动增长/缩小
以对_
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹性盒子----子元素宽度失效
qq_41340792的博客
07-19 2329
因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。 该属性介绍: 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 根据上述介绍可以理解为默认 1 为开启收缩 所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto; 解决了display:flex下的子元素设置宽度无效的问题。 ...
设置盒子宽度不起作用
weixin_43965251的博客
06-18 298
设置盒子宽度不起作用
关于开启弹性盒子之后当只有文本内容的和单独存在时内容无法撑起宽度从而对齐的解决方案
个人笔记
11-03 249
突然想起来这种情况，这种情况就是开启弹性盒子后如果一个盒子里只有纯文本内容，你的盒子是撑不起来的，这时给宽度也会无效（除非取消弹性盒子）以最大的内容的宽度为盒子的宽度。宽度固定，内容会自适应高度。意思是盒子宽度由内容撑起。
display:flex下两个div,导致div宽度发生变化
Aa12364567的博客
07-04 766
class= 'a’宽度为100，但是b长度被拉伸，导致a宽度不足100。如果自身高度或者宽度被拉伸了，直接把自己的高度或者宽度设置为0即可。
父级div子级span给子级一个display: inline-block 为什么不在一行显示，解决方法：
MQH000000000的博客
04-20 1106
最近做一个移动端的项目遇到一个问题，一行5个span标签，每个设为 inline-block，并分为不同的百分比显示在一行内，但是不知什么原因出现了换行现象，一度怀疑是百分比超了100%，但是检查后没查出问题，查找了一些资料发现问题出现在 inline-block上，inline-block是包含空格、换行符的，所以种种原因会导致inline-block产生间距，即会出现换行。 清楚inline-block的间距有很多方法，最简单的就是格式化代码或所以inline-block的标签写在一行无空...
flex 布局中子元素设置宽度无效的解决办法
热门推荐
UserGuan的博客
01-05 1万+
因为父元素设置了【display: flex】所以该父元素下所有的子元素都会默认加上【flex: 0 1 auto】。其中 1 就是 flex 中的 flex-shrink 属性，表示开启元素的收缩功能，所以子元素宽度才会失效。flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。默认值：0 1 auto。
html子级盒子为什么不随父级盒子变化,设置子盒子display:inline-block为什么会脱离父盒子...
weixin_39802814的博客
06-15 369
设置子盒子display:inline-block为什么会脱离父盒子?Header组件import React from 'react';class Header extends React.Component {// constructor(props) {// super(props);// }render() {return ();}}export default Header;cs...
不再混淆，一次搞懂！图解flexbox十余个属性
weixin_30316097的博客
07-29 121
原文首发于个人博客：不再混淆，一次搞懂！图解flexbox十余个属性 flexbox的发明简直是csser的一大福音，终于可以不再需要为垂直居中一个元素而绞尽脑汁了。同时它还能够实现弹性布局，可以说没有它做不到，只有你想不到。但是由于历史原因，flexbox的有多个版本在市面上流通，需要使用不同的厂商前缀或者使用完全不一样的属性名，起初的时候造成人们使用的困扰。 不过后来随着css后处理器的出现...
flex布局中子元素宽度失效的问题
qq_36437172的博客
11-27 3687
在弹性布局中，用上flex后发现会上瘾，因为这个属性实在太好用了。有一种情况是左边我设置一个子元素固定宽度，右边设置自适应占满剩余空间，但有时候会发现左边固定元素的宽度竟然失效了，被右边的元素挤占空间了，所以仔细查看flex属性的特点后，发现少设置了一些属性样式。 父元素设置完 display:flex 属性后；子元素设置固定宽度：这里加上另外一个属性可防止宽度变化，就是flex-grow;此属...
[前端]flex布局不定宽度时，子div无法撑开父div
栗子菜菜
06-28 1535
flex布局不定宽度时，子div无法撑开父div（min-width）
css和css3弹性盒模型实现元素宽度（高度）自适应
花花的博客
06-06 9490
一、css实现左侧宽度固定右侧宽度自适应1、定位<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应</title> <style> *{
display:inline-block属性的标签出现的问题及解决方法
huanhuan03的博客
03-20 1271
display:inline-block
当设置display:inline;时li的宽度无效的解决方法
adobe1992
08-02 1万+
若制作导航栏时，使用列表li 的定义时，若想加上一个背景图 ，这时候若定义li的一个属性为:li{display:inline ; width:83px; height:30px;}，则浏览器会无视后面的高和宽属性的定义，按照默认字体大小来显示！    解决的方法为，将display:inline ,改成 display:block； 和加上float:left; 即可正常，完整
父级设置display:flex；子级宽度无效的解决办法
前端，请指教
12-16 2653
flex-shrink这个属性默认为1，即空间不足会自动缩小，需要设置为0。 子级css添加flex-shrink:0即可
flex布局左边固定，右边自适应，右边内容超出会影响布局
qq_43340606的博客
11-11 2438
左侧宽度固定，右侧自适应 .left-div{ width: 200px; } .right-div{ flex: 1; } 右边内容超出的话，就会导致左边固定的宽度大小不起重要了，这时只需要加上min-width: 0;就可以了 .right-div{ flex: 1; min-width: 0; } ...
关于弹性盒子的一个bug（父盒子宽度）
sha虫剂的博客
05-07 1553
最近，在给一个刚开始学前端的朋友解决bug的时候发现了一个关于弹性盒子的bug，这个bug大多数人可能都会忽略，故而分享一下，希望大家不会再踩坑。 先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
flex 弹性盒子子元素宽度被压缩
CSDN前端知识共享
06-14 2485
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，它还有另外一个值，就是0.
盒模型属性-width height-padding-border-margin
DIUDIUjiang的博客
02-25 938
宽度 width： 作用：设置可以添加元素内容的区域的宽度。 属性值： 特殊应用： • 如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其 特点自动计算出实际宽度，例如 <div>元素等独占一行的，其 width 属性的值会自 动撑满父元素的 width 区域，如果是<span>元素等不需要独占一行的，其 width 属性的值是内部元素内容自动撑开的宽度。 • <body>元素比较特殊，不需要设置 width 属性.
弹性布局
qq_49353940的博客
07-19 404
将元素设置为弹性容器之后，他所有的子元素，都会变为弹性项目 display:flex；将块级元素设置为容器 line-flex 将行内元素设置为容器 注意： 元素设置为flex容器后，容器的text-align,vertical-align失效 项目的float，clear失效 1、容器的属性 ①设置主轴的方向 flex-direction: 取值： row默认值，主轴是x轴，主轴的起点在左端 row-reverse 主轴是x轴，主轴的起点在右端 column 主轴是y轴，主轴的起点在顶部 column
lvgl弹性布局 焦点设置
最新发布
04-17
lvgl是一个开源的嵌入式图形库，它提供了丰富的图形界面组件和功能，可以用于开发各种嵌入式设备的用户界面。lvgl中的弹性布局和焦点设置是两个不同的概念，我会分别给你介绍。 1. 弹性布局： 弹性布局是一种自适应布局方式，可以根据容器的大小和内容的需求来动态调整子元素的位置和大小。在lvgl中，弹性布局通过lv_flex布局模块来实现。你可以使用lv_flex模块来创建一个弹性容器，并在容器中添加子元素。通过设置不同的属性，如对齐方式、伸缩比例等，可以实现灵活的布局效果。 2. 焦点设置： 在用户界面中，焦点表示当前用户正在操作的元素或控件。焦点设置是指通过编程方式将焦点设置到指定的元素上，以便用户可以通过键盘或其他输入设备与该元素进行交互。在lvgl中，可以使用lv_group模块来管理焦点。你可以创建一个焦点组，并将需要接收焦点的元素添加到该组中。然后，通过调用相应的函数，可以设置焦点在组内的移动方式、切换焦点等操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值