这篇博客介绍了CSS3的Flex布局，包括其作为网页布局的新方案，以及与传统布局的区别。文章详细阐述了Flex布局的基本概念，如主轴、交叉轴、容器和项目的属性，如flex-direction、flex-wrap、justify-content等，并提供了各属性的用法和效果说明。通过Flex布局，开发者可以更方便地实现灵活的网页布局，包括各种复杂的对齐和换行方式。
网页布局（layout）是CSS的一个重点应用。
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的Flex写法。
一、Flex布局是什么？
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
行内元素也可以使用Flex布局。
Webkit内核的浏览器，必须加上-webkit前缀。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
二、基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end
最低0.47元/天 解锁文章
扫一扫
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
