本文深入讲解了Flex弹性布局的使用方法，包括display:flex的基础设定，flex-wrap和flex-direction属性的作用，以及justify-content和align-items属性如何实现内容的精确对齐。通过实际案例，读者将学会如何利用flex:1使子元素占满剩余空间。
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，则子元素占满除了其兄弟元素以外的所有剩余空间
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
