[css] flex 子元素自动撑开父元素宽度

对于水平排列的情况,我们可以设置父元素的flex-direction属性为row。这样,子元素将会水平排列在一行内,并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度,则子元素会被压缩,以适应父元素的宽度。

对于垂直排列的情况,我们可以设置父元素的flex-direction属性为column 。这样,子元素将会垂直排列在一列内,并自动撑开父元素的宽度。同样地,如果子元素的高度总和超过了父元素的高度,则子元素会被压缩,以适应父元素的高度。

参考:

flex 子元素 自动撑开父元素宽度

相关推荐
Beginner x_u13 分钟前
CSS 动画体系(二)—— Animation关键帧动画
前端·css·animation
T-shmily20 分钟前
CSS Grid 网格布局(display: grid)全解析
前端·css
风无雨2 小时前
滚动条上下按钮隐藏不生效的原因与修复(::-webkit-scrollbar-button)
css·css3·webkit
雾岛心情2 小时前
【HTML&CSS】HTML为文字添加格式和内容
前端·css·html
Mr Xu_4 小时前
巧用多背景图层打造精美 CSS 背景 —— 基于 SVG 的视觉合成技巧
前端·css
怪侠_岭南一只猿6 小时前
爬虫阶段一实战练习题:爬取豆瓣电影 Top250 复盘
css·经验分享·爬虫·python·学习·正则表达式
Beginner x_u7 小时前
Vue scoped 样式不生效的一个坑:CSS 选择器与 class 合并机制
前端·css·vue.js
XXYBMOOO7 小时前
Flarum 主题定制:从零打造你的赛博朋克/JOJO 风格社区(含全套 CSS 源码)
前端·css
じ星不离月か10 小时前
【记录】 跑马灯无限滚动
前端·css·跑马灯·无限滚动
kyriewen10 小时前
我敢打赌,你还不知道 display 还有这些骚操作!
前端·css·html