css

146 阅读1分钟

弹性布局

display:flex

父元素使用

flex:1

子元素使用,默认不换行。包括flex-basis,flex-grow,flex-shrink三个属性

  1. flex-basis:设置子元素的占用空间;等级高于width
  2. flex-grow:按比例瓜分父元素剩余空间,使子元素在水平方向上布满父元素
  3. flex-shrink:按比例缩小子元素的宽度,使其刚好被父元素容纳

align-items:center

垂直方向上的居中

justify-content:center

水平方向上的居中