CSS中的flax布局

记录学习一下CSS中的flax布局。

flax是什么，全称叫弹性盒子， 有两个核心概念： flax container 和 flax item。

初识flax:

为什么这三个小方块不在一行显示呢？

答： 因为div（小程序中的view）元素都是块级元素，而块级元素默认情况下，不管宽高是多少都是占一行显示的。

怎么将这三个小方块放在一行呢？

答： 有块级元素，就有行内元素，只需要将这三个元素的display属性设置为 inline即可。但是，行内元素不能设置元素的宽高。

那怎么才能设置行内元素的宽高呢？

答： 将元素的display属性设置为inline-block。这样这个行内元素也就有了块级元素的特性。

细究flax

以上是不使用flax布局时，常用的布局方式，那现在我们用flax布局实现一下

.content{
  display: flex;
}

.item{
  /* display: inline-block; */
  height: 100px;
  width: 100px;
}

就只是将这三个元素的父级元素，添加display属性为flax，将它设置为flax container弹性容器。这三个元素就显示在了一行。为什么？？？

答： 因为弹性容器有一个特性，弹性盒子的子元素如果是块级元素，在弹性盒子里面就是失去块级元素的特性！！！！

flax布局常用属性：

  flex-direction:   用来设置flax item的排布方向。
  				  column; //按照列排列
				  row;  //默认 按照行排列
				  column-reverse;//反向排列
				  row-reverse;//反向排列

  justify-content:   设置flax item的对齐方向。  注意：设置的是  主轴！！！
  				  flex-end; 
				  flex-start;
				  center;  //居中对齐
				  space-between; //最左边的靠左，最右边的靠右，其他元素均匀分布
				  space-around;  //所有元素在 排布方向上的间距均匀分布

  align-items:     设置的时flax item的对齐方向。   注意：设置的是 交叉轴！！！！
  				  center;

  flex-wrap:      设置flax-item在宽度超过屏幕最大宽度时，换不换行
				  wrap;//换行
				  nowrap;//默认值，不换行

看下面这两张图片，思考一下，怎么确定主轴和交叉轴。

很明显就可以发现，flex-direction属性可以确定主轴和交叉轴，flex-direction是row，那么主轴就是 水平方向，flex-direction是column，主轴就是竖直方向。