flex弹性盒模型和兼容

圈圈又叉叉
1,180 阅读7分钟

flex布局和传统布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

在2009年，就提出了弹性盒模型的概念，并且具有简便，完整，响应式的特点。由于响应式的特点突出，它经常被用手机端的页面的布局。遗憾的是，在手机端它的兼容性，国内大部分主流浏览器都是挂掉的，所以我们需要做一个兼容，如图：（鸡肋的兼容性啊~）

rwzAZ8.png

flex容器

在父级中只要要加了displays:flex /display:inline-flex 就让这个父级变成一个弹性盒模型的容器，那么它的布局模式就和我们传统的文档流布局完全不一样，它主要是以一个主轴和侧轴的概念进行布局。元素先根据主轴排列，侧轴为辅助排列。

r0Sh9J.png

在弹性盒模型的容器下面的子级会按照弹性布局排列，但是孙级元素则不会受到父级弹性模型布局的影响。

flex容器属性

flex容器属性内容
flex-direction弹性盒模型主轴设置
flex-wrap子元素超出父级范围后，是否换行
flex-flow复合属性：flex-flow: flex-direction,flex-wrap
justify-content定义元素在主轴上的对齐方法
align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
align-content行对齐方式

  • flex-direction

    • 弹性盒模型主轴设置，设于设置主轴，主轴会影响子级元素的排列方式

    • 属性：

      • 横向row(默认值) 从左向右排列 (侧轴：从上到下)
      • 反横向row-reverse 从右向左排列(侧轴：从上到下)
      • 竖向column 从上到下进行排列 (侧轴：从左到右)
      • 反竖向column-reverse 从下到上进行排列(侧轴：从左到右)

      r0GXcj.png

  • flex-wrap

    • 在弹性盒模型中，元素是不会默认换行的，如果想要它换行就需要设置这个属性
    • 属性：
      • nowrap (默认值) 不换行
      • wrap 正常换行
        • r0Jk34.jpg
      • wrap-reverse 反向换行
        • r0JmHx.jpg
    • 注意：当元素超出父级宽度的换行时候，如果设置nowrap 就是不换行。如果设置wrap 正常换行的话，需要用到辅助作用的侧轴。正方向换行,从上到下或从左到右，如果是反向换行wrap-reverse，则是从从下到上或从右到左。

  • flex-flow

    flex-direction，flex-wrap的复合属性，通过这个属性可以同时设置flex-direction，flex-wrap。例如：

    flex-flow:flex-direction,flex-wrap;

  • justify-content

    主轴元素的排列方式。这里需要引入一个富余空间的概念。当父级元素减去子级自己的所占的空间(width/height + margin + padding + border)之后，剩下的空间就是剩余空间。剩余空间再分配给子元素，得出不同的排列方式

    • 属性：

      • flex-start(默认值) 元素沿着主轴的开始方向进行排列，富裕空间保持在主轴方向的结束
      • flex-end 元素排列在主轴方向的结束位置，富裕空间保持在主轴方向的开始位置
      • center 元素排列在主轴中间，富裕空间平均分布在两侧
      • space-between 子级平均分配在主轴上，富裕空间平均分派在子级之间
      • space-around 富裕空间平均分配在子级的左右两边

      r0G7Af.png

  • align-items

    属性定义flex子项在flex容器的当前行的**侧轴（纵轴）**方向上的对齐方式

    • stretch(默认值): 拉伸
    • flex-start：交叉轴上起点对齐
    • flex-end：交叉轴上终点对齐
    • center：交叉轴居中对齐
    • baseline：基线对齐，根据交叉轴文字基线进行对齐

r0JRaV.png

  • align-content

    用于定义多根主轴线之间的排列方式，如果只有一条主轴线那么就不起作用啦~

    属性解析
    stretch默认值。元素被拉伸以适应容器。
    center元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。
    flex-start元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。每一行都紧靠住前面一行。
    flex-end元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。每一行都紧靠住前面一行。
    space-between元素位于各行之间留有空白的容器内。
    space-around元素位于各行之前、之间、之后都留有空白的容器内。
    space-evenly元素之间空白平均

r0YLOs.png

flex子级容器属性

属性描述
order定义项目排列顺序，数值越小，排列越靠前，默认为0，接受负值。负值排再最前面
flex-grow属性定义项目的放大比例，默认为0
flex-shrink属性定义了项目的缩小比例，默认为1
flex-basis初始值
flex伸缩性设置
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto

  • order

    每个子项的排列顺序，数字越小，就排在主轴的前列，越来大就排的越后，设置负值也是可以的

  • flex-grow

    每个子项目放大的比例。在有剩余空间的情况下，如果flex-grow的数字越大就表示该子元素占有的剩余空间越大。例如其他子元素为1的情况下，有个是2的。那么占2分的空间的子元素的范围就大一倍。如果是默认值0的话，就是默认即使有剩余空间也不占用。

    r0UKLd.png

  • flex-shrink

    定义每个子项目的缩小比例，数值越大，压缩的范围就越大。

    如果所有子项目的都有相同的值，例如默认1，那么当剩余空间不足的时候，将会等比例缩小，如有其中一个是0 其他是1，那么为0的那个子项目的空间将不会变小。

    r0U2y4.jpg

  • flex-basis

    用于设置子项目的初始值。如果父级的空间放不下，会影响初始值，会对元素进行压缩。如果设置了初始值，那么初始值的优先级会大于这个元素的width。会优先显示初始值的大小。

  • flex

    flex属性是flex-grow, flex-shrink 和 flex-basis的复合属性，默认值属性的初始默认值即0 1 auto。后两个属性可选

  • align-self

    属性允许单个项目有与其他项目不一样的对齐方式。例如在一行中，你想第3个从主轴下面开始排列，那么你就可以使用这个样式。

    属性描述
    auto自动，默认
    stretch伸缩
    center中心
    flex-start主轴开始
    flex-end主轴结束
    baseline文本基线

r0deDH.png

  • 特别的margin

    子元素还能设置margin 值。

    子级的上下margin auto 会等分父级上下的富裕空间

    子级的左右margin auto 会等分父级左右的富裕空间

    所以如果一个子元素设置了margin: auto 那么这个元素就可以垂直左右居中啦~

老版本兼容flex

就如我们开头所说的，国内很多手机浏览器对flex都不够友好。那么我们就需要做一点兼容。一般使用到display:box的来设置。它和flex其实非常相似。

  • 容器设置
    • display: -webkit-box; --Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 基于 Webkit 开发。
    • display: -moz-box; --代表firefox浏览器私有属性。
    • display: -ms-box;--代表IE浏览器私有属性。
    • display: -o-box;--代表Opera私有属性
  • 属性设置
    • box-orient：horizontal || vertical 水平还是垂直排列，类似flex-direction
    • box-direction：normal || reverse 是否颠倒顺序，类似flex-direction：row-severse
    • box-pack：start || end || center || justify 主轴方向对齐，类似justify-content
    • box-align：start || center || end 交叉轴方向对齐，类似align-items
  • 子项目属性设置
    • box-flex：number 类似 flex-grow
    • box-ordinal-group：number 类似于 order

    以上的属性设置都需要加前缀 -webkit- 、-moz- 、-ms-、-o-做浏览器的兼容。

    注意

    ​ 这些属性要设置在display:flex 前面。假设，一个不兼容flex浏览器读取css 先执行display:box的代码，他会正常显示，执行到display:flex 不识别，那么也不影响它后面的显示，如果是兼容flex读到display:flex 那么flex的设置会覆盖box的设置。

老鸡汤

​ 冲呀打工人！~

avatar
文章
阅读
粉丝