CSS Flexbox

2023-10-04 23:12| 来源: 网络整理| 查看: 265

w3school 在线教程 HTML 系列教程浏览器脚本服务器脚本编程教程 XML 系列教程建站手册参考手册 CSS 基础教程 CSS 教程 CSS 简介 CSS 语法 CSS 选择器 CSS 使用 CSS 注释 CSS 颜色 CSS RGB 颜色 CSS HEX 颜色 CSS HSL 颜色 CSS 背景 CSS 背景图像 CSS 背景重复 CSS 背景附着 CSS 简写背景属性 CSS 边框 CSS 边框宽度 CSS 边框颜色 CSS 边框各边 CSS 简写边框属性 CSS 圆角边框 CSS 外边距 CSS 外边距合并 CSS 内边距 CSS 高度/宽度 CSS 框模型 CSS 轮廓 CSS 轮廓宽度 CSS 轮廓颜色 CSS 简写轮廓属性 CSS 轮廓偏移 CSS 文本 CSS 文本对齐 CSS 文本装饰 CSS 文本转换 CSS 文字间距 CSS 文本阴影 CSS 字体 CSS 字体样式 CSS 字体大小 CSS 谷歌字体 CSS 简写字体属性 CSS 图标 CSS 链接 CSS 列表 CSS 表格 CSS 中级教程 CSS Display CSS max-width CSS 定位 CSS 溢出 CSS 浮动 CSS 清除浮动 CSS 布局 - 浮动实例 CSS inline-block CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 垂直导航栏 CSS 水平导航栏 CSS 下拉菜单 CSS 图片库 CSS 图像精灵 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特异性 CSS3 高级教程 CSS 圆角 CSS 边框图像 CSS 背景 CSS 颜色 CSS 渐变 CSS 径向渐变 CSS 阴影 CSS box-shadow CSS 文本效果 CSS 网络字体 CSS 2D 转换 CSS 3D 转换 CSS 过渡 CSS 动画 CSS 工具提示 CSS 图像样式 CSS object-fit CSS 按钮 CSS 分页 CSS 多列 CSS 用户界面 CSS 变量 CSS 覆盖变量 CSS 变量 - JavaScript CSS 变量 - 媒体查询 CSS Box Sizing CSS Flexbox CSS 媒体查询 CSS 媒体查询实例 CSS 响应式设计 RWD 简介 RWD 视口 RWD 网格视图 RWD 媒体查询 RWD 图像 RWD 视频 CSS 网格教程 CSS 网格布局模块 CSS 网格容器 CSS 网格项目 CSS 实例 CSS 实例 CSS 测验 CSS 测验 CSS 参考手册 CSS 参考手册 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 单位 CSS 听觉 CSS 网络安全字体 CSS 可动画制作 CSS 单位 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体建站手册网站构建万维网联盟 (W3C) 浏览器信息网站品质语义网职业规划网站主机关于 W3School 帮助 W3School CSS Flexbox CSS Box Sizing CSS 媒体查询 1 2 3 4 5 6 7 8

亲自试一试

CSS Flexbox 布局模块

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

块（Block），用于网页中的部分（节）行内（Inline），用于文本表，用于二维表数据定位，用于元素的明确位置

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

浏览器支持

所有现代浏览器均支持 flexbox 属性。

29.0 11.0 22.0 10 48 Flexbox 元素

如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。

1 2 3

上面的元素表示一个带有三个 flex 项目的 flex 容器（蓝色区域）。

实例

含有三个 flex 项目的 flex 容器：

1 2 3

亲自试一试

父元素（容器）

通过将 display 属性设置为 flex，flex 容器将可伸缩：

1 2 3 实例 .flex-container { display: flex; }

亲自试一试

以下是 flex 容器属性：

flex-direction flex-wrap flex-flow justify-content align-items align-content flex-direction 属性

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。

1 2 3 实例

column 值设置垂直堆叠 flex 项目（从上到下）：

.flex-container { display: flex; flex-direction: column; }

亲自试一试

实例

column-reverse 值垂直堆叠 flex 项目（但从下到上）：

.flex-container { display: flex; flex-direction: column-reverse; }

亲自试一试

实例

row 值水平堆叠 flex 项目（从左到右）：

.flex-container { display: flex; flex-direction: row; }

亲自试一试

实例

row-reverse 值水平堆叠 flex 项目（但从右到左）：

.flex-container { display: flex; flex-direction: row-reverse; }

亲自试一试

flex-wrap 属性

flex-wrap 属性规定是否应该对 flex 项目换行。

下面的例子包含 12 个 flex 项目，以便更好地演示 flex-wrap 属性。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 实例

wrap 值规定 flex 项目将在必要时进行换行：

.flex-container { display: flex; flex-wrap: wrap; }

亲自试一试

实例

nowrap 值规定将不对 flex 项目换行（默认）：

.flex-container { display: flex; flex-wrap: nowrap; }

亲自试一试

实例

wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行：

.flex-container { display: flex; flex-wrap: wrap-reverse; }

亲自试一试

flex-flow 属性

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

实例 .flex-container { display: flex; flex-flow: row wrap; }

亲自试一试

justify-content 属性

justify-content 属性用于对齐 flex 项目：

1 2 3 实例

center 值将 flex 项目在容器的中心对齐：

.flex-container { display: flex; justify-content: center; }

亲自试一试

实例

flex-start 值将 flex 项目在容器的开头对齐（默认）：

.flex-container { display: flex; justify-content: flex-start; }

亲自试一试

实例

flex-end 值将 flex 项目在容器的末端对齐：

.flex-container { display: flex; justify-content: flex-end; }

亲自试一试

实例

space-around 值显示行之前、之间和之后带有空格的 flex 项目：

.flex-container { display: flex; justify-content: space-around; }

亲自试一试

实例

space-between 值显示行之间有空格的 flex 项目：

.flex-container { display: flex; justify-content: space-between; }

亲自试一试

align-items 属性

align-items 属性用于垂直对齐 flex 项目。

1 2 3

在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-items 属性。

实例

center 值将 flex 项目在容器中间对齐：

.flex-container { display: flex; height: 200px; align-items: center; }

亲自试一试

实例

flex-start 值将 flex 项目在容器顶部对齐：

.flex-container { display: flex; height: 200px; align-items: flex-start; }

亲自试一试

实例

flex-end 值将弹性项目在容器底部对齐：

.flex-container { display: flex; height: 200px; align-items: flex-end; }

亲自试一试

实例

stretch 值拉伸 flex 项目以填充容器（默认）：

.flex-container { display: flex; height: 200px; align-items: stretch; }

亲自试一试

实例

baseline 值使 flex 项目基线对齐：

.flex-container { display: flex; height: 200px; align-items: baseline; }

亲自试一试

注意：该例使用不同的 font-size 来演示项目已按文本基线对齐：

1 2 3 4 align-content 属性

align-content 属性用于对齐弹性线。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

在这些例子中，我们使用 600 像素高的容器，并将 flex-wrap 属性设置为 wrap，以便更好地演示 align-content 属性。

实例

space-between 值显示的弹性线之间有相等的间距：

.flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-between; }

亲自试一试

实例

space-around 值显示弹性线在其之前、之间和之后带有空格：

.flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: space-around; }

亲自试一试

实例

stretch 值拉伸弹性线以占据剩余空间（默认）：

.flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: stretch; }

亲自试一试

实例

center 值在容器中间显示弹性线：

.flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: center; }

亲自试一试

实例

flex-start 值在容器开头显示弹性线：

.flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-start; }

亲自试一试

实例

flex-end 值在容器的末尾显示弹性线：

.flex-container { display: flex; height: 600px; flex-wrap: wrap; align-content: flex-end; }

亲自试一试

完美的居中

在下面的例子中，我们会解决一个非常常见的样式问题：完美居中。

解决方案：将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中：

实例 .flex-container { display: flex; height: 300px; justify-content: center; align-items: center; }

亲自试一试

子元素（项目）

flex 容器的直接子元素会自动成为弹性（flex）项目。

1 2 3 4

上面的元素代表一个灰色 flex 容器内的四个蓝色 flex 项目。

实例 1 2 3 4

亲自试一试

用于弹性项目的属性有：

order flex-grow flex-shrink flex-basis flex align-self order 属性

order 属性规定 flex 项目的顺序。

1 2 3 4

代码中的首个 flex 项目不必在布局中显示为第一项。

order 值必须是数字，默认值是 0。

实例

order 属性可以改变 flex 项目的顺序：

1 2 3 4

亲自试一试

flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

1 2 3

该值必须是数字，默认值是 0。

实例

使第三个弹性项目的增长速度比其他弹性项目快八倍：

1 2 3

亲自试一试

flex-shrink 属性

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

1 2 3 4 5 6 7 8 9

该值必须是数字，默认值是 0。

实例

不要让第三个弹性项目收缩得与其他弹性项目一样多：

1 2 3 4 5 6 7 8 9 10

亲自试一试

flex-basis 属性

flex-basis 属性规定 flex 项目的初始长度。

1 2 3 4 实例

将第三个弹性项目的初始长度设置为 200 像素：

1 2 3 4

亲自试一试

flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

实例

使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素：

1 2 3 4

亲自试一试

align-self 属性

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

1 2 3 4

在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-self 属性：

实例

把第三个弹性项目对齐到容器的中间：

1 2 3 4

亲自试一试

实例

将第二个弹性项目在容器顶部对齐，将第三个弹性项目在容器底部对齐：

1 2 3 4

亲自试一试

使用 Flexbox 的响应式图库

使用 flexbox 创建响应式图像库，该图像库根据屏幕大小在四幅、两幅或全宽图像之间变化：

亲自试一试

使用 Flexbox 的响应式网站

使用 flexbox 创建响应式网站，其中包含弹性导航栏和弹性内容：

亲自试一试

CSS Flexbox 属性

下表列出了与 flexbox 一起使用的 CSS 属性：

属性描述 display 规定用于 HTML 元素的盒类型。 flex-direction 规定弹性容器内的弹性项目的方向。 justify-content 当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。 align-items 当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。 flex-wrap 规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。 align-content 修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。 flex-flow flex-direction 和 flex-wrap 的简写属性。 order 规定弹性项目相对于同一容器内其余弹性项目的顺序。 align-self 用于弹性项目。覆盖容器的 align-items 属性。 flex flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。 CSS Box Sizing CSS 媒体查询 CSS 参考手册 CSS 实例 CSS 测验 CSS 课外书

使用条款隐私条款技术支持：赢科蒙ICP备06004630号

【本文地址】

CSS Flexbox

CSS Flexbox

今日新闻

推荐新闻