flex 弹性盒子布局

发布时间：2023-03-18 14:04:47 所属栏目：教程来源：

导读：flex 弹性盒子布局介绍
flex 布局可以说是目前为止最好用的布局方式，但是目前还稍微有一点受到兼容性的影响，它对 IE9 不兼容，但是在未来随着 IE9 逐渐被淘汰，我相信，它一定会在布局这块大放异彩，因为它实现了

flex 弹性盒子布局介绍
flex 布局可以说是目前为止最好用的布局方式，但是目前还稍微有一点受到兼容性的影响，它对 IE9 不兼容，但是在未来随着 IE9 逐渐被淘汰，我相信，它一定会在布局这块大放异彩，因为它实现了太多我们曾经不能实现的布局效果，而且只要简单的几个属性就可以搞定！

1. 官方解释
一种弹性盒模型布局方式。

2. 解释
flex 布局也叫弹性布局，它的特点是可以实现子元素的自适应屏幕大小，可以自由的分配每个 Box 需要占用的空间比例。我们把父元素称作为：容器。子元素称作为：项目。容器默认存在两个轴：水平主轴（mian axis）、垂直交叉轴（cross axis）。左侧是主轴的开始点，右侧是主轴的结束点，垂直方向上顶部是交叉轴的开始位置，底部是交叉轴的结束位置。

3. 语法
通过下面两种形式都可以实现弹性盒模型“容器”的初始化。

块级弹性模块。
div{
display:flex;
}
内联弹性模块。
div{
display:inline-flex;
}
容器包含属性点击查看详细

参数名称   参数   解释
flex-direction   row | row-reverse | column | column-revers   定义主轴上项目的的方向
flex-wrap   Nowrap | wrap | wrap-reverse   定义项目如何换行
flex-flow   < flex-direction > | < flex-wrap >   前两个属性的简写
justify-content   flex-start | flex-end | \center | space-between | space-around   定义主轴(水平)上项目的对齐方式
align-items   flex-start | flex-end | center | baseline | stretch   定义交叉（垂直）方向上项目的对齐方式
align-content   flex-start | flex-end | center | space-between | space-around | stretch   多轴(多行)下项目的（水平）对齐方式
项目包含属性点击查看详细

参数名称   参数   解释
flex-grow   number
flex-shrink   number
flex-basis   像素
flex   ||
order   number
align-self   auto | flex-start | flex-end | center | baseline | stretch   修改单个项目
4. 兼容性
IE   Edge   Firefox   Chrome   Safari   Opera   ios   android
10+   12+   28+   4+   6.1+   12.1+   7+   4.4
5. 实例
创建一个弹性盒模型，容器为块级，项目自适应。
.demo{
display:flex
}
创建一个行内盒模型。
.demo{
display:inline-flex
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!