弹性盒子布局技巧

置顶 ꧁ଓ碎♡⃝碎ೡ꧂

已于 2022-10-28 15:27:17 修改

阅读量325

点赞数 9

文章标签： css 前端 html

于 2022-09-02 09:41:10 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_63944356/article/details/126656026

版权

基本属性如下：

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

align-items: 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

display: 指定 HTML 元素盒子类型。

flex-direction: 指定了弹性容器中子元素的排列方式

justify-content: 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

当时相比于专门死记代码，可以直接点击检查的flex 右侧的按钮更容易布局，（前提是盒子设置 display: flex;弹性盒子），这样只需要给大盒子设置宽高即可

꧁ଓ碎♡⃝碎ೡ꧂

关注

9
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
5
评论
弹性盒子布局技巧

当时相比于专门死记代码，可以直接点击检查的flex 右侧的按钮更容易布局，（前提是盒子设置 display: flex;弹性盒子），这样只需要给大盒子设置宽高即可。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。设置弹性盒子元素在主轴（横轴）方向上的对齐方式。指定了弹性容器中子元素的排列方式。指定 HTML 元素盒子类型。
复制链接

扫一扫

评论 5

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

꧁ଓ碎♡⃝碎ೡ꧂ 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。