Grid布局是将容器划分成“行”和“列”,产生单元格,然后指定“项目所在”的单元格,可以看作是二维布局。
设置css display:grid 或者 display:inline-grid ,都可以将直接将容器能产生单元格的容器
终于搞完了!
[toc]
默认子元素按行排列
Flexbox 布局是一维布局方式,要么按行排列,要么按列排列。
align-items 控制交叉轴, justify-content 控制主轴,始终不变。
flex-basis是用来设置 main size 的。使用 flex-basis,可以同时管理行模式下的宽度和列模式下的高度。
此时 width 失效,但是可以用 min-width 限制
在列模式下,设置高度
flex 容器在有剩余空间的时候,子元素占据剩余空间的占比。适合一些浮动的布局。
超过边界自动换行