flex布局原理
-
flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
-
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
-
flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
-
采用 Flex 布局的元素，称为 Flex 容器（flex
container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。
总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
父项常见属性
-
flex-direction：设置主轴的方向
-
-
justify-content：设置主轴上的子元素排列方式
-
-
flex-wrap：设置子元素是否换行
-
-
align-content：设置侧轴上的子元素的排列方式（多行）
-
-
align-items：设置侧轴上的子元素排列方式（单行）
-
-
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
-
align-items和align-conten区别