• 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:  拉伸以自适应整个屏幕

      

  • 相关阅读:
    软件工程概论课堂测试一
    每日站立会议个人博客五
    每日站立会议个人博客四
    典型用户以及场景分析
    每日站立会议个人博客三
    每日站立会议个人博客二
    每日站立会议个人博客一
    软件工程概论第三周学习进度条
    软件工程概论第二周学习进度条
    四则运算1
  • 原文地址:https://www.cnblogs.com/zxhome/p/8485446.html
Copyright © 2020-2023  润新知