CSS Flexbox |
您所在的位置:网站首页 › css弹性盒子垂直居中 › CSS Flexbox |
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 课外书W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有,保留一切权利。 使用条款 隐私条款 技术支持:赢科 蒙ICP备06004630号 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |