web前端------弹性盒子

display属性,用于指定元素的盒子类型。

属性值flex,表示生成一个弹性容器,简称容器。

容器中每一个子元素都叫做项目。

我们知道了弹性盒子由容器和项目组成。

而CSS中提供了很多属性来实现弹性布局,按照作用范围的不同,这些属性可以分为容器属性和项目属性。

弹性盒子的*++容器属性大致分为三类++*:

(1)排列属性

flex-direction属性,用于指定容器中项目的排列方向。

当flex-direction的属性值为column时,项目会从上到下排列。

当flex-direction的属性值为column-reverse时,项目会从下到上排列。

当flex-direction的属性值为row时,项目会从左到右排列。

当flex-direction的属性值为row-reverse时,项目会从右到左排列。

(2)换行属性:从前面,我们知道容器的项目会默认从左向右排列。但是,当所有项目的宽度超过容器的宽度时,弹性布局会压缩项目的宽度或者高度。此时,我们可以让多出的项目切换到下一行来解决这个问题。

flex-wrap属性,用于设置弹性盒子的项目超出父容器时是否需要换行。

换行属性值有常见的3种情况:

nowrap,表示项目不会换行,是默认情况;

wrap,表示项目会在需要时换行;

wrap-reverse,表示项目会在需要时以相反的顺序换行。

(3)对齐属性

**************************水平对齐属性****************************

justify-content属性,用于设置盒子的项目在水平方向的对齐方式。

这个是常见的6种对齐方式;

**************************垂直对齐属性****************************

容器中的项目设置垂直方向的对齐方式时,会用到align-items和align-content两个属性。

区别就在于:

align-items用于单行项目;

align-content用于多行项目。

align-content用于多行项目的时候,对应的属性值和align-content完全相同,这里不再赘述。

相关推荐
卸任8 小时前
Vibe coding工具使用心得
前端·ai编程
brien99 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance9 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M9 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写9 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李9 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易10 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马10 小时前
前沿视界
前端
kyriewen10 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易10 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员