一：display:flex布局display:flex是一种布局方式。它可以应用于容器和内联元素。它是W3C提出的一种新的解决方案，能够以简单、完整、响应式的方式实现各种页面布局。目前，所有浏览器都支持它。Flex是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性。设置为Flex布局后，子元素的float、clear、vertical-align属性将失效。二：flex的六个属性flex-direction元素在容器中的排列方向（默认水平排列）1：flex-direction:row；沿水平轴从左到右排列元素1536039075.png2:flex-direction:column;沿垂直轴从上到下垂直排列元素1536039314(1).png3:flex-direction:row-reverse;沿横轴从右到左排列元素1536039460(1).pngflex-wrap容器内元素的换行（默认不换行）1:flex-wrap:nowrap;（默认）元素不换行，例如：一个div宽度为100%，设置该属性，2个div的宽度会自动变成50%；2：flex-wrap：包裹；元素换行，例如：一个div宽度100%，设置这个属性，第二个div会在第二行；justify-content元素在主轴（页面）上的排列1：justify-content:center;元素排列在主轴中心（页面）1536041764(1).png2:justify-content:flex-start;元素在主轴上从左或上排列（页面）1536041631(1).png3:justify-content:flex-end;元素在主轴（页面）上从右或下排列1536042053(1).png4:justify-content:space-between;元素排列在主轴的左右两端或上下两端（页面）1536042390(1).png5:justify-content:space-around;每个元素两侧的间距相等。因此，元素之间的间距是元素和边框之间间距的两倍。1536042636(1).pngalign-items元素在当前行主轴（页面）的横轴（纵轴）方向对齐1：align-items:flex-start;弹性盒元素轴的横向轴（垂直轴））起始边缘与行的横轴起始边缘（顶部对齐）。1536043107(1).png2:对齐项目：flex-end；flexbox元素的侧轴（垂直轴）起始位置的边界靠近直线侧轴的结束边界。（下对齐）1536043238(1).png3:align-items:center;flexbox元素以行的横向轴（垂直轴）为中心。(居中对齐)1536043373(1).png4:align-items:baseline;如果flexbox元素的内联轴和侧轴相同，则此值等同于'flex-start'。在其他情况下，此值将参与基线对齐。（顶部对齐）align-content当容器内的元素没有占据横轴上的所有可用空间时对齐flex容器内的项目（垂直）
