chrome内核兼容性从我手边已有的版本测试结果兼容Chrome/39.0.2171.95-Chrome/74.0.3729.131上下自适应布局上一篇flex实现水平自适应布局这里顺便记录下上下自适应布局如下flex布局测试html,body{height:100%;width:100%;margin:0px;padding:0px;}.main{height:100%;width:50%;margin:0pxauto;display:flex;flex-direction:column;}.topdiv,.downdiv{width:100%;}.topdiv{height:50px;ba

chrome内核兼容性从我手边已有的版本测试结果兼容Chrome/39.0.2171.95-Chrome/74.0.3729.131水平布局实现重要的概念先说一下flex-grow该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间flex布局让前端布局又多啦一个方案,下面想实现这个后台常用的布局,左边一栏菜单300px这样父元素还剩多少空间都让右边占用从来实现自动宽度,样式如下,是我们想要的效果flex布局测试html,body{height:100%;width:100%;margin:0px;padding:0px;}.main{

2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。flex浏览器支持一、Flex布局是什么？Flex是FlexibleBox的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display:-webkit-flex;/*在webkit内核的浏览器上使用要加前缀*/display:flex;//将对象作为弹性伸缩盒显示}当然，行内元素也可以使用Flex布局。.box{display:inline-flex;//将对象作为内联块级弹性伸缩盒显示}二、基本概