美文网首页
flex布局

flex布局

作者: 莎氏笔丫 | 来源:发表于2020-06-19 15:30 被阅读0次

    flex布局中存在两个重要的概念,一个是轴,一个是容器

    image.png

    如上图所示,轴又分为主轴和交叉轴两个部分。

    1. 主轴
      justify-content属性决定了子容器沿着主轴的排列方向,而主轴的方向又是有flex-direction属性决定的。
      主轴的开始端由flex-start表示,结束端由flex-end表示。
    2. 交叉轴
      【交叉轴方向为从左到右或者从上到下】,起始端由flex-start表示,结束端由flex-end表示
      因此当flex-direction定下的时候,主轴与交叉轴的方向就已经确定下来了。
      flex-direction总共有4个值
    3. row,默认值,从左向右
    4. column,从上向下
    5. row-reverse,从右向左
    6. column-reverse,从下向上

    容器

    容器存在这样的特点,父容器可以设置子容器的排列方式,子容器也可以设置自己的排列方式,如果子容器设置了则以子容器为准。
    
    1. 父容器
    • 设置子容器沿主轴排列【justify-content】
      【flex-start】起始端对齐
      【center】居中
      【flex-end】末尾端对齐
      【space-around】首尾的间距是其他的一半
      【space-between】首尾与父容器相切
    • 设置子容器沿交叉轴排列【align-items】
      【flex-start】起始端对齐
      【flex-end】末尾端对齐
      【center】居中
      【baseline】沿着首行文字的基线对齐
      【stretch】沿着交叉轴方向拉伸至于父容器高度相同
    1. 子容器
      在主轴上如何伸缩【flex】
      在交叉轴上如何排列【align-self】,与align-items一致,只不过是在子容器上设置

    flex进阶

    1. 父容器
    • 设置换行【flex-wrap】
      【wrap】
      【nowrap】
      【wrap-reverse】逆序换行,指的是沿着交叉轴的反方向换行
    • 轴向与换行的复合属性【flex-flow=flex-direction+flex-wrap】
      【row wrap】
      【column nowrap】
    • 设置多行沿交叉轴的对齐方式【align-content】
      【flex-start】起始端对齐
      【center】居中
      【flex-end】末尾端对齐
      【space-around】均匀分布
      【space-between】首尾两端相切
      【stretch】拉伸对齐
    1. 子容器
    • 设置基准大小【flex-basis】,主轴为横向时代表宽度,主轴为纵向时代表高度
    • 设置扩展比例【flex-grow】,在flex-basis的基础上,剩余部分按照比例分
    • 设置收缩比例【flex-shrink】,在flex-basis的基础上,超出部分按照比例收缩
    • 设置子容器顺序【order】,默认值为0,可以为负值,值越小排越前

    相关文章

      网友评论

          本文标题:flex布局

          本文链接:https://www.haomeiwen.com/subject/ivqetktx.html