flex-灵活布局在实际应用场景中，我们通常会遇到各种不同尺寸和分辨率的设备。为了在所有这些设备上正确布局我们的应用程序界面需要响应式界面设计来满足如此复杂的布局要求。flex弹性盒模型的优点是开发者只需要声明布局应该有的行为，而不需要给出具体的实现方法。浏览器负责完成实际的布局。当布局涉及变宽右分布的场景时，需要优先考虑flexbox布局。flex-direction：调整主轴方向row：主轴方向水平向右column：主轴方向垂直向下row-reverse：主轴方向水平向左column-reverse：主轴方向是垂直向上的。justify-content主要用于设置主轴的对齐方式flex-start：弹性盒子元素将对齐到起始位置flex-end：弹性盒子元素将对齐到结束位置。center：灵活的盒子元素将对齐到行的中间space-around：灵活的盒子元素将在行中均匀分布space-between：第一个粘贴到左边，最后一个粘贴到对了，和其他箱子平分，保证每个箱子之间的空隙相等。align-items用于调整横轴的对齐方式flex-start：元素在横轴的起始位置对齐。flex-end：元素在横轴的末端对齐。center：元素以横轴为中心。stretch：元素的高度将被拉伸到最大（仅当未给定高度时）。flex-wrap属性控制flex容器是单行还是多行，默认不换行nowrap：不换行（默认），如果宽度溢出，会压缩子框的宽度。wrap：当宽度不够时，会wrap。align-content用于设置多行flex容器的排列方式flex-start：每行向着侧轴的起始位置堆叠。flex-end：行向flex容器的末端堆叠。center：行向flex容器的中间堆叠。space-around：行在侧轴上均匀分布。space-between：第一行粘贴到最上面，最后一行粘贴到最下面，其他行均匀分布在flexbox容器中。stretch：拉伸，不设置高度。
