HTML Flex 布局

ゞ浴缸里的玫瑰 2023-09-26 18:09 165阅读 0赞

### 基本概念 ###

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：

![5c5965debc8f4e6e8c6f6c4666c0d89e.png][]

ps：您可以通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。

## 支持属性 ##

### display ###

指定 HTML 元素的盒子类型

### flex-direction ###

指定弹性盒子中子元素的排列方式

属性值：

<table> 
 <tbody> 
  <tr> 
   <td>row</td> 
   <td>默认值，主轴沿水平方向从左到右</td> 
  </tr> 
  <tr> 
   <td>row-reverse</td> 
   <td>主轴沿水平方向从右到左</td> 
  </tr> 
  <tr> 
   <td>column</td> 
   <td>主轴沿垂直方向从上到下</td> 
  </tr> 
  <tr> 
   <td>column-reverse</td> 
   <td>主轴沿垂直方向从下到上</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>将此属性设置为属性的默认值</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承此属性的值</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            #main {
                border: 1px solid #CCC;
                padding: 5px;
                position: relative;
            }
            .row, .row_reverse, .column, .column_reverse{
                display: flex;
                margin-bottom: 5px;
            }
            .row {
                flex-direction: row;
            }
            .row_reverse {
                flex-direction: row-reverse;
            }
            .column {
                flex-direction: column;
            }
            .column_reverse {
                flex-direction: column-reverse;
                position: absolute;
                top: 120px;
                left: 400px;
            }
            .row div, .row_reverse div, .column div, .column_reverse div {
                width: 50px;
                height: 50px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="row">
                <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
            </div>
            <div class="row_reverse">
                <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
            </div>
            <div class="column">
                <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
            </div>
            <div class="column_reverse">
                <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
            </div>
        </div>
    </body>
    </html>

![afdf0a88536b4d329b48133e27de25ef.png][]

### flex-wrap ###

设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：

<table> 
 <tbody> 
  <tr> 
   <td>nowrap</td> 
   <td>默认值，表示项目不会换行</td> 
  </tr> 
  <tr> 
   <td>wrap</td> 
   <td>表示项目会在需要时换行</td> 
  </tr> 
  <tr> 
   <td>wrap-reverse</td> 
   <td>表示项目会在需要时换行，但会以相反的顺序</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>将此属性设置为属性的默认值</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承属性的值</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            #main {
                border: 1px solid #CCC;
                padding: 5px;
            }
            .nowrap, .wrap, .wrap_reverse {
                display: flex;
                flex-direction: row;
                margin-bottom: 15px;
            }
            .nowrap {
                flex-wrap: nowrap;
            }
            .wrap {
                flex-wrap: wrap;
            }
            .wrap_reverse {
                flex-wrap: wrap-reverse;
            }
            .nowrap div, .wrap div, .wrap_reverse div {
                width: 70px;
                height: 50px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="nowrap">
                <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
            </div>
            <div class="wrap">
                <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
            </div>
            <div class="wrap_reverse">
                <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
            </div>
        </div>
    </body>
    </html>

![4e999676f4034fecace075a4a419a687.png][]

### flex-flow ###

属性是 flex-direction 和 flex-wrap 两个属性的简写,如：

flex-flow: flex-direction flex-wrap;

<!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            .flex_flow {
                display: flex;
                flex-flow: row-reverse wrap;
            }
            .flex_flow div {
                width: 60px;
                height: 60px;
                margin-bottom: 5px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="flex_flow">
            <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
        </div>
    </body>
    </html>

![ce3bdad5dd17440ea60173d01a41603e.png][]

### justify-content ###

设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下

<table> 
 <tbody> 
  <tr> 
   <td>flex-start</td> 
   <td>默认值，左对齐</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>右对齐</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>居中</td> 
  </tr> 
  <tr> 
   <td>space-between</td> 
   <td>两端对齐，项目之间的间隔是相等的</td> 
  </tr> 
  <tr> 
   <td>space-around</td> 
   <td>每个项目两侧的间隔相等</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>将此属性设置为属性的默认值</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承属性的值</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            .flex {
                display: flex;
                flex-flow: row wrap;
                margin-top: 10px;
            }
            .flex div {
                width: 60px;
                height: 60px;
                margin-bottom: 5px;
                border: 1px solid black;
            }
            .flex-start {
                justify-content: flex-start;
            }
            .flex-end {
                justify-content: flex-end;
            }
            .center {
                justify-content: center;
            }
            .space-between {
                justify-content: space-between;
            }
            .space-around  {
                justify-content: space-around;
            }
        </style>
    </head>
    <body>
        <div class="flex flex-start">
            <div>A</div><div>B</div><div>C</div><div>D</div>
        </div>
        <div class="flex flex-end">
            <div>A</div><div>B</div><div>C</div><div>D</div>
        </div>
        <div class="flex center">
            <div>A</div><div>B</div><div>C</div><div>D</div>
        </div>
        <div class="flex space-between">
            <div>A</div><div>B</div><div>C</div><div>D</div>
        </div>
        <div class="flex space-around">
            <div>A</div><div>B</div><div>C</div><div>D</div>
        </div>
    </body>
    </html>

![283c515cf5d5453bb729d80d52b59b12.png][]

### align-items ###

设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：

<table> 
 <tbody> 
  <tr> 
   <td>stretch</td> 
   <td>默认值，项目将被拉伸以适合容器</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>项目位于容器的中央</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>项目位于容器的顶部</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>项目位于容器的底部</td> 
  </tr> 
  <tr> 
   <td>baseline</td> 
   <td>项目与容器的基线对齐</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>将此属性设置为属性的默认值</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承属性的值</td> 
  </tr> 
 </tbody> 
</table>

![22219348c1b4498d9bf197525a7edca1.png][]

### align-content ###

与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，属性的可选值如下

<table> 
 <tbody> 
  <tr> 
   <td>stretch</td> 
   <td>默认值，将项目拉伸以占据剩余空间</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>项目在容器内居中排布</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>项目在容器的顶部排列</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>项目在容器的底部排列</td> 
  </tr> 
  <tr> 
   <td>space-between</td> 
   <td>多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部</td> 
  </tr> 
  <tr> 
   <td>space-around</td> 
   <td>多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>将此属性设置为属性的默认值</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承该属性的值</td> 
  </tr> 
 </tbody> 
</table>

![387a1aab43b9423ca6a90c610959fd1c.png][]

### order ###

设置项目在容器中出现的顺序

<!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            .flex {
                display: flex;
                flex-flow: row wrap;
                margin-top: 10px;
            }
            .flex div {
                width: 60px;
                height: 60px;
                margin-bottom: 5px;
                border: 1px solid black;
            }
            .flex div:nth-child(1) {
                order: 5;
            }
            .flex div:nth-child(2) {
                order: 3;
            }
            .flex div:nth-child(3) {
                order: 1;
            }
            .flex div:nth-child(4) {
                order: 2;
            }
            .flex div:nth-child(5) {
                order: 4;
            }
        </style>
    </head>
    <body>
        <div class="flex">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
    </body>
    </html>

![2e4d72c7c24248baaf7f3f2bee47ec03.png][]align-self

### align-self ###

允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值。align-self 属性的可选值如下：

<table> 
 <tbody> 
  <tr> 
   <td>auto</td> 
   <td>默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”</td> 
  </tr> 
  <tr> 
   <td>stretch</td> 
   <td>项目将被拉伸以适合容器</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>项目位于容器的中央</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>项目位于容器的顶部</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>项目位于容器的底部</td> 
  </tr> 
  <tr> 
   <td>baseline</td> 
   <td>项目与容器的基线对齐</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>将此属性设置为属性的默认值</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承属性的值</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            .flex {
                display: flex;
                flex-flow: row wrap;
                align-items: flex-end;
                border: 1px solid #CCC;
                height: 150px;
            }
            .flex div {
                width: 60px;
                height: 60px;
                border: 1px solid black;
            }
            .flex div:nth-child(4) {
                align-self: flex-start;
            }
        </style>
    </head>
    <body>
        <div class="flex">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
    </body>
    </html>

![f59cf76cf9b74017b03a11530fbb35f9.png][]

### flex ###

flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：

flex: flex-grow flex-shrink flex-basis;

参数说明如下：

*  flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
 *  flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
 *  flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式。

另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <style>
            .flex {
                display: flex;
                flex-flow: row wrap;
                align-items: flex-end;
                border: 1px solid #CCC;
            }
            .flex div {
                width: 60px;
                height: 60px;
                border: 1px solid black;
            }
            .flex div:nth-child(2) {
                flex:0;
            }
            .flex div:nth-child(4) {
                flex:1 1 auto;
            }
        </style>
    </head>
    <body>
        <div class="flex">
            <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
        </div>
    </body>
    </html>

![0b328c28ea66470aa29b7e207b4daeee.png][]

flex-grow

设置弹性盒子的扩展比率

flex-shrink

设置弹性盒子的收缩比率

flex-basis

设置弹性盒子伸缩基准值

[参考文献][Link 1]

[5c5965debc8f4e6e8c6f6c4666c0d89e.png]: https://img-blog.csdnimg.cn/5c5965debc8f4e6e8c6f6c4666c0d89e.png
[afdf0a88536b4d329b48133e27de25ef.png]: https://img-blog.csdnimg.cn/afdf0a88536b4d329b48133e27de25ef.png
[4e999676f4034fecace075a4a419a687.png]: https://img-blog.csdnimg.cn/4e999676f4034fecace075a4a419a687.png
[ce3bdad5dd17440ea60173d01a41603e.png]: https://img-blog.csdnimg.cn/ce3bdad5dd17440ea60173d01a41603e.png
[283c515cf5d5453bb729d80d52b59b12.png]: https://img-blog.csdnimg.cn/283c515cf5d5453bb729d80d52b59b12.png
[22219348c1b4498d9bf197525a7edca1.png]: https://img-blog.csdnimg.cn/22219348c1b4498d9bf197525a7edca1.png
[387a1aab43b9423ca6a90c610959fd1c.png]: https://img-blog.csdnimg.cn/387a1aab43b9423ca6a90c610959fd1c.png
[2e4d72c7c24248baaf7f3f2bee47ec03.png]: https://img-blog.csdnimg.cn/2e4d72c7c24248baaf7f3f2bee47ec03.png
[f59cf76cf9b74017b03a11530fbb35f9.png]: https://img-blog.csdnimg.cn/f59cf76cf9b74017b03a11530fbb35f9.png
[0b328c28ea66470aa29b7e207b4daeee.png]: https://img-blog.csdnimg.cn/0b328c28ea66470aa29b7e207b4daeee.png
[Link 1]: http://c.biancheng.net/css3/flex.html