zoukankan      html  css  js  c++  java
  • Flex 布局排版总结

    1.display: flex / inline-flex; 

      flex:  作为弹性盒自适应屏幕

      inline-flex:作为弹性盒自适应当前块级元素所包含的子级块

      例:flex,子级块宽度自动相加,有超出部分

      2.例:inline-flex, 子级块自动宽度相加, 全部以子级块的内容为主,不会有超出部分

    2. flex-direction 主轴的方向

    row : 从左到右

    row-reverse: 从右到左

    column: 从上到下

    column-reverse: 从下到上

    3. flex-warp 一行排版不下情况下使用

      nowrap: 不换行

      warp: 换行

      warp-reverse: 换行,反向, 最后一行在最上面

    4.flex-flow: flex-direction 与flex-warp 的合并, 如"row nowarp" 

    5.justify-content: 主轴对齐方式

      flex-start: 左对齐

      flex-end:右对齐

      center: 居中对齐

      space-between: 两端对齐, 每个子模块间隔相等

      space-around: 两端对齐,两端都有边距, 每个子模块间隔相等

    6. align-item 与主轴垂直的对齐方式

      flex-start: 左对齐

      flex-end:右对齐

      center: 居中对齐

      space-between: 两端对齐, 每个子模块间隔相等

      space-around: 两端对齐,两端都有边距, 每个子模块间隔相等

      stretch:  拉伸以自适应整个屏幕

      

  • 相关阅读:
    几种常见的树:排序二叉树、平衡二叉树、红黑树、B+树
    网关高可用
    微服务网关GateWay
    微服务网关Zuul
    客户端容错保护Alibaba Sentinel
    客户端容错保护Hystrix
    服务调用Feign
    服务注册与发现Consul
    服务负载均衡调用Ribbon
    服务注册Eureka高级
  • 原文地址:https://www.cnblogs.com/zxhome/p/8485446.html
Copyright © 2011-2022 走看看