网页布局(layout)是 CSS 的一个重点应用,也是很多新人(包括我)很头疼的问题。在Flex布局到来之前,通常需要用很多种属性组合才能达到想要的效果。然而,CSS各种属性组合之间互相影响,如果对文档流及各种定位机制了解的不够深入,很难做出理想的布局效果。Flex到来之后,这一切都变得简单起来,这篇文章就介绍下这种全新的布局方法。 css各种属性之间相互影响见 方应杭:CSS 为什么这么难学? 常见的布局方式有: 固定宽度布局弹性(fluid)布局响应式布局 —— 多终端(PC、Pad、Phone) 布局实例 单栏布局 一栏布局 [demo](JS Bin) 一栏布局(通栏) demo 内部元素水平居中 一块居中demo多块居中demo多块居中(无间隙)用flex demo不用flex demo 双列布局 一列宽度固定,一列宽度自适应demo 三列布局 两侧两列固定宽度,中间列自适应宽度demo 总结
如果你对以下车友回答满意,请设置一个推荐答案!
|