阅读 237

深入理解flex布局

前言

随着电子产品的快速迭代,传统的前端布局越来越难以是配多端的屏幕显示,无论是table布局还是float布局在移动端适配上都有着很大的局限性。09年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局,flex的应用可以极大程度上补充传统布局的不足之处。

flex布局是什么

Flex是flex box的缩写意为弹性布局,用来为盒状模型提供最大的灵活性。 特点:采用flex布局的元素成为flex容器,他的所有子元素自动成为容器的成员。 借用腾讯云社区的一张图

由图中我们可以看出flex布局其实是将我们的元素看成一个一左上角为原点的直角坐标系

如何使用flex布局

  • 主轴(flex布局以主轴和交叉轴为主的。理解他们是掌握flex布局的基础。)

    主轴由flex-direction定义他可以去四个值:row row-reverse column column-reverse

    1. row 或者 row-reverse,你的主轴将沿着 inline 方向延伸。
    2. column 或者 column-reverse,你的主轴会沿着上下方向延伸,及block方式。
    3. 交叉轴垂直于主轴,所以如果你的flex-direction (主轴) 设成了 row row-reverse则交叉轴为垂直方向
    4. 如果flex-direction (主轴) 设成了 column column-reverse则交叉轴为水平方向。
  • 按需固定元素位置(容器内元素属性设置)

    1. justify-content - 控制主轴上所有 flex 项目的对齐(相比margin auto要方便的多)。
    2. align-items - 控制交叉轴上所有 flex 项目的对齐(有了这个属性不用再考虑父元素有多高top是多少了)。
    3. align-self - 控制交叉轴上的单个 flex 项目的对齐。
    4. align-content - 控制“多条主轴”的 flex 项目在交叉轴的对齐(要使得 align-content 生效,flex 容器的height要大于 flex 项目的可视内容。然后它会将所有的 flex 项目打包成一块之后再对齐剩下的空间)。
  • 应对页面弹性伸缩(容器内元素属性设置)

    1. flex-shrink/grow: 比例缩小/放大

      flex-grow:flex-grow属性默认等于0,即使用本来的宽度,不拉伸。等于1时,就表示该项目宽度拉伸,占据当前行的所有剩余宽度。

      flex-shrink:flex-shrink的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。

    2. flex-basis(初始值:auto):指定了item在flex布局中的初始大小(前提是不改变盒模型的box-sizing),所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。另外其设置的优先级高于width。

  • flex 属性总结(这里只做简要说明,详细请查看mdn文档)

    1. 容器属性 flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式

      flex-direction:属性决定主轴的方向

      flex-wrap:属性决定轴线排不下,如何换行

      justify-content:属性决定项目在主轴上的对齐方式

      align-items:属性决定项目在交叉轴上的对齐方式

      align-content:属性定义了多根轴线的对齐方式(一条轴线时不起作用)

    2. 项目的属性

      order:定义项目的排列项目

      flex-grow:定义项目的放大

      flex-shrink:定义项目的缩小

      flex-basis:定义项目的基本大小

      flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。

      align-self:单个项目定义的属性,可覆盖align-items属性。

为什么要使用flex布局

  1. flex布局的思想简单明了初学者很容易上手
  2. 他可以很好的适应多端布局(响应各种页面)
  3. 为盒状模型提供最大的灵活性

总结

随着当前电子产品的快速发展,适应各种设备的显示已成为我们前端开发者必备的技能。5-10年前我们只用考虑几种的设备适配,到如今的十几种细分来说甚至几十种,这就需要我们掌握一种可以轻松实现页面响应式布局的技能,而flex便可以满足我们当前的需求。

注意:

Internet Explorer 10: 使用-ms-前缀;

UC浏览器: 使用-webkit-前缀。

现在,IE11 已经支持display: flex,但是在使用的时候会有一些bug。

关注下面的标签,发现更多相似文章
评论