使用flex让父盒子内子盒子自适应宽度

使用flex让父盒子内子盒子自适应宽度。

父盒子设置flex属性，子盒子设置flex-grow属性。

注意，以下代码使用了tailwindcss来写元素样式。

<!-- 父元素设置flex属性 -->
<div class="flex"><!-- 子元素设置flex-grow，让其自动填充剩余空间 --><div class="w-2/5 h-36 flex-grow ml-4 bg-red-400">Left</div><div class="w-2/5 h-36 flex-grow ml-4 mr-4 bg-blue-400">Right</div>
</div>

使用flex让父盒子内子盒子自适应宽度相关推荐

父盒子内子盒子居中的方法
1.采用子绝父相的方法使用margin使盒子居中 2.子绝父相+css3中新增的transform移动特点是可以不用写单位写50%即可 3. 2.子绝父相使子元素上下左右移动为0 ma ...
微信小程序CSS-父盒子跟子盒子之间的缝隙问题
时间:2021-10-27 问题: 父子盒子结构中,父级盒子有border时,子盒子不能完全和父盒子边框重合,会有一个小的缝隙: 注:微信小程序真机环境下测试,父级盒子有border时出现的问题,无b ...
给子盒子设置外边距父盒子跟着移动问题
当父盒子和子盒子的外边距重叠时,当我们改变子盒子的margin-top这时候父盒子会跟着移动,合并后的外边距等于合并前两个外边距中的较大值,这就是子父盒子外边距重叠问题,我们有时候不可避免的遇到这种问 ...
html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...
html盒子模型子元素怎么水平占满父元素_立下flag）每日10道前端面试题18 关于【盒模型】十问...
第一问:什么是盒模型? 可以说,页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:边距(margin).边框(border).填充(padding).内容(con ...
html盒子模型子元素怎么水平占满父元素_CSS盒子模型、溢出处理、浮动、高度坍塌问题...
盒子模型 1.内容区 width 盒子内容区宽度 height 盒子内容区高度 background-color 背景颜色盒子可见大小由内容区,内边距和边框共同决定为元素设置边框,必须指定3个样式 ...
多重盒子嵌套下，子盒子撑开父盒子，父盒子宽度随子盒子内容自适应
先看默认状态下的效果: 块级元素高度被内容撑开,宽度默认为父级100%(这里父级为浏览器大小) 行内元素的宽高都由内容撑开我们的需求是:让块级父盒子的宽度由子盒子撑开结论:把需要自适应的那层父盒子 ...
子盒子在父盒子中水平垂直居中
子盒子在父盒子中水平垂直居中的几种实现方式. 方式一:margin; HTML:  <div class="father"&g ...
css毛玻璃效果—附：子盒子背景跟随父盒子背景
今天写了一个毛玻璃效果的网页,再次进行总结: HTML: <div class="whole"><div class="login">& ...
父盒子高度为子盒子总高度自动撑满 height: fit-content； //设置内容高度
给父盒子设置高度=子盒子总高度属性: height: fit-content; //设置内容高度

使用flex让父盒子内子盒子自适应宽度

使用flex让父盒子内子盒子自适应宽度相关推荐

最新文章

热门文章