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），简称”项目”。

Flex 布局（layout）

容器默认存在两根轴：水平的主轴（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

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8" />
    <title>flex测试</title>
<style>
  #main
  {
       width:220px;
       height:300px;
       border:1px solid black;
       display:flex;
  }

  #main div
  {
       flex:1;   <!--请注意这里将 flex:1;换为 flex: auto; 试试 -->
  }
</style>
</head>
<body>
   <div id="main">
        <div >红色</div>
        <div >蓝色</div> 
        <div >带有更多内容的绿色 div</div>
   </div>
   <p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
</body>
</html>

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

Flex 布局（layout）

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

Flex 布局（layout）

flex 属性语法

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

此属性可取值积极含义：

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

进一步说明

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

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

一个无单位数(<number>): 它会被当作<flex-grow>的值。

一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。

关键字none，auto或initial.

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

一个无单位数：它会被当作 <flex-shrink> 的值。

一个有效的宽度值: 它会被当作 <flex-basis> 的值。

三值语法:

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

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

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

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 属性，详见 <number>。默认值为 0，负值无效。

<'flex-shrink'>

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

<'flex-basis'>

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

flex-basis 属性

实例2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> flex-basis测试</title>
<style>
#main {
    width: 350px;
    height: 100px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 40px;
}

#main div:nth-of-type(2) {
    flex-basis: 80px;   <!--请注意这里--> 
}
</style>
</head>
<body>

<div id="main">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

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

</body>
</html>

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

Flex 布局（layout）

flex-basis 属性语法

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

此属性可取值积极含义：

值	描述
number	一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto	默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

就介绍到这里吧。

要想更多学习，可参考：

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

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