看实例:
1.未使用flex布局之前的样子
2.使用display:flex(flex-direction:row，此处可写可不写，因为一旦使用flex布局默认值就是它);
别着急, 请看解析:
使用flex-direction:row,此时可以有以下几种布局结果
接下来会用到的属性为justify-content(主轴上的伸缩)和align-items(交叉轴上的伸缩)两个属性。
1.以row:为主轴,对主轴进行控制位置。
(1).居左
(2).居中
(3).居右
以上三种就是以row为主轴,控制主轴
2.以row为主轴,对相交轴控制
(1).压缩到左上方
(2).压缩到左中间
(3).压缩到左下角
3.以row为主轴,同时对justiny-content和align-items进行控制。
(1).在交叉轴压缩控制完毕后,然后对主轴进行位置居左(虽然没变,但是的确justin-content:flex-start;的默认值就是居左)。
(2). 在交叉轴压缩控制完毕后,然后对主轴进行位置居中。
(3).在交叉轴压缩控制完毕后,然后对主轴进行位置居右。
以clomun为主轴的原理同上,只是,将main-axis和crolss-axis的方向改变了。
如有问题，请多多赐教。
