响应式布局[flex]来自对响应式方法的总结。了解了上面的响应式布局，下面重点说说flex弹性布局，很好用，但是我有记忆障碍。顺手就记住了，总结一下吧。顺便分享一下我看的几篇博客的内容。写的很详细，也很容易理解。写在前面——你需要知道的1.查看css属性兼容性https://caniuse.com/2。盒模型box-sizingcontent-box（标准盒模型）width=content-width；分析：当盒子的内容宽度固定时，设置盒子的padding和border，盒子模型的宽高会变大，向外扩展，实际内容不变（注意：margin总是在框外）；border-box(IE框模型)width=content-width+padding+border;分析：当盒子内容的宽度固定时，设置盒子的padding和border，盒子模型的宽高不变，向内扩展，实际内容变小（注意：margin总是在盒子）;3、样式兼容（postCss插件）vscode自动添加css兼容代码插件flex弹性布局采用Flex布局的元素称为Flex容器（flexcontainer），简称“容器”。它的所有子元素都称为弹性项目，简称“项目”。注意设置Flex布局后，子元素的float、clear、vertical-align属性将失效。1、柔性容器展示：flex；2.容器属性justify-content----------item在主轴上的对齐方式（水平或垂直由flex-direction决定）flex-start（默认left）flex-end(totheright)center(居中)space-between(两端对齐的item之间的间隔相等)space-around(每一个item两边的间隔相等)align-items-------------如何在横轴上对齐（水平或垂直由flex-direction决定）stretch（默认情况下，如果item没有设置height或者设置为auto，会占据整个容器的高度）flex-start（对齐起点）flex-end（对齐终点）center（对齐中点）baseline（项目第一行文本的基线对齐）flex-direction------------确定主轴的方向row(默认水平排列起点在左边)row-reverse(水平排列起点在右边)column(垂直排列起点在head[top])row-reverse（竖排起点在底部[bottom]）flex-wrap------------子元素是否换行nowrap（默认不换行）wrap(newline)wrap-reverse(reversenewline)flex-flow------------
