伸缩盒子之flex浅谈

看实例:

 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的方向改变了。

如有问题，请多多赐教。