zoukankan      html  css  js  c++  java
  • flex布局常用样式

     
    // flex容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
    // flex 左对齐 顶对齐
    .flex{
      displayflex;  //
      align-itemsflex-start;  // 项目在交叉轴上如何对齐
      justify-contentflex-start;  // 项目在主轴上的对齐方式
    }
    // flex 左右居中,上下居中
    .flexCenter {
      displayflex;  //
      align-itemscenter ;  // 项目在交叉轴上如何对齐
      justify-contentcenter;  // 项目在主轴上的对齐方式
    }
    .flex-column{
      displayflex;
      flex-directioncolumn// 项目主轴的排列方向。column:主轴为垂直方向,起点在上沿。
      align-itemsflex-start;
      justify-contentflex-start;
    }

    // 垂直居中布局
    .flexClsDirectcolumn {
      displayflex;
      flex-directioncolumn;
      flex-wrap:wrap;
      align-items:flex-start;
      justify-contentcenter;
    }

    .flexClsDirectcolumn > div{
      white-spacenowrap;
    }

    // 左对齐布局
    .flexClsDirectLeft {
      displayflex;
      flex-directionrow;
      flex-wrap:nowrap;
      justify-contentflex-start;
    }
    // 左对齐布局,换行
    .flexClsDirectwWrapLeft {
      displayflex;
      flex-directionrow;
      flex-wrap:wrap;
      justify-contentflex-start;
    }
    // 居中布局,不换行自动撑开
    .flexClsLeftLinkAutoWid {
      displayflex;
      flex-directionrow;
      flex-wrapnowrap;
      justify-contentspace-around;
      align-contentflex-start
    }
    // 左对齐布局,换行不撑开,直接紧跟上一个换行
    .flexClsDirectwWrapLeftStart {
      displayflex;
      flex-directionrow;
      flex-wrap:wrap;
      justify-contentflex-start;
      align-contentflex-start
    }
    // 右对齐布局
    .flexClsDirectRight {
      displayflex;
      flex-directionrow;
      flex-wrap:nowrap;
      justify-contentflex-end;
    }
    // 两端对齐,不换行,项目之间的间隔都相等
    .flexClsNowrapSpcBtw {
      displayflex;
      flex-directionrow;
      flex-wrap:nowrap;
      justify-contentspace-between;
    }
    // 两端对齐,不换行,每个项目两侧的间隔相等
    .flexClsNowrapSpcArd {
      displayflex;
      flex-directionrow;
      flex-wrap:nowrap;
      justify-contentspace-around;
    }
    // 两端对齐,超出换行,每个项目两侧的间隔相等
    .flexClsWrapSpcArd {
      displayflex;
      flex-directionrow;
      flex-wrap:wrap;
      justify-contentspace-between;
    }
    .flex1{
      flex1;
    }

    // 用于垂直布局,固定一个div高度,另一个div填充剩余的高度
    .flexColumBox { 
      displayflex;
      flex-flowcolumn;
      align-itemsstretch;
    }
    // 固定高度
    .fixedHig{
      flex0;
    }
    // 自动填充剩余区域
    .autoFullHig{
      flex1;
    }

    // 用于水平布局,固定一个div的宽度,另一个div填充剩余的宽度 //父级flex
    .flexWidthBox{
      displayflex;
    }
    // flex属性是flex-grow(放大比例), flex-shrink(缩小比例) 和 flex-basis(根据剩余空间进行分配计算)的简写,默认值为0 1 auto。后两个属性可选。
    // 自适应宽度的,css
    .autoFullWidth{
      flex:1 1 auto;
    }
    // 固定宽度,不放缩
    .fixWidth{
      flex:0 0 auto;
    }





  • 相关阅读:
    spark 读取mongodb失败,报executor time out 和GC overhead limit exceeded 异常
    在zepplin 使用spark sql 查询mongodb的数据
    Unable to query from Mongodb from Zeppelin using spark
    spark 与zepplin 版本兼容
    kafka 新旧消费者的区别
    kafka 新生产者发送消息流程
    spark ui acl 不生效的问题分析
    python中if __name__ == '__main__': 的解析
    深入C++的new
    NSSplitView
  • 原文地址:https://www.cnblogs.com/luoxuemei/p/13322711.html
Copyright © 2011-2022 走看看