flex布局开发

2019-11-25 16:08:28来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

flex布局开发

flex布局开发

  1. 布局原理

    • flex时flexible Box的缩写,意为“弹性布局”,用来为盒子模型提供最大的灵活性,任何一个容器都可以定位flex布局
    • 【注意】
      • 当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效
      • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
  2. 常见父项属性

    • flex-direction:设置主轴的方向

      • flex-direction属性值决定主轴的方向(及项目的排列方向)

      • 【注意】

        • 主轴和侧轴是会变化的,就看flex-diretion设置谁为主轴,剩下的就是侧轴,子元素是跟着主轴来排列的

          属性值 说明
          row 默认值从左到右
          row-reverse 从右到左
          column 从上到下
          column-reverse 从上到下
    • justify-content:设置主轴上的子元素排列方式

      • 【注意】

        • 使用这个属性之前要确定好主轴是哪个

          属性值 说明
          flex-start 默认值 从头部开始 如果主轴是x轴,则从左到右
          flex-end 从尾部开始排列
          center 在主轴居中对齐
          space-around 平分剩余空间
          space-between 先两边贴边 在平分剩余空间
    • flex-wrap:设置子元素是否换行

      • 属性值 说明
        nowrap 默认值,不换行
        wrap 换行
    • align-content:设置侧轴上的子元素的排列方式(多行)

      属性值 说明
      flex-start 从上到下
      flex-end 从下到上
      center 垂直居中
      strech 拉伸(默认值)【项目不要给高度】
      space-around 子项在侧轴平分剩余空间
      stretch 设置子项元素高度平分元素高度
    • align-items:设置侧轴上的子元素排列方式(单行)

      属性值 说明
      flex-start 从上到下
      flex-end 从下到上
      center 垂直居中
      strech 拉伸(默认值)【项目不要给高度】
    • flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap

  3. 子项常见属性

    • flex子项占的分数

      .item{
      flex:<number>;
      }
    • align-self控制子项子级在侧轴的排列方式

      • align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

      默认值是auto,表示继承父元素align-items属性,如果没有父元素,则等同于stretch

    • order属性定义子项的排列顺序(前后顺序)

      • 数值越小排列越靠前

原文链接:https://www.cnblogs.com/SSPOFA/p/11931338.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:弹幕效果

下一篇:css的position属性