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

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

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

参考:

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

相关推荐
软件技术NINI1 小时前
圣罗兰彩妆html+css 4页
前端·css·html
溪语流沙3 小时前
【Web全栈进阶】Composition API与组件通信:props深入、emit、插槽
前端·css·vue.js
传人once8 小时前
企业官网静态页基础结构如何搭
javascript·css
damoluomu8 小时前
静态站点生成器怎么选:Node.js 生态里常用的五个(番外一)
javascript·css·typescript·node.js·html
程序员大阳8 小时前
副队长HTML+CSS博客网站实战 (1)–项目介绍与整体规划
css·html·实战·教程·博客网站·规划
程序员大阳8 小时前
副队长HTML+CSS博客网站实战 (3)–首页主体:Grid 文章卡片 + 侧边栏布局
css·html·侧边栏·博客网站·首页·文章卡片
程序员Sunday9 小时前
Flex 和 Grid 有什么区别?一维布局、二维布局怎么选?
前端·css·面试
爱喝水的小周9 小时前
实验十一 Vuex 实现王者荣耀后台比赛管理系统
前端·css·html
橘猫走江湖9 小时前
浮动塌陷复现失败:父元素为什么一直不塌
前端·css
ShineWinsu10 小时前
对于HTML:HTML常见标签的解析—下
前端·css·面试·html·标签·表单·emmet