本节重点:
- flex布局的用法
- 参考学习阮一峰的博客
什么是flex布局
采用flex布局的元素,叫flex容器,所有子元素自动成为容器成员,叫flex项目
.box{
display:flex;
display:-webkit-flex;
}
子元素的float、clear、vertical-align 属性失效
容器的属性
- flex-direction:row(默认) | row-reverse | column | column-reverse
- 决定项目的排列方向
- flex-wrap: nowrap(不换行 默认) | wrap(换行,第一行在上方) | wrap-reverse(换行,第一行在下方);
简写
flex-flow:row nowrap(默认)
justify :flex-start | flex-end | center | space-between | space-around
- 项目在主轴上的对齐方式
项目属性(常用)
- flex-grow:0(默认,存在放大空间时也不放大)| 分配空间时放大倍数
- 项目的放大比例
- (可选)、flex-shrink:1(如果空间不足,项目将缩小)| 0不缩小
- 项目缩小比例
- (可选)、flex-basis:auto(项目本身大小)
- 可以设置width/height,则项目占据固定空间
简写
- flex:0 1 auto(默认值)