flex 布局的几个常用属性

  • display 为 flex：弹性盒子
  • justify-content：水平对齐方式
    • flex-start：主轴靠左对齐（默认值）
    • flex-end：主轴靠右对齐
    • center：主轴水平居中对齐
    • space-around：两端对齐，两端间距是中间距离的一半
    • space-between：两端靠边对齐，中间等距
    • space-evenly：两端对齐，两端间距与中间距离等距
  • align-items 为 center ：侧轴垂直居中对齐
  • flex-wrap 为 wrap, wrap 是换行，默认 nowrap 不换行
  • flex-direction 为 column：主轴和侧轴换位置，名字不变
  • align-self 为 center：自身侧轴垂直居中对齐（设置给弹性盒子的子元素）

 主要的demo  https://gitee.com/jiege0525_admin/flex-case.git

可以访问地址 http://1.116.177.203/  看效果