Flex布局

父元素

flex-direction: 主轴方方向

• row
• row-reverse
• column
• column-reverse

justify-content: 主轴方向上子元素排列顺序

• flex-start
• center
• flex-end
• space-around
• space-between

align-items: 副轴上元素的定位

• flex-start
• center
• flex-end
• stretch
• baseline

不常用
flex-wrap:
类似于flex-wrap类似于white-space

• nowrap: 所有的元素都在一行。
• wrap: 元素自动换成多行。
• wrap-reverse: 元素自动换成逆序的多行。

align-content

• flex-start: 多行都集中在顶部。
• flex-end: 多行都集中在底部。
• center: 多行居中。
• space-between: 行与行之间保持相等距离。
• space-around: 每行的周围保持相等距离。
• stretch: 每一行都被拉伸以填满容器。

这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。只有一行的时候align-content没有任何效果。

子元素

order: 排序 从0开始 小的排在前面

align-self : 定义元素自己的 纵轴排列方式，可以覆盖 父元素的align-items

flex-basis: flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex-grow: flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink: flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex-direction和flex-wrap两个属性经常会一起使用。所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。

display:flex与display:inline-flex的区别

• flex： 将对象作为弹性伸缩盒显示
• inline flex: 将对象作为内联块级弹性伸缩盒显示

 

        
1
        
2
        
3
        
4
 

display:flex情况下添加一个

5

效果如下，容器的宽度依然是 200px

display:inline-flex情况下添加一个

5

效果如下，容器的宽度变为 250px

display:inline-flex后容器会根据子元素所有的div大小自适应宽度和高度

两个flex小游戏练手不错

塔防
小青蛙

几个简单flex布局的小例子

PC双飞翼
商品列表
手机布局