当前位置: 首页 > 文档资料 > CSS3 入门教程 >

flex 布局介绍

优质
小牛编辑
127浏览
2023-12-01

flex 布局介绍

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

1. 官方解释

一种弹性盒模型布局方式。

2. 慕课解释

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

3. 语法

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

  1. 块级弹性模块。
div{
    display:flex;
}
  1. 内联弹性模块。
div{
    display:inline-flex;
}

容器包含属性 点击查看详细

参数名称参数解释
flex-directionrow | row-reverse | column | column-revers定义主轴上项目的的方向
flex-wrapnowrap | wrap | wrap-reverse定义项目如何换行
flex-flow< flex-direction > | < flex-wrap >前两个属性的简写
justify-contentflex-start | flex-end | \center | space-between | space-around定义主轴(水平)上项目的对齐方式
align-itemsflex-start | flex-end | center | baseline | stretch定义交叉(垂直)方向上项目的对齐方式
align-contentflex-start | flex-end | center | space-between | space-around | stretch多轴(多行)下项目的(水平)对齐方式

项目包含属性 点击查看详细

参数名称参数解释
flex-grownumber
flex-shrinknumber
flex-basis像素
flex||
ordernumber
align-selfauto | flex-start | flex-end | center | baseline | stretch修改单个项目

4. 兼容性

IEEdgeFirefoxChromeSafariOperaiosandroid
10+12+28+4+6.1+12.1+7+4.4

5. 实例

  1. 创建一个弹性盒模型,容器为块级,项目自适应。
.demo{
    display:flex
}

  1. 创建一个行内盒模型。
.demo{
    display:inline-flex
}

6. 小结

  1. 需要父元素首先设置成 dislpay:flex 这样子元素才能起作用,而子元素的 floatclearvertical-align 属性都失去作用。

  2. 子元素可以使用 position 来脱离 flex 布局。