弹性布局--Flexbox

前端_学习之路

于 2025-04-25 14:23:29 发布

阅读量845

点赞数 13

分类专栏： H5 文章标签： css3

本文链接：https://blog.csdn.net/wl_qianduan/article/details/147506148

版权

H5 专栏收录该内容

3 篇文章

订阅专栏

CSS3 的弹性盒子布局（Flexbox）是一种强大的布局模型，用于更轻松地创建复杂的布局，尤其适合响应式设计。以下是其详细介绍：

基本概念

Flex 容器（Flex Container）： 通过将display属性设置为 flex 或 inline-flex 创建的元素，成为弹性容器。
Flex 项目（Flex Item）： 弹性容器的直接子元素，会以弹性方式排列、对齐和调整大小。
主轴（Main Axis）： Flex 项目排列的方向，可以是水平或垂直，由 flex-direction 属性决定。
交叉轴（Cross Axis）： 与主轴垂直的方向。

容器属性

flex-direction：用于指定主轴的方向，有以下属性值。
- row（默认值）： 主轴为水平方向，起点在左端。
- column： 主轴为垂直方向，起点在上沿。
- row-reverse： 主轴为水平方向，起点在右端。
- column-reverse： 主轴为垂直方向，起点在下沿。
flex-wrap：控制 Flex 项目是否换行，有以下属性值。
- nowrap（默认值）： 不换行，当主轴空间不足时，项目尺寸会调整。
- wrap： 换行，第一行在上面。
- wrap-reverse： 换行，第一行在下面。
flex-flow：是 flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap。
justify-content：用于控制 Flex 项目在主轴上的对齐方式，属性值如下。
- flex-start（默认值）： 左对齐（主轴为水平方向时）或上对齐（主轴为垂直方向时）。
- flex-end： 右对齐或下对齐。
- center： 居中对齐。
- space-between： 两端对齐，项目之间的间隔相等。
- space-around： 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。
align-items：控制 Flex 项目在交叉轴上的对齐方式，属性值如下。
- flex-start： 交叉轴的起点对齐。
- flex-end： 交叉轴的终点对齐。
- center： 居中对齐。
- baseline： 项目的第一行文字对齐。
- stretch（默认值）： 如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content：设置容器内各个项目在垂直方向的排列方式，只有在设置了 flex-wrap 属性时才会起作用，属性值如下。
- stretch： 拉伸占满，适应容器。
- flex-start： 位于容器开头。
- flex-end： 位于容器结尾。
- center： 位于容器中心。
- space-between： 行间留白，上下不留白。
- space-around： 行间、上下都留白。

项目属性

order：定义项目的排列顺序，数值越小，排列越靠前，可以为负值。
flex-grow：定义项目的放大比例，默认值为0（不放大），如果空间剩余，浏览器会根据flex-grow的值来分配给对应的元素放大之后的空间大小。
flex-shrink：定义项目的缩小比例，默认值为1（不缩小），如果空间不够，浏览器会根据flex-shrink的值来分配给对应的元素缩小之后的空间大小。
flex-basis：定义在分配空间之前，项目占据的主轴空间大小，默认值为auto，即项目的原本大小，也可以设置为具体的数值（如px）来控制大小。
flex：是flex-grow、flex-shrink和flex-basis的缩写。
flex:1 属于一个简写属性，它是 flex-grow、flex-shrink 和 flex-basis 这三个属性的缩写，等同于 flex: 1 1 0
- flex-grow：此属性用于定义元素在剩余空间中可增长的比例。当设置为 1 时，意味着该元素会按比例分配剩余空间。
- flex-shrink：该属性规定元素在空间不足时可收缩的比例。设为 1 表明该元素会按比例收缩。
- flex-basis：它定义了元素在分配多余空间之前的初始大小。设置成 0 表示元素的初始大小为 0。
align-self：可让某一个元素脱离父元素的设定，拥有单独的对齐方式，属性值与align-items相同。

兼容性

弹性布局（Flexbox）的兼容性整体较好，但在不同浏览器及其不同版本中存在一定差异。以下是常见浏览器对弹性布局的兼容情况：

桌面浏览器

Chrome： 自 Chrome 21（2012 年发布）开始支持无前缀的display: flex，对于较旧版本，Chrome 4-20 需要使用-webkit-前缀。当前的 Chrome 版本对弹性布局有很好的支持。
Firefox： 从 Firefox 22（2013 年发布）起支持无前缀的display: flex，Firefox 18-21 需要使用-moz-前缀。现在的 Firefox 版本对弹性布局支持完备。
Safari： Safari 6.1-8 需要使用-webkit-前缀，从 Safari 9（2015 年发布）开始支持无前缀的display: flex。
Opera： Opera 12.1 开始支持无前缀的display: flex，之前版本（15-17）需要使用-webkit-前缀。
Internet Explorer： IE 对弹性布局的支持较差。IE 10 支持带-ms-前缀的旧版 Flexbox 语法，而 IE 11 虽然支持无前缀的display: flex，但存在一些布局问题和兼容性问题，例如对align-items: baseline支持不好。

移动浏览器

iOS Safari： 从 iOS 7.1 开始支持无前缀的display: flex，iOS 6.1-7 需要使用-webkit-前缀。
Android Browser： Android 4.4 及以上版本支持无前缀的display: flex，Android 4.0-4.3 需要使用-webkit-前缀。
Chrome for Android： 支持情况与桌面版 Chrome 类似，有较好的兼容性。

兼容性处理建议

使用前缀： 为了确保在旧版本浏览器中正常显示，可以使用 Autoprefixer 工具，它能根据目标浏览器自动添加必要的前缀。
渐进增强： 先构建一个基础的、在所有浏览器中都能正常显示的布局，然后为支持 Flexbox 的现代浏览器添加弹性布局样式。

提供替代方案： 对于不支持 Flexbox 的浏览器，可以使用浮动、表格布局或绝对定位等传统布局方法作为替代。
例如，为了使弹性布局代码在不同浏览器都有较好兼容性，可以这样编写 CSS 代码：

.flex-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}