弹性盒子flex详解篇

css常用布局之一：flex

内容摘自：https://blog.csdn.net/weixin_48786946/article/details/106931993，推荐大家关注这位小姐姐

1.基本原理

Flex 是一种可以伸缩的布局，天生就是为了适配不同的分辨率。而且用法也很简单，首先只要告诉浏览器，我是一个 伸缩布局 就可以了。
注意的点：

1.设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
2.任何一个容器都可以指定为 Flex 布局
3.Webkit 内核的浏览器，必须加上 -webkit 前缀。

.faBox {
   
	display: 'flex'; //给父元素设置为伸缩布局
	display: -webkit-flex;  //Webkit 内核的浏览器，必须加上 -webkit 前缀。

	.sonBox1 {
   
		...
	}
	.sonBox2 {
   
		...
	}
}

设置完Flex之后，就会有下面的这个关系图，我们一个一个看。

2.容器属性

谁被设置成了display:flex，谁就是容器。上面图中，faBox就是容器，所以容器属性要写在容器里面。

2.1 flex-direction属性

从英语意思了解属性，翻译为伸缩方向，该属性可以设置主轴的方向，有六个值。

.faBox {
   
  flex-direction: row | row-reverse