flex布局，子元素宽度不符合预期

Coly 发布于2019-08-29 17:27 / 1654人阅读

摘要：预期子元素内容不同，但是希望子元素平均分成三份遇到的问题实际上每个子元素会根据内容宽度的不同而不平均分配代码文字文字文字文字文字文字文字文字文字文字文字文字解决方案给每个子元素的宽度设置为就解决这个问题啦并且这个解决方案也适合在

预期

子元素内容不同，但是希望子元素平均分成三份：

遇到的问题

实际上每个子元素会根据内容宽度的不同而不平均分配：

代码:


    
      文字文字文字
    
    
      文字文字文字文字文字文字文字文字文字
    
    
      888373773

      .box{
        display: flex;
      }
      .child{
        height: 300px;
      }
      .child1{
        flex-grow: 1;
        background-color: #0f0;
      }
      .child2{
        flex-grow: 1;
        background-color: #f00;
      }
      .child3{
        flex-grow: 1;
        background-color: #fff000;
      }

解决方案

给每个子元素的宽度设置为0:

      .child{
        height: 300px;
        width: 0;
      }

就解决这个问题啦！！！！！

并且这个解决方案也适合在flex布局中，overflow失效的情况！

原理

不太清楚，待更新.....

GPU云服务器云服务器 flex布局 html宽度元素 js获取元素宽度子元素个数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114337.html

【CSS练习】IT修真院--练习5-护工个人界面

摘要：任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍，查缺任务五、一个最常见的移动端页面完成的事情 float学习张鑫旭《CSS世界》相关章节张鑫旭 float系列了解CSS通配符 &...

Jonathan Shieber 2019-08-29 15:42 评论0 收藏0
flex布局的元素如何分配容器的剩余空间

摘要：三个元素会从左往右占据父元素的空间这很显然。左右侧边栏的宽度都是，中间元素的宽度将会占据元素的剩余宽度。同样会导致父元素有部分剩余空间没有分配。自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼奇技...

ethernet 2019-08-30 15:44 评论0 收藏0
写给 Android 开发的小程序布局指南，Flex 布局！

摘要：不过在小程序中，这就不是我们需要考虑的了，微信已经帮我们处理好了。而在新手阶段，暂时只需要关注两个参数指定一个块级布局，它其内的元素，总是起一个新行来显示，而微信小程序的很多视图容器组件，默认的就是，例如等。 showImg(https://segmentfault.com/img/remote/1460000015285633?w=750&h=562); 一、序 Hi，大家好，我是承...

Salamander 2019-08-29 15:43 评论0 收藏0
CSS: 潜藏着的BFC

摘要：而就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到的神奇之处。实例解决侵占浮动元素的问题我们知道浮动元素会脱离文档流，然后浮盖在文档流元素上。在写样式时，往往是添加了一个样式，又或者是修改了某个属性，就达到了我们的预期。而BFC就潜藏在其中，当你修改样式时，一不小心就能触发它而毫无察觉，因此没有意识到BFC的神奇之处。一、什么是BFC（Block Form...

learn_shifeng 2019-08-29 13:54 评论0 收藏0
flex-item属性之flex-grow、flex-shrink了解下

摘要：容器仍然是，灰灰，小橘，需要一起减掉才可以。但是灰灰和小橘的瘦身能力明显不一样，他们设置了不同的，分别为和。瘦掉的这需要平分到灰灰加上小橘身上的每一个上。前言 flex布局，想必css江湖上的各位侠士都用得很多了，那我们今天就来说说flex-item下的几个不太常用的属性吧（其实是鄙人用的不多（┬＿┬）而已啦，好奇了解了下）。从容貌上来看，grow，shrink，grow，shri...

Simon_Zhou 2019-08-30 15:47 评论0 收藏0