CSS 布局神器 Flex 总结

之前一直或多或少的使用了Flex,但是没有系统的总结下,正好今天有空,就顺便总结下

简介

首先呢,什么是Flex

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性

任何一个容器或者行内元素都可以指定为Flex布局

.div1{
    display:flex
}

.item1{
    display: inline-flex;
}

但是有一点需要注意

设为Flex布局以后，子元素的 float 、clear 和 vertical-align属性将失效

 容器属性

总共有6个属性

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. 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个

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. 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更高优先级

 参考链接:https://www.runoob.com/w3cnote/flex-grammar.html