flex

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.icode9.com/content-4-901551.html

(0)

相关推荐