分享

flex

 印度阿三17 2021-03-24

flex布局


基础概念的理解

  1. 容器 container

在这里插入图片描述

  1. 项目 item

    在这里插入图片描述

容器属性

  1. flex-dirrction

  2. flex-wrap

  3. justify-content

  4. align-items

  5. align-content

    1. flex-dirrction 排列顺序属性

    在这里插入图片描述

    2. flex-wrap item是否换行(子元素是否换行)

    在这里插入图片描述

    3. justify-content横向对齐的方式

在这里插入图片描述

4. align-items 纵向对其方式

在这里插入图片描述

5. align-content 换行情况下 每行跟每行的排列顺序

在这里插入图片描述


项目属性

  1. order

  2. flex-grow

  3. flex-shrink

  4. flax-basis — 我认为蛋用没有不用学

  5. flex(2,3,4的简写形式)

  6. flex-self

    order

    在这里插入图片描述

    flex-grow

    在这里插入图片描述

    flex-shrink

    在这里插入图片描述

    flex-self ( 覆盖父级配备的align-item属性 )

    在这里插入图片描述

学习与https://www.bilibili.com/video/BV1t7411E7tn?t=2256 B站的耕耕技术宅图片出处也是这里

来源:https://www./content-4-901551.html

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多