lazylYYY的博客

一:运用BFC的overflow:hidden <style> .left { width: 100px; height: 100px; background-color: aqua; float: left; } .main { background-color: blue; heigh..

display:flex 意思是弹性布局首先flex的出现是为了解决哪些问题呢？一、页面行排列布局像此图左右两个div一排显示可以用浮动的布局方式html部分css部分这种布局有两个缺点1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。2.当.left,.right 的宽度是固定的，浏览器宽度变的过窄时，.right会被挤到下面用display:flex布局，可以解决这两个缺点刚吃的html部

目录一、骰子的布局1.1 单项目1.2 双项目1.3 三项目1.4 四项目1.5 六项目1.6 九项目二、网格布局2.1 基本网格布局2.2 百分比布局三、圣杯布局四、输入框的布局五、悬挂式布局六、固定的底栏七，流式布局上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Land

目录一、Flex布局是什么？二、基本概念三、容器的属性3.1 flex-direction属性3.2 flex-wrap属性它可能取三个值。（1）nowrap（默认）：不换行。（2）wrap：换行，第一行在上方。（3）wrap-reverse：换行，第一行在下方。3.3 flex-flow3.4 justify-content属性3.5 align-items属性3.6 align-content属性四、项目的属性4.1 order属性4.2