伸缩布局

  • display: flex (父盒子设置为弹性布局)

  • flex-direction: column (调整主轴方向)

  • justify-content: space-around(调整主轴方向上每个item的排列方式)

  • align-items

    • 调整侧轴方向上单独行中item的对齐方式,是跟justify-content相对应的属性
    • strech为自动拉伸,这种情况下必须子元素没有设置高度,会根据父元素高度拉伸)
  • flex-wrap (是否需要换行,如果不需要换行,一旦超出父元素,子元素的宽会被忽略,根据情况自动调整变小)

  • align-content(==多行的情况下才起作用==,也就是必须设置成可换行==flex-wrap: wrap==,用于调整列与列之间的间距)

  • align-self (设置在子元素上,用于脱离父元素align-items的控制,可以单独设置某个子元素的排列方式)

  • flex (设置子元素的分配比例,待分配的子元素是未设置宽度的,分配的大小是父盒子减去padding、固定宽度子元素后,剩下的部分给未设置宽度的子元素自动分配)

  • order (值越大的,排在越后面)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,527评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,644评论 0 26
  • 前言 FlexBox是css3的一种新的布局方式,天生为解决布局问题而存在的它,比起传统的布局方式,我们使用Fle...
    zevei阅读 1,439评论 23 3
  • title: flex布局date: 2017-07-07 14:13:33tags: css笔记 flexbox...
    Gary23阅读 1,557评论 0 0
  • 《我爱你,不管你是什么样子》音频 当铺天盖地都是关于快乐,关于正能量的内容,悲伤、愤怒等负能量的情绪,似乎成了异类...
    心理咨询师郭羽靖阅读 429评论 0 0