Flex 布局（layout）

Flex 布局（layout）

Flex是Flexible Box（弹性盒）的缩写，意为”弹性布局”。网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便。

2009年，W3C提出了一种新的方案——Flex布局（Flex layout），可以简便、完整、响应式地实现各种页面布局。注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。Internet Explorer 9 及更早版本不支持 flex 属性。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

 

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

 

任何一个容器都可以指定为Flex布局。

【在HTML开发中我们常常会使用一类标签作为容器放置一些内容，我们把这类标签称之为容器标签，可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签。参见

https://www.cnblogs.com/yunxiansheng/p/9190454.html】

 

使用Flex 布局（layout），需要了解下面属性语法

flex 属性

flex-basis 属性

flex-direction 属性

flex-flow 属性

flex-grow 属性

flex-shrink 属性

flex-wrap 属性

 

 

首先学习flex 属性

 

实例1

 

 

红色

 

蓝色

 

 

带有更多内容的绿色 div

 

注意: Internet Explorer 9 及更早版本不支持 flex 属性。

 

 

将上面实例代码，保存的flex01.html文件，用浏览器打开运行，显示如下：

 

将 flex:1;换为 flex: auto; 用浏览器打开运行，显示如下：

 

flex 属性语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

此属性可取值积极含义：

 

进一步说明

flex 属性可以指定1个，2个或3个值。

单值语法: 值必须为以下其中之一:

一个无单位数(): 它会被当作的值。

一个有效的宽度(width)值: 它会被当作 的值。

关键字none，auto或initial.

双值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。第二个值必须为以下之一：

一个无单位数：它会被当作 的值。

一个有效的宽度值: 它会被当作 的值。

三值语法:

第一个值必须为一个无单位数，并且它会被当作 的值。

第二个值必须为一个无单位数，并且它会被当作  的值。

第三个值必须为一个有效的宽度值， 并且它会被当作 的值。

initial

元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。

auto

元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".

none

元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。

<'flex-grow'>

定义 flex 元素的 flex-grow 属性，详见 。默认值为 0，负值无效。

<'flex-shrink'>

定义 flex 元素的 flex-shrink 属性，详见 。默认值为1，负值无效。

<'flex-basis'>

定义 flex 元素的 flex-basis 属性。若值为0，则必须加上单位，以免被视作伸缩性。 默认值为 auto。

 

flex-basis 属性

实例2

 

 

 

 

 

 

 

注意: Internet Explorer 10 及更早版本浏览器不支持 flex-basis 属性。

 

 

将上面实例代码，保存的flex02.html文件，用浏览器打开运行，显示如下：

 

flex-basis 属性语法

flex-basis: number|auto|initial|inherit;

 

此属性可取值积极含义：

就介绍到这里吧。

要想更多学习，可参考：

 

https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

https://www.runoob.com/cssref/css3-pr-flex.html