- 背景
- 元素有四种类型
在flex容器中
1.float失效
2.vertical-align失效
3.元素默认不换行,要换行,使用flex-wrap:wrap/wrap-reverse(放不下的元素跑到上面,与一般不同)
- justify-content:对齐方式,有5种,其中自动分配间隔space-around,使得每个的边距都一致
- 主轴变换:flex-direction,默认值为row
交叉轴align-items
text-align对文本有效,对div无效,用交叉轴居中
- 实例
- flex-grow(扩展比率)
父元素剩余空间的瓜分比例
刚开始两个子元素:100×100
实例