弹性盒模型属性和使用

最新推荐文章于 2023-02-10 21:44:44 发布

William Ma

最新推荐文章于 2023-02-10 21:44:44 发布

阅读量683

点赞数 1

文章标签： css html flex css3 html5

本文链接：https://blog.csdn.net/wiaaiam/article/details/108648627

版权

本文详细介绍了CSS弹性盒模型，包括如何设置父元素的display属性为flex以启用弹性布局，以及一系列关键的容器属性如flex-direction、flex-wrap、justify-content和align-items等，用于控制子项目的排列方式和空间分布。此外，还提及了子项目排序的order属性以及隐藏盒子的两种方法：display:none和visibility:hidden。

摘要由CSDN通过智能技术生成

弹性盒子第一步

将他们的父元素的display属性设置为flex

<style>
    div{
    display:flex;}
</style>

弹性盒属性

父元素属性

属性名	描述
flex-direction	设置内部项目的排列方向
flex-wr

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

William Ma

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
弹性盒模型属性和使用

弹性盒子第一步将他们的父元素的display属性设置为flex<style> div{display:flex;}</style>弹性盒属性父元素属性属性名描述flex-direction设置内部项目的排列方向flex-wrap设置一行放不下的话是否换行flex-flow上面两种属性的简写，推荐使用justify项目在主轴（X轴）上的对齐方式align-items项目在交叉轴（Y轴）上的对齐方式alig
复制链接

扫一扫