Flex 布局（layout）

浅浅的花香味﹌ 2023-07-10 08:38 16阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70][]

容器默认存在两根轴：水平的主轴（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】][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;   
      }
    </style>
    </head>
    <body>
       <div id="main">
            <div style="background-color:coral;">红色</div>
            <div style="background-color:lightblue;">蓝色</div> 
            <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
       </div>
       <p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
    </body>
    </html>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2][]

flex 属性语法

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

此属性可取值积极含义：

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>flex-grow</em></td> 
   <td>一个数字，规定项目将相对于其他灵活的项目进行扩展的量。</td> 
  </tr> 
  <tr> 
   <td><em>flex-shrink</em></td> 
   <td>一个数字，规定项目将相对于其他灵活的项目进行收缩的量。</td> 
  </tr> 
  <tr> 
   <td><em>flex-basis</em></td> 
   <td>项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>与 1 1 auto 相同。</td> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>与 0 0 auto 相同。</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>设置该属性为它的默认值，即为 0 1 auto。请参阅&nbsp;<a href="http://www.w3school.me/cssref/css-initial.html" rel="nofollow"><em>initial</em></a>。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承该属性。请参阅&nbsp;<a href="http://www.w3school.me/cssref/css-inherit.html" rel="nofollow"><em>inherit</em></a>。</td> 
  </tr> 
 </tbody> 
</table>

进一步说明

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 style="background-color:coral;"></div>
      <div style="background-color:lightblue;"></div>
      <div style="background-color:khaki;"></div>
      <div style="background-color:pink;"></div>
      <div style="background-color:lightgrey;"></div>
    </div>
    
    <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-basis 属性。</p>
    
    </body>
    </html>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3][]

flex-basis 属性语法

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

此属性可取值积极含义：

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>number</em></td> 
   <td>一个长度单位或者一个百分比，规定灵活项目的初始长度。</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>设置该属性为它的默认值。请参阅&nbsp;<a href="http://www.w3school.me/cssref/css-initial.html" rel="nofollow"><em>initial</em></a>。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承该属性。请参阅&nbsp;<a href="http://www.w3school.me/cssref/css-inherit.html" rel="nofollow"><em>inherit</em></a>。</td> 
  </tr> 
 </tbody> 
</table>

就介绍到这里吧。

要想更多学习，可参考：

[https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex][https_developer.mozilla.org_zh-CN_docs_Web_CSS_flex]

[https://www.runoob.com/cssref/css3-pr-flex.html][https_www.runoob.com_cssref_css3-pr-flex.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200301155405954.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[https_www.cnblogs.com_yunxiansheng_p_9190454.html]: https://www.cnblogs.com/yunxiansheng/p/9190454.html%E3%80%91
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200301155444136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200301155502973.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200301155558558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[https_developer.mozilla.org_zh-CN_docs_Web_CSS_flex]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
[https_www.runoob.com_cssref_css3-pr-flex.html]: https://www.runoob.com/cssref/css3-pr-flex.html