弹性布局是什么有什么特性?
1.将盒子模型变为弹性的一种布局(废话)
2.任何盒子模型都能使用弹性布局包括行内元素
如何使用弹性布局
在父盒子上添加display:flex
弹性布局的语法
给父盒子添加的语法
- flex-direction 决定子盒子的排列方向
- row(默认值):水平排列,从左到右
- row-reverse : 上面相反
- column :垂直排列,从上到下
- column-reverse:上面相反
- flex-wrap
- nowrap(默认):不换行,再多也挤在一行内
- wrap:换行
- wrap-reverse:反向排列加换行
- justify-content(英文为对齐方式)
- flex-start(默认):左对齐
- flex-end : 右对齐
- center :居中
- space-between : 两端对齐 项目两端都有相同的间隔
- space-around :这个每个项目两端都有相同的距离,和上面的区别是这个多了项目和父盒子边框也有空白
- 还有一些其他的,暂时不记了
给子盒子添加的语法
- order:可以给项目排顺序类似于:
order:1
- flex-basis:设置width和height让项目有默认的大小
- flex-grow
- flex-shrink
- flex是2.3.4的简写