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

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

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

参考:

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

相关推荐
子言sugar1 小时前
CSS高效开发必备小技巧集锦
css
软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
javascript·css·html
云浪3 小时前
掌握 CSS 倾斜函数
前端·css
zhaoyang03015 小时前
css3笔记 (1) 自用
前端·javascript·css·vue.js·笔记·html·css3
珎珎啊5 小时前
CSS3 常用功能详细使用指南
前端·css·css3
moxiaoran57538 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
要加油哦~17 小时前
css | class中 ‘.‘ 和 ‘:‘ 的使用 | 如,何时用 &.is-selected{ ... } 何时用 &:hover{...}?
前端·css
空&白1 天前
css元素的after制作斜向的删除线
前端·css
奇舞精选1 天前
你可能不知道但非常实用的 HTML5 元素
css
Jolyne_1 天前
grid 实现完美的水平铺满、间隔一致的自适应布局
前端·css