Flex 伸缩盒模型

1 关于 Flex 伸缩盒模型

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性。

2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex 是 Flexible Box 的缩写,意为"伸缩盒模型"或者"弹性盒模型",用来为盒状模型提供最大的灵活性。

2 伸缩容器和伸缩项目

伸缩容器: 采用 Flex 布局的元素,称为 Flex 容器(flex container),译为"伸缩容器"。

伸缩容器: 它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),译为"伸缩项目"。

只要对一个元素设置 display:flexdisplay:inline-flex, 该元素就会变成伸缩容器,它所有的子元素就会变为伸缩项目

伸缩项目都是块级格式上下文 (BFC)

3 Flex 伸缩盒模型专业术语

主轴方向、侧轴方向: 默认主轴方向是水平的,侧轴方向是垂直的;如果设置主轴方向是垂直的,那么侧轴方向就是水平的。

主轴:Flex 容器的主轴主要用来配置 Flex 项目;伸缩项目会沿主轴分布;他不一定是水平的,这主要取决于 flex-direction 属性。

主轴起点,主轴终点:Flex 项目的配置从容器的主轴起点边开始,往主轴终点边结束。

主轴长度:Flex 项目在主轴方向的宽度或高度就是项目的主轴长度,Flex 项目的主轴长度属性是 widthheight 属性,由哪一个对着主轴方向决定。

侧轴:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。

侧轴起点,侧轴终点:伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。

侧轴长度:Flex 项目在侧轴方向的宽度或高度就是项目的侧轴长度,Flex 项目的侧轴长度属性是 widthheight 属性,由哪一个对着主轴方向决定。

4 Flex 的新旧版本语法

旧版本: 2009年版本,是最早的伸缩布局,各大主流浏览器对其支持性略有不同,可惜的是,对 Flexbox 布局的各属性支持也不完全,在使用时还需添加各浏览器的前缀。

过渡版本: 2011年版本、2012年版本,只有IE10支持。

最新版本: 2012年版本, 目前各大浏览器都支持这个版本。

/*兼容性写法*/
.wrap {
    display: -webkit-box;  /*旧版本语法  webkit*/
    display: -moz-box;     /*旧版本语法  moz*/
    display: -ms-flexbox;  /*过渡版本语法 仅IE10支持*/
    display: -webkit-flex; /*新版本语法 webkit */
    display: flex;         /*新版本语法 现在浏览器都支持*/

    -webkit-box-orient: vertical;    /*旧版本语法  webkit*/
    -moz-box-orient:vertical;    /*旧版本语法  moz*/
    -ms-flex-direction: column;    /*过渡版本语法 仅IE10支持*/
    -webkit-flex-direction: column;    /*新版本语法 webkit */
    flex-direction: column;    /*新版本语法 现在浏览器都支持*/
}

results matching ""

    No results matching ""