文章目录文章参考问题(flex的个人理解)说明子元素的影响作用本身的风格作用于子控件的情况(水平垂直中央)方法1 )改变方向(方法2 )使flex的子元素水平垂直中央)
文章参考Flex布局教程：语法篇问题说明
默认情况下，div没有高度，因此设置高度时，默认值从左到右，从上到下排列。
要垂直居中对齐，必须计算div控件的高度。 内容一多一少，位置就不准确了。 因此，最安全的方法是浏览器自身根据div的高度居中显示
flex个人对副元素的影响设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
角色本身样式的flex-direction属性确定主轴的方向，即项目的放置方向。 flex-wrap属性定义了在没有一个轴排列时换行的方式。 flex-flow属性是flex-direction和flex-wrap属性的缩写，默认值为row nowrap。 justify-content属性定义项目在主轴上的对齐方式。 对齐项属性定义项目在相交轴上的对齐方式。 对齐内容属性定义了如何对齐多个轴。 如果项目只有一个轴，则此属性不起作用。 作用于子控件的order属性定义项目的排列顺序。 数值越小，排列得越高，默认值为0。 flex-grow属性定义项目的放大率，默认情况下为0，如果有可用空间，则不放大。 flex-shrink属性定义项目的收缩率。 默认值为1。 也就是说，空间不足会缩小项目。 flex-basis属性确定项目在分配额外空间之前占用的“主轴空间”(main size )。 浏览器根据此属性计算主轴是否有多余的空间。 默认值为auto，它是项目的原始大小。 flex属性是flex-grow、flex-shrink和flex-basis的缩写，默认值为0 1自动。 以下两个属性是可选的： 可以使用align-self属性将单个项目与其他项目对齐，并覆盖align-items属性。 默认值为auto，它继承父元素的对齐项属性，如果没有父元素，则与拉伸相同。 外壳(水平垂直中央)方法1 (改变方向)！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title title/title/head style.my container { height 3360200 px； width: 200px； border : 1px固态硬盘； /* flex样式*/display: flex； /*垂直排列*/flex-direction: column； align-items3360中心； 由于flex-direction: column，align-items为水平方向*/justify-content: center； 由于flex-direction: column，因此，justify-content是垂直方向*/}/stylebodydivclass=' my container ' divclass='我是紧密的请注意，如果将bb html设置为flex-direction: column，则justify-content的水平中心将变为垂直方向，对齐项将变为水平方向
方法2 )将flex的子元素水平垂直居中(！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title title/title/head style.my container { height 3360200 px； width: 200px； border : 1px固态硬盘； 显示： Flex； align-items3360中心； //垂直居中，面向mycontainer类下的子元素，不包含“孙”元素justify-content: center； //水平居中，面向mycontainer类下的子元素，不包括“孙”元素}/stylebodydivclass=' my container ' divdivclass=' '我是标题/div div class=