search

博客列表 >【CSS入门】前端布局神器Flex弹性盒模型详解及适用场景(建议收藏)

【CSS入门】前端布局神器Flex弹性盒模型详解及适用场景(建议收藏)

　一纸荒凉* Armani
　一纸荒凉* Armani原创
2021年03月25日 20:20:242453浏览

复习position定位属性制作一个遮罩模态框

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>固定定位实战：模态框</title>
  8.     <style>
  9.         /* 初始化 */
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.             box-sizing: border-box;
  15.         }
  16.         /* 页眉  */
  18.         header {
  19.             background-color: #dedede;
  20.             padding: 0.5em 2em;
  21.             overflow: hidden;
  22.         }
  24.         header h2 {
  25.             float: left;
  26.         }
  28.         header button {
  29.             float: right;
  30.             width: 10em;
  31.             height: 2.5em;
  32.         }
  34.         header button:hover {
  35.             cursor: pointer;
  36.             background-color: #fff;
  37.         }
  38.         /* 模态框 */
  39.         /* 遮罩 */
  41.         .modal .modal-backdrop {
  42.             /* 蒙板必须将弹层的后面全部盖住,意味着与容器大小一样 */
  43.             position: fixed;
  44.             top: 0;
  45.             left: 0;
  46.             right: 0;
  47.             bottom: 0;
  48.             background-color: rgb(0, 0, 0, 0.5);
  49.         }
  50.         /* 模态框主体 */
  52.         .modal .modal-body {
  53.             border: 1px solid #000;
  54.             padding: 1em;
  55.             min-width: 20em;
  56.             /* background-color: lightcyan; */
  57.             background: linear-gradient(to right, lightcyan, #fff);
  58.             /* 将一个块在别一个块中垂直水平居中 */
  59.             position: fixed;
  60.             top: 5em;
  61.             left: 30em;
  62.             right: 30em;
  63.         }
  65.         .modal .modal-body form {
  66.             width: 80%;
  67.         }
  69.         .modal .modal-body form caption {
  70.             font-weight: bolder;
  71.             margin-bottom: 1em;
  72.         }
  74.         .modal .modal-body form td {
  75.             padding: 0.5em;
  76.         }
  78.         .modal .modal-body form table td:first-of-type {
  79.             width: 5em;
  80.         }
  82.         .modal .modal-body form input {
  83.             width: 20em;
  84.             height: 2em;
  85.         }
  87.         .modal {
  88.             position: relative;
  89.         }
  91.         .modal .modal-body .close {
  92.             position: absolute;
  93.             right: 1em;
  94.             width: 4em;
  95.             height: 2em;
  96.         }
  98.         .modal button:hover {
  99.             cursor: pointer;
  100.             background-color: #fff;
  101.         }
  102.         /* 当页面刚打开的时候，应该将弹层隐藏 */
  104.         .modal {
  105.             display: none;
  106.         }
  107.     </style>
  108. </head>
  110. <body>
  111.     <!-- 页眉头部  -->
  112.     <header>
  113.         <h1>我的网站</h1>
  114.         <button>登录</button>
  115.     </header>
  118.     <!-- 模态框 -->
  119.     <div class="modal">
  120.         <!-- 遮罩 -->
  121.         <div class="modal-backdrop"></div>
  122.         <!-- 弹出框 -->
  123.         <div class="modal-body">
  124.             <button class="close">关闭</button>
  125.             <form action="" method="post">
  126.                 <table>
  127.                     <caption>用户登录</caption>
  128.                     <tr>
  129.                         <td><label for="email">邮箱：</label></td>
  130.                         <td><input type="email" name="email" id=""></td>
  131.                     </tr>
  132.                     <tr>
  133.                         <td><label for="password">密码：</label></td>
  134.                         <td><input type="password" name="password" id=""></td>
  135.                     </tr>
  136.                     <tr>
  137.                         <td></td>
  138.                         <td><button>登录</button></td>
  139.                     </tr>
  140.                 </table>
  141.             </form>
  142.         </div>
  143.     </div>
  144. </body>
  145. <script>
  146.     const btn = document.querySelector("header button");
  147.     const modal = document.querySelector(".modal");
  148.     const close = document.querySelector(".close");
  150.     btn.addEventListener("click", setModal, false);
  151.     close.addEventListener("click", setModal, false);
  153.     function setModal(ev) {
  154.         ev.preventDefault();
  155.         let status = window.getComputedStyle(modal, null).getPropertyValue("display");
  156.         modal.style.display = status === "none" ? "block" : "none";
  157.     }
  158. </script>
  160. </html>

复习定位实现水平垂直居中

  1.     <style>
  2.       .box {
  3.         width: 15em;
  4.         height: 15em;
  5.         background-color: lightgreen;
  6.         position: relative;
  7.       }
  8.       .box .item {
  9.         width: 5em;
  10.         height: 5em;
  11.         background-color: coral;
  12.         position: absolute;
  13.         top: 0;
  14.         left: 0;
  15.         right: 0;
  16.         bottom: 0;
  17.         margin: auto;
  18.       }
  19.     </style>
  20.     <div class="box">
  21.       <div class="item"></div>
  22.     </div>

初体验flex实现水平垂直居中

  1.     <style>
  2.       .box {
  3.         width: 15em;
  4.         height: 15em;
  5.         background-color: lightgreen;
  6.       }
  7.       .box .item {
  8.         width: 5em;
  9.         height: 5em;
  10.         background-color: coral;
  11.       }
  12.             .box {
  13.         display: flex;
  14.         justify-content: center;
  15.         align-items: center;
  16.       }
  17.     </style>
  18.     <div class="box">
  19.       <div class="item"></div>
  20.     </div>

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。在制作移动端京东首页案例之前，我们首先要了解一下flex布局的一些知识点！

Flex 布局教程：语法

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

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

  1. .box{
  2.   display: flex;
  3. }

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

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

开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

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

每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。
每根轴都有起点和终点，这对于元素的对齐非常重要。

弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。

弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

弹性容器的两根轴非常重要，所有属性都是作用于轴的。下面从轴入手，将所有flex布局属性串起来理解。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex布局</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  17.             display: flex;
  18.             height: 300px;
  19.             border: 2px solid pink;
  20.         }
  21.         /* 项目样式: 必须是flex容器的子元素 */
  22.         /* flex容器中的子元素自动成flex容器的项目,并且是行内块显示 */
  24.         .container>.item {
  25.             width: 60px;
  26.             height: 60px;
  27.             font-size: 30px;
  28.             text-align: center;
  29.             line-height: 60px;
  30.             color: aqua;
  31.             background-color: green;
  32.             border: 1px solid red;
  33.         }
  34.     </style>
  35. </head>
  37. <body>
  38.     <div class="container">
  39.         <div class="item">1</div>
  40.         <div class="item">2</div>
  41.         <div class="item">3</div>
  42.         <div class="item">4</div>
  43.         <div class="item">5</div>
  44.         <div class="item">6</div>
  45.         <div class="item">7</div>
  46.         <div class="item">8</div>
  47.     </div>
  48. </body>
  50. </html>

给父元素容器设置display: flex弹性盒布局，容器中的子元素自动成flex容器的项目,并且是行内块显示。当容器宽度不足的时候，项目将被压缩宽度显示。

二、容器的属性

容器属性

以下6个属性设置在容器上

  • flex-direction 设置主轴的方向
  • flex-wrap 设置是否换行排列
  • flex-flow flex-direction属性和flex-wrap属性的简写形式
  • justify-content 项目在主轴上的对齐方式
  • align-items 项目在交叉轴上的对齐方式
  • align-content 多根轴线的对齐方式

2.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

  1. .box {
  2.   flex-direction: row | row-reverse | column | column-reverse;
  3. }
  • row（默认值）：主轴为水平方向，起点在左端。

  • row-reverse：主轴为水平方向，起点在右端。

  • column：主轴为垂直方向，起点在上沿。

  • column-reverse：主轴为垂直方向，起点在下沿。

  1.   <div class="container">
  2.         <div class="item">1</div>
  3.         <div class="item">2</div>
  4.         <div class="item">3</div>
  5.         <div class="item">4</div>
  6.         <div class="item">5</div>
  7.         <div class="item">6</div>
  8.         <div class="item">7</div>
  9.         <div class="item">8</div>
  10.     </div>
  1.      .container {
  2.             display: flex;
  3.             /* 设置主轴的方向 （默认row水平） */
  4.             flex-direction: row;
  5.             height: 300px;
  6.             border: 2px solid pink;
  7.         }
  8.         .container>.item {
  9.             width: 60px;
  10.             height: 60px;
  11.             font-size: 30px;
  12.             text-align: center;
  13.             line-height: 60px;
  14.             color: aqua;
  15.             background-color: green;
  16.             border: 1px solid red;
  17.         }




2.2 flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

  1. .box{
  2.   flex-wrap: nowrap | wrap | wrap-reverse;
  3. }

（1）nowrap（默认）：不换行。容器宽度不足时，项目宽度将被压缩。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex布局</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  17.             display: flex;
  18.             /* 设置主轴方向 */
  19.             flex-direction: column;
  20.             /* 换行显示 */
  21.             flex-wrap: wrap;
  22.             border: 2px solid pink;
  23.         }
  24.         /* 项目样式: 必须是flex容器的子元素 */
  26.         .container>.item {
  27.             width: 60px;
  28.             height: 60px;
  29.             font-size: 30px;
  30.             text-align: center;
  31.             line-height: 60px;
  32.             color: aqua;
  33.             background-color: green;
  34.             border: 1px solid red;
  35.         }
  36.     </style>
  37. </head>
  39. <body>
  40.     <div class="container">
  41.         <div class="item">1</div>
  42.         <div class="item">2</div>
  43.         <div class="item">3</div>
  44.         <div class="item">4</div>
  45.         <div class="item">5</div>
  46.         <div class="item">6</div>
  47.         <div class="item">7</div>
  48.         <div class="item">8</div>
  49.     </div>
  50. </body>
  52. </html>

2.3 flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

  1. .box {
  2.   flex-flow: row nowrap;
  3. }

2.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

  1. .box {
  2.   justify-content: flex-start | flex-end | center | space-between | space-around;
  3. }
  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

  1.   <div class="container">
  2.         <div class="item">1</div>
  3.         <div class="item">2</div>
  4.         <div class="item">3</div>
  5.         <div class="item">4</div>
  6.         <div class="item">5</div>
  7.         <div class="item">6</div>
  8.         <div class="item">7</div>
  9.         <div class="item">8</div>
  10.     </div>
  1.       .container {
  2.             /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  3.             display: flex;
  4.             /* 设置主轴方向 */
  5.             /* flex-direction: column; */
  6.             /* 换行显示 */
  7.             /* flex-wrap: wrap; */
  8.             /* 综合属性 */
  9.             flex-flow: row wrap;
  10.             /* 设置水平对齐方式 */
  11.             justify-content: start;
  12.             border: 2px solid pink;
  13.         }
  14.         /* 项目样式: 必须是flex容器的子元素 */
  16.         .container>.item {
  17.             width: 60px;
  18.             height: 60px;
  19.             font-size: 30px;
  20.             text-align: center;
  21.             line-height: 60px;
  22.             color: aqua;
  23.             background-color: green;
  24.             border: 1px solid red;
  25.         }
  27.         .container:nth-child(2) {
  28.             justify-content: end;
  29.         }
  31.         .container:nth-child(3) {
  32.             justify-content: center;
  33.         }
  35.         .container:nth-child(4) {
  36.             justify-content: space-between;
  37.         }
  39.         .container:nth-child(5) {
  40.             justify-content: space-around;
  41.         }

2.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

  1. .box {
  2.   align-items: flex-start | flex-end | center | baseline | stretch;
  3. }

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。

2.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  1. .box {
  2.   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  3. }

  • stretch（默认值）：轴线占满整个交叉轴。
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

三、项目的属性

项目属性

以下6个属性设置在项目上

  • order 定义项目的排列顺序
  • flex-grow 定义项目的放大比例
  • flex-shrink 定义了项目的缩小比例
  • flex-basis 定义了在分配多余空间之前，项目占据的主轴空间
  • flex flex-grow, flex-shrink 和 flex-basis的简写
  • align-self 允许单个项目有与其他项目不一样的对齐方式

3.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex布局</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  17.             display: flex;
  18.             /* 设置主轴方向 */
  19.             /* flex-direction: column; */
  20.             /* 换行显示 */
  21.             /* flex-wrap: wrap; */
  22.             /* 综合属性 */
  23.             flex-flow: row wrap;
  24.             /* 设置水平对齐方式 */
  25.             justify-content: start;
  26.             border: 2px solid pink;
  27.         }
  28.         /* 项目样式: 必须是flex容器的子元素 */
  30.         .container>.item {
  31.             width: 60px;
  32.             height: 60px;
  33.             font-size: 30px;
  34.             text-align: center;
  35.             line-height: 60px;
  36.             color: aqua;
  37.             background-color: green;
  38.             border: 1px solid red;
  39.         }
  40.         /* order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 */
  42.         .container .item:nth-child(2) {
  43.             order: -1;
  44.         }
  46.         .container .item:nth-child(4) {
  47.             order: -4;
  48.         }
  50.         .container .item:nth-child(5) {
  51.             order: 8;
  52.         }
  54.         .container .item:nth-child(1) {
  55.             order: 6;
  56.         }
  57.     </style>
  58. </head>
  60. <body>
  61.     <div class="container">
  62.         <div class="item">1</div>
  63.         <div class="item">2</div>
  64.         <div class="item">3</div>
  65.         <div class="item">4</div>
  66.         <div class="item">5</div>
  67.         <div class="item">6</div>
  68.         <div class="item">7</div>
  69.         <div class="item">8</div>
  70.     </div>
  72. </body>
  74. </html>

3.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

  1. .item {
  2.   flex-grow: <number>; /* default 0 */
  3. }

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

  1. <div class="container">
  2.         <div class="item">1</div>
  3.         <div class="item">2</div>
  4.         <div class="item">3</div>
  5.         <div class="item">4</div>
  6.     </div>

等分四个项目

  1.     <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         .container {
  9.             /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  10.             display: flex;
  11.             /* 设置主轴方向 */
  12.             /* flex-direction: column; */
  13.             /* 换行显示 */
  14.             /* flex-wrap: wrap; */
  15.             /* 综合属性 */
  16.             flex-flow: row wrap;
  17.             /* 设置水平对齐方式 */
  18.             justify-content: start;
  19.             border: 2px solid pink;
  20.         }
  21.         /* 项目样式: 必须是flex容器的子元素 */
  23.         .container>.item {
  24.             width: 60px;
  25.             height: 60px;
  26.             font-size: 30px;
  27.             text-align: center;
  28.             line-height: 60px;
  29.             color: aqua;
  30.             background-color: green;
  31.             border: 1px solid red;
  32.             flex-grow: 1;
  33.         }
  34.     </style>

中间项目占据所以剩余空间

  1.     <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         .container {
  9.             /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  10.             display: flex;
  11.             /* 设置主轴方向 */
  12.             /* flex-direction: column; */
  13.             /* 换行显示 */
  14.             /* flex-wrap: wrap; */
  15.             /* 综合属性 */
  16.             flex-flow: row wrap;
  17.             /* 设置水平对齐方式 */
  18.             justify-content: start;
  19.             border: 2px solid pink;
  20.         }
  21.         /* 项目样式: 必须是flex容器的子元素 */
  23.         .container>.item {
  24.             width: 60px;
  25.             height: 60px;
  26.             font-size: 30px;
  27.             text-align: center;
  28.             line-height: 60px;
  29.             color: aqua;
  30.             background-color: green;
  31.             border: 1px solid red;
  32.             flex-grow: 1;
  33.         }
  34.         .container .item:nth-child(2) {
  35.             flex-grow: 2;
  36.         }
  37.     </style>

三个项目分别占一二三份

  1.     <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         .container {
  9.             /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  10.             display: flex;
  11.             /* 设置主轴方向 */
  12.             /* flex-direction: column; */
  13.             /* 换行显示 */
  14.             /* flex-wrap: wrap; */
  15.             /* 综合属性 */
  16.             flex-flow: row wrap;
  17.             /* 设置水平对齐方式 */
  18.             justify-content: start;
  19.             border: 2px solid pink;
  20.         }
  21.         /* 项目样式: 必须是flex容器的子元素 */
  23.         .container>.item {
  24.             width: 60px;
  25.             height: 60px;
  26.             font-size: 30px;
  27.             text-align: center;
  28.             line-height: 60px;
  29.             color: aqua;
  30.             background-color: green;
  31.             border: 1px solid red;
  32.             flex-grow: 1;
  33.         }
  34.         .container .item:nth-child(2) {
  35.             flex-grow: 2;
  36.             background-color: pink;
  37.         }
  39.         .container .item:nth-child(3) {
  40.             flex-grow: 3;
  41.             background-color: yellow;
  42.         }
  43.     </style>

3.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

  1. .item {
  2.   flex-shrink: <number>; /* default 1 */
  3. }


如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex布局</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  17.             display: flex;
  18.             /* 设置主轴方向 */
  19.             /* flex-direction: column; */
  20.             /* 换行显示 */
  21.             /* flex-wrap: wrap; */
  22.             /* 综合属性 */
  23.             flex-flow: row nowrap;
  24.             /* 设置水平对齐方式 */
  25.             justify-content: start;
  26.             border: 2px solid pink;
  27.         }
  28.         /* 项目样式: 必须是flex容器的子元素 */
  30.         .container>.item {
  31.             width: 100px;
  32.             height: 60px;
  33.             font-size: 30px;
  34.             text-align: center;
  35.             line-height: 60px;
  36.             color: aqua;
  37.             background-color: green;
  38.             border: 1px solid red;
  39.         }
  41.         .container .item:nth-child(2) {
  42.             /* 宽度不足时，其他元素进行缩放，该项目不缩放 */
  43.             flex-shrink: 0;
  44.             background-color: pink;
  45.         }
  46.     </style>
  47. </head>
  49. <body>
  50.     <div class="container">
  51.         <div class="item">1</div>
  52.         <div class="item">2</div>
  53.         <div class="item">3</div>
  54.     </div>
  56. </body>
  58. </html>

宽度不足时，项目一和三被缩放了，二依然保持原有宽度。

3.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  1. .item {
  2.   flex-basis: <length> | auto; /* default auto */
  3. }

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex布局</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             /* 转为flex布局,这个元素就叫flex容器,弹性容器 */
  17.             display: flex;
  18.             /* 设置主轴方向 */
  19.             /* flex-direction: column; */
  20.             /* 换行显示 */
  21.             /* flex-wrap: wrap; */
  22.             /* 综合属性 */
  23.             flex-flow: row nowrap;
  24.             /* 设置水平对齐方式 */
  25.             justify-content: start;
  26.             border: 2px solid pink;
  27.         }
  28.         /* 项目样式: 必须是flex容器的子元素 */
  30.         .container>.item {
  31.             width: 60px;
  32.             height: 60px;
  33.             font-size: 30px;
  34.             text-align: center;
  35.             line-height: 60px;
  36.             color: aqua;
  37.             background-color: green;
  38.             border: 1px solid red;
  39.         }
  41.         .container .item:nth-child(1) {
  42.             flex-basis: 120px;
  43.             background-color: yellow;
  44.         }
  46.         .container .item:nth-child(2) {
  47.             flex-basis: 100px;
  48.             background-color: pink;
  49.         }
  50.     </style>
  51. </head>
  53. <body>
  54.     <div class="container">
  55.         <div class="item">1</div>
  56.         <div class="item">2</div>
  57.         <div class="item">3</div>
  58.     </div>
  60. </body>
  62. </html>

3.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

  1. .item {
  2.   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  3. }

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

  1.         /* 默认值,禁止放大,但允许自动收缩,项目宽度自动计算 */
  2.         flex: 0 1 auto;
  3.         /* 默认值使用关键字简写 */
  4.         flex: initial;
  6.         /* 允许放大和收缩 */
  7.         flex: 1 1 auto;
  8.         /* 简写 */
  9.         flex: auto;
  11.         /* 禁止放大和收缩 */
  12.         flex: 0 0 auto;
  13.         /* 简写 */
  14.         flex: none;
  16.         /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
  17.         flex: 1;
  18.         /* 等于  flex: 1 1 auto; */

3.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

  1. .item {
  2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;
  3. }


该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

总结

上一条：0324作业-flex布局下一条：box-sizing功能。相对定位与绝对定位。绝对定位：块级居中。
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多