flex布局笔记

1.display:flex --(d-flex) flex布局----Vuetify-Flex

display: flex 是一种布局方式，它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经可以在所有浏览器中使用。

Flex是Flexible Box的缩写，意思为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将会失效。

2.flex的六个属性

flex布局
（1）flex-direction:column --(flex-column); 让元素沿垂直主轴从上到下垂直排列
（2）flex-wrap: nowrap; --(flex-nowrap); (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；
（3）flex-wrap: wrap; --(flex-wrap); 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；
（4）justify-content : flex-start; --(justify-start); 元素在主轴（页面）上由左或者上开始排列
（5）align-content: stretch; --(align-stretch); 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。

3.flex的容器与项目属性

（1）flex的容器属性
以下6个属性设置在容器上：

    flex-direction
	flex-wrap
	flex-flow
	justify-content
	align-items
	align-content

（2）flex的项目属性
以下6个属性设置在项目上：

	order
	flex-grow
	flex-shrink
	flex-basis
	flex
	align-self