flex弹性布局
display:flex 设置内部内容为flex布局
flex-wrap:wrap(换行) nowrap(不换行) flex子元素换行
flex-direction:row(默认横向) column(竖向) flex布局方向
align-items:center(垂直于主轴居中)
justify-content: | |
---|---|
space-between | 均匀等分在盒子里,并且两边没有空格 |
space-around | 均匀等分在盒子里,并且两边有空格 |
center | 沿主轴居中 |
flex-start | 默认值 从左向右排列 |
flex-end | 从右向左排列 |
若设置父元素为display:flex,同时设置任意一个子元素样式为flex:1,则子元素占满除了其兄弟元素以外的所有剩余空间