flex布局基本兼容目前主流浏览器，实现方法简单。整理了一些flex的知识点，总结了几种常见的布局flex写法Flex基础知识点flex-grow和flex-shrink相关计算公式公式一：子元素空间<父容器剩余空间父容器=父容器宽度-子元素宽度总和增长单位=父容器剩余空间/每个子元素flex-grow总和子元素实际宽度=（flex-basis）+增长单位*（flex-grow）公式2：子元素空间>parent容器子元素溢出宽度=子元素宽度之和-子元素宽度之和收缩单位=子元素溢出宽度/各子元素flex_shrink之和子元素的宽度=(flex-basis)-收缩单位*(flex-shrink)Flex兼容性目前flex兼容主流浏览器。对于一些兼容的浏览器，可以添加私有属性：display:-ms-flex;/*IE10*/display:-moz-flex;/*Firefox2~Firefox21*/display:-webkit-flex;flexbugsInIE10~11浏览器，min-height不适合flex容器的子元素flexitem。如果可能，使用高度而不是最小高度。在Chrome、Opera和Safari浏览器中无法识别flex项目内容的最小尺寸。您可以将flex-shrink设置为0（而不是默认的1）以避免不必要的收缩。没有使用无单位的flex-basis值，因为在IE10~11中，flex简写被忽略了。通常使用0%而不是0px。Flex布局应用场景Flexbox布局比较适合Web应用的一些小组件和小规模布局，而Grid布局则比较适合一些大型布局。flex布局的优点和缺点兼容所有主流浏览器轻松实现元素的水平和垂直居中可以忽略内联元素的4pxmargin可以轻松实现复杂布局收集整理了相关的Flexboxbug。几种常见布局的flex写法首先需要为父元素设置flex布局方法。同时，在本例中，使用媒体查询，当屏幕分辨率小于768px时，flex布局变为垂直排列。两列布局flex-grow定义了元素的放大比例。默认值为0，表示不放大元素。当给所有子元素赋一个flex-grow值时，该值可以看作是元素大小与父元素的比例。两列布局固定宽度flex是flex-growflex-shrinkflex-basis的简写。为第一个子元素分配flex：10100px；表示元素的宽度在任何情况下都固定为100px，不会随父元素和其他子元素缩放。如果第二个子元素的flex-grow为1，则该元素无论如何都会占用父元素的剩余空间。设置overflow可以防止元素溢出。三列布局这种布局的重点是order属性。元素的序列对应于order的值。order的值越大，元素越靠后。n列等比布局，注重第六子元素的特殊性。我们希望六个子元素可以等宽分布，但是当元素的内容过多时，会占用更多的空间，甚至会溢出。因此，为这些元素定义了width:100%；这种方法意味着所有元素都占据了父元素的适当位置，不会因为其他兄弟元素的内容太多而分配更少的空间。流式布局流式布局可以应用于自适应布局，当父元素的大小发生变化时，其子元素的大小也随之变化。这个布局的关键属性是flex-wrap:wrap;，这个设置可以让子元素自动换行，防止子元素溢出。水平和垂直居中的关键属性是justify-content:center;align-item:center;这是一个两点的弹性布局。无需知道父子元素的任何相关尺寸信息即可实现居中布局，非常灵活。.折线的情况和后面的“各种对齐方式”主要介绍了flex中水平和垂直方向的各种对齐方式。各种路线
