之前一直或多或少的使用了Flex,但是没有系统的总结下,正好今天有空,就顺便总结下
简介
首先呢,什么是Flex
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性
任何一个容器或者行内元素都可以指定为Flex布局
.div1{
display:flex
}
.item1{
display: inline-flex;
}
但是有一点需要注意
设为Flex布局以后,子元素的 float 、clear 和 vertical-align属性将失效
容器属性
总共有6个属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
flex-wrap
flex-flow
也就是可以把 flex-direction flex-wrap 配置属性写在一起
.div1{
flex-flow: column wrap;
}
justify-content
这个属性就相当于横向布局配置,把这个属性和接下来介绍的 align-items 结合,就可以实现水平以及垂直居中.
align-items
这相当于设置垂直方向的布局配置,和上一个介绍的 justify-content 结合,就可以实现水平以及垂直居中.
align-content
相当与容器多行时内行与行的布局配置
内部item的属性
一共也有6个
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-sel
order
根据 flex-direction 的布局方向来 决定容器内部item的排布顺序
flex-grow
定义item放大的所占的相对空间,前提是存在剩余空间,类似与table中td内的colspan
flex-shrink
与 flex-grow 的差别不仅仅是一个放大一个缩小, flex-shrink 是空间不足时的缩小策略
flex-basis
主轴(main size)代表的意义在这张图里面就可以看到,红线的地方
flex
align-self
比容器的align-items更高优先级