zoukankan      html  css  js  c++  java
  • flex实验总结

    1、父元素

    .box{
         display:flex;
         flex-direction: column;//铺满垂直排列
         flex-direction: column-reverse;//铺满垂直反向排列
         flex-direction: row;//默认排列
         flex-direction: row-reverse;//反向排列
    }
    
    .box{
         display:flex;
         flex-wrap: nowrap;//不换行
         flex-wrap: wrap;//默认换行
         flex-wrap: wrap-reverse;//反向换行
    }
    
    .box {
      flex-flow: <flex-direction> || <flex-wrap>;//前面两种的简写默认值为row nowarp
    }
    .box{
         display:flex;
         justify-content: flex-start;//左对齐
         justify-content: flex-end;//右对齐
         justify-content: center;//居中
         justify-content: space-between;//平均分散
         justify-content: space-around;//平均外边距
    }
    
    .box{
         display:flex;
         align-items: stretch;//自定义铺满高度
         align-items: baseline;//文字按照基线对齐
         align-items: center;//垂直居中
         align-items: flex-end;//垂直下
         align-items: flex-start;//垂直上
    }
    
    .box{
         display:flex;
         align-content: stretch;//垂直铺满
         align-content: space-around;//同样边距
         align-content: space-between;//上下满外边距
         align-content: center;//垂直居中
         align-content: flex-end;//垂直居下
         align-content: flex-start;//垂直居上
    }
    

    2、子元素

    .item {
      order: <integer>;//子元素的数值越大,越靠前
    }
    .item {
      flex-grow: <number>; //放大比例,根据数字放大
    }
    
    .item {
      flex-shrink: <number>;//缩小比例,根据数字缩小
    }
    
    .item {
      flex-basis: <length> | auto;//子元素的大小,可以设置宽度
    }
    
    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]//flex-growflex-shrink 和 flex-basis的简写
    }
    
    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;//允许单个项目有与其他项目不一样的对齐方式
    }
    

      

  • 相关阅读:
    提高自己应用性能的总结架构篇
    iOS 开发调试技巧
    iOS (UIButton封装)仿糯米首页缩放“按钮”效果
    计算机网络中的TCP/UDP协议到底是怎么回事(二)
    计算机网络中的TCP/UDP协议到底是怎么回事(一)
    iOS一分钟学会环形进度条
    View Controller 视图管理总结
    iOS-自定义导航栏后侧滑返回功能失效
    iOS缓存框架-PINCache解读
    YYCache 设计思路
  • 原文地址:https://www.cnblogs.com/huangqiming/p/6245931.html
Copyright © 2011-2022 走看看