search

博客列表 >《flex元素常用属性详解》20201222

《flex元素常用属性详解》20201222

杨凡的博客
杨凡的博客原创
2020年12月23日 17:26:09582浏览

flex实现布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>flex布局</title>
  7.     <style>
  8.         body *:not(.container){
  9.             background-color: lightcoral;
  10.         }
  11.         header,footer{
  12.             height: 8vh;
  13.         }
  14.         .container{
  15.             height: calc(84vh - 1em);
  16.             display: flex;
  17.             margin: 0.5em 0;
  18.         }
  19.         .container aside{
  20.             min-width: 15em;
  21.         }
  22.         .container main{
  23.             min-width: calc(100% - 30em - 1em);
  24.             margin: 0 0.5em;
  25.         }   
  26.     </style>
  27. </head>
  28. <body>
  29.     <header>页眉</header>
  30.     <div class="container">
  31.         <aside>左侧</aside>
  32.         <main>内容区</main>
  33.         <aside>右侧</aside>
  34.     </div>
  35.     <footer>页脚</footer>
  36. </body>
  37. </html>

总结：

  1. 任何元素都可以通过添加display: flex;属性，转为弹性盒元素
  2. 转为flex元素后，它的内部的子元素就支持flex布局了
  3. 使用display: flex;属性的元素称为：flex容器
  4. flex容器中的子元素称为：flex项目
  5. 容器中的项目自动转为行内块元素

flex容器属性

flex-direction属性应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>flex-direction</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         .container,.container1,.container2,.container3{
  14.             /* 转为flex弹性布局元素 */
  15.             display: flex;
  16.             height: 10em;
  17.             border: 1px solid #000;
  18.             padding: 1em;
  19.             margin: 1em;
  20.         }
  21.         .container>.item,
  22.         .container1>.item,
  23.         .container2>.item,
  24.         .container3>.item{
  25.             width: 2em;
  26.             background-color: lightcyan;
  27.             border: 1px solid #000;
  28.         }
  29.         .container{
  30.             flex-direction:row;
  31.         }
  32.         .container2{
  33.             flex-direction:row-reverse;
  34.         }
  35.         .container1{
  36.             flex-direction:column;
  37.         }
  38.         .container3{
  39.             flex-direction:column-reverse;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <h2>行方向水平显示默认靠左</h2>
  45.     <div class="container">
  46.         <div class="item">test1</div>
  47.         <div class="item">test2</div>
  48.         <div class="item">test3</div>
  49.         <div class="item">test4</div>
  50.     </div>
  51.     <h2>行方向水平显示顺序相反默认靠右</h2>
  52.     <div class="container2">
  53.         <div class="item">test1</div>
  54.         <div class="item">test2</div>
  55.         <div class="item">test3</div>
  56.         <div class="item">test4</div>
  57.     </div>
  58.     <h2>列方向垂直显示默认靠上</h2>
  59.     <div class="container1">
  60.         <div class="item">test1</div>
  61.         <div class="item">test2</div>
  62.         <div class="item">test3</div>
  63.         <div class="item">test4</div>
  64.     </div>
  65.     <h2>列方向垂直显示顺序相反默认靠下</h2>
  66.     <div class="container3">
  67.         <div class="item">test1</div>
  68.         <div class="item">test2</div>
  69.         <div class="item">test3</div>
  70.         <div class="item">test4</div>
  71.     </div>
  72. </body>
  73. </html>

flex-wrap属性应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>flex-wrap</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         .container,.container1,.container2,.container3{
  14.             /* 转为flex弹性布局元素 */
  15.             display: flex;
  16.             height: 10em;
  17.             border: 1px solid #000;
  18.             padding: 1em;
  19.             margin: 1em;
  20.         }
  21.         .container>.item,
  22.         .container1>.item,
  23.         .container2>.item,
  24.         .container3>.item{
  25.             width: 2em;
  26.             background-color: lightcyan;
  27.             border: 1px solid #000;
  28.         }
  29.         .container{
  30.             flex-wrap:nowrap;
  31.         }
  32.         .container2{
  33.             flex-wrap:wrap;
  34.         }
  35.         .container1{
  36.             flex-wrap:wrap-reverse;
  37.         }
  38.         .container3{
  39.             flex-direction:column-reverse;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <h2>不换行</h2>
  45.     <div class="container">
  46.         <div class="item">test1</div>
  47.         <div class="item">test2</div>
  48.         <div class="item">test3</div>
  49.         <div class="item">test4</div>
  50.         <div class="item">test5</div>
  51.         <div class="item">test6</div>
  52.         <div class="item">test7</div>
  53.         <div class="item">test8</div>
  54.         <div class="item">test9</div>
  55.         <div class="item">test10</div>
  56.         <div class="item">test11</div>
  57.         <div class="item">test12</div>
  58.         <div class="item">test13</div>
  59.         <div class="item">test14</div>
  60.     </div>
  61.     <h2>换行</h2>
  62.     <div class="container2">
  63.         <div class="item">test1</div>
  64.         <div class="item">test2</div>
  65.         <div class="item">test3</div>
  66.         <div class="item">test4</div>
  67.         <div class="item">test5</div>
  68.         <div class="item">test6</div>
  69.         <div class="item">test7</div>
  70.         <div class="item">test8</div>
  71.         <div class="item">test9</div>
  72.         <div class="item">test10</div>
  73.         <div class="item">test11</div>
  74.         <div class="item">test12</div>
  75.         <div class="item">test13</div>
  76.         <div class="item">test14</div>
  77.     </div>
  78.     <h2>换行顺序相反</h2>
  79.     <div class="container1">
  80.         <div class="item">test1</div>
  81.         <div class="item">test2</div>
  82.         <div class="item">test3</div>
  83.         <div class="item">test4</div>
  84.         <div class="item">test5</div>
  85.         <div class="item">test6</div>
  86.         <div class="item">test7</div>
  87.         <div class="item">test8</div>
  88.         <div class="item">test9</div>
  89.         <div class="item">test10</div>
  90.         <div class="item">test11</div>
  91.         <div class="item">test12</div>
  92.         <div class="item">test13</div>
  93.         <div class="item">test14</div>
  94.     </div>
  95. </body>
  96. </html>

flex-flow属性应用

  1. flex-flow属性是flex-direction和flex-wrap的组合方式
  2. flex-flow: row nowrap这样的书写形式

对其方式

justify-content（主轴 x轴）属性应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>主轴对其方式</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         .container,.container1,.container2{
  14.             /* 转为flex弹性布局元素 */
  15.             display: flex;
  16.             height: 10em;
  17.             border: 1px solid #000;
  18.             padding: 1em;
  19.             margin: 1em;
  20.         }
  21.         .container>.item,
  22.         .container1>.item,
  23.         .container2>.item{
  24.             width: 2em;
  25.             background-color: lightcyan;
  26.             border: 1px solid #000;
  27.         }
  28.         .container{
  29.             justify-content:flex-start;
  30.         }
  31.         .container2{
  32.             justify-content:center;
  33.         }
  34.         .container1{
  35.             justify-content:flex-end;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <h2>靠左方式(默认)</h2>
  41.     <div class="container">
  42.         <div class="item">test1</div>
  43.         <div class="item">test2</div>
  44.         <div class="item">test3</div>
  45.         <div class="item">test4</div>
  46.     </div>
  47.     <h2>居中方式</h2>
  48.     <div class="container2">
  49.         <div class="item">test1</div>
  50.         <div class="item">test2</div>
  51.         <div class="item">test3</div>
  52.         <div class="item">test4</div>
  53.     </div>
  54.     <h2>靠右方式</h2>
  55.     <div class="container1">
  56.         <div class="item">test1</div>
  57.         <div class="item">test2</div>
  58.         <div class="item">test3</div>
  59.         <div class="item">test4</div>
  60.     </div>
  61. </body>
  62. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>主轴对其方式</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         .container,.container1,.container2{
  14.             /* 转为flex弹性布局元素 */
  15.             display: flex;
  16.             height: 10em;
  17.             border: 1px solid #000;
  18.             padding: 1em;
  19.             margin: 1em;
  20.         }
  21.         .container>.item,
  22.         .container1>.item,
  23.         .container2>.item{
  24.             width: 2em;
  25.             background-color: lightcyan;
  26.             border: 1px solid #000;
  27.         }
  28.         .container{
  29.             justify-content:space-around;
  30.         }
  31.         .container2{
  32.             justify-content:space-between;
  33.         }
  34.         .container1{
  35.             justify-content:space-evenly;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <h2>分散对其</h2>
  41.     <div class="container">
  42.         <div class="item">test1</div>
  43.         <div class="item">test2</div>
  44.         <div class="item">test3</div>
  45.         <div class="item">test4</div>
  46.     </div>
  47.     <h2>两端对其</h2>
  48.     <div class="container2">
  49.         <div class="item">test1</div>
  50.         <div class="item">test2</div>
  51.         <div class="item">test3</div>
  52.         <div class="item">test4</div>
  53.     </div>
  54.     <h2>平均对其</h2>
  55.     <div class="container1">
  56.         <div class="item">test1</div>
  57.         <div class="item">test2</div>
  58.         <div class="item">test3</div>
  59.         <div class="item">test4</div>
  60.     </div>
  61. </body>
  62. </html>

justify-content（侧轴 Y轴）属性应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>侧轴对其方式</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         .container,.container1,.container2,.container3{
  14.             /* 转为flex弹性布局元素 */
  15.             display: flex;
  16.             height: 10em;
  17.             border: 1px solid #000;
  18.             padding: 1em;
  19.             margin: 1em;
  20.         }
  21.         .container>.item,
  22.         .container1>.item,
  23.         .container2>.item,
  24.         .container3>.item{
  25.             width: 2em;
  26.             background-color: lightcyan;
  27.             border: 1px solid #000;
  28.         }
  29.         .container{
  30.             align-items:stretch;
  31.         }
  32.         .container2{
  33.             align-items:flex-start;
  34.         }
  35.         .container1{
  36.             align-items:flex-end;
  37.         }
  38.         .container3{
  39.             align-items:center;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <h2>默认拉升等高</h2>
  45.     <div class="container">
  46.         <div class="item">test1</div>
  47.         <div class="item">test2</div>
  48.         <div class="item">test3</div>
  49.         <div class="item">test4</div>
  50.     </div>
  51.     <h2>靠上部对其</h2>
  52.     <div class="container2">
  53.         <div class="item">test1</div>
  54.         <div class="item">test2</div>
  55.         <div class="item">test3</div>
  56.         <div class="item">test4</div>
  57.     </div>
  58.     <h2>靠底部对其</h2>
  59.     <div class="container1">
  60.         <div class="item">test1</div>
  61.         <div class="item">test2</div>
  62.         <div class="item">test3</div>
  63.         <div class="item">test4</div>
  64.     </div>
  65.     <h2>居中对其</h2>
  66.     <div class="container3">
  67.         <div class="item">test1</div>
  68.         <div class="item">test2</div>
  69.         <div class="item">test3</div>
  70.         <div class="item">test4</div>
  71.     </div>
  72. </body>
  73. </html>

align-content（交叉轴）属性应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>多行对其</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         .container,.container1,.container2,.container3{
  14.             /* 转为flex弹性布局元素 */
  15.             display: flex;
  16.             height: 10em;
  17.             border: 1px solid #000;
  18.             padding: 1em;
  19.             margin: 1em;
  20.         }
  21.         .container>.item,
  22.         .container1>.item,
  23.         .container2>.item,
  24.         .container3>.item{
  25.             width: 4em;
  26.             background-color: lightcyan;
  27.             border: 1px solid #000;
  28.         }
  29.         .container{
  30.             flex-wrap: wrap;
  31.             align-content:stretch;
  32.         }
  33.         .container2{
  34.             flex-wrap: wrap;
  35.             align-content:flex-start;
  36.         }
  37.         .container1{
  38.             flex-wrap: wrap;
  39.             align-content:flex-end;
  40.         }
  41.         .container3{
  42.             flex-wrap: wrap;
  43.             align-content:center;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <h2>默认值，撑满整个交叉轴空间</h2>
  49.     <div class="container">
  50.         <div class="item">test1</div>
  51.         <div class="item">test2</div>
  52.         <div class="item">test3</div>
  53.         <div class="item">test4</div>
  54.         <div class="item">test5</div>
  55.         <div class="item">test6</div>
  56.         <div class="item">test7</div>
  57.         <div class="item">test8</div>
  58.         <div class="item">test9</div>
  59.         <div class="item">test10</div>
  60.         <div class="item">test11</div>
  61.         <div class="item">test12</div>
  62.     </div>
  63.     <h2>靠上部对其</h2>
  64.     <div class="container2">
  65.         <div class="item">test1</div>
  66.         <div class="item">test2</div>
  67.         <div class="item">test3</div>
  68.         <div class="item">test4</div>
  69.         <div class="item">test5</div>
  70.         <div class="item">test6</div>
  71.         <div class="item">test7</div>
  72.         <div class="item">test8</div>
  73.         <div class="item">test9</div>
  74.         <div class="item">test10</div>
  75.         <div class="item">test11</div>
  76.         <div class="item">test12</div>
  77.     </div>
  78.     <h2>靠底部对其</h2>
  79.     <div class="container1">
  80.         <div class="item">test1</div>
  81.         <div class="item">test2</div>
  82.         <div class="item">test3</div>
  83.         <div class="item">test4</div>
  84.         <div class="item">test5</div>
  85.         <div class="item">test6</div>
  86.         <div class="item">test7</div>
  87.         <div class="item">test8</div>
  88.         <div class="item">test9</div>
  89.         <div class="item">test10</div>
  90.         <div class="item">test11</div>
  91.         <div class="item">test12</div>
  92.     </div>
  93.     <h2>居中对其</h2>
  94.     <div class="container3">
  95.         <div class="item">test1</div>
  96.         <div class="item">test2</div>
  97.         <div class="item">test3</div>
  98.         <div class="item">test4</div>
  99.         <div class="item">test5</div>
  100.         <div class="item">test6</div>
  101.         <div class="item">test7</div>
  102.         <div class="item">test8</div>
  103.         <div class="item">test9</div>
  104.         <div class="item">test10</div>
  105.         <div class="item">test11</div>
  106.         <div class="item">test12</div>
  107.     </div>
  108. </body>
  109. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>多行对其</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         .container,.container1,.container2,.container3{
  14.             /* 转为flex弹性布局元素 */
  15.             display: flex;
  16.             height: 10em;
  17.             border: 1px solid #000;
  18.             padding: 1em;
  19.             margin: 1em;
  20.         }
  21.         .container>.item,
  22.         .container1>.item,
  23.         .container2>.item,
  24.         .container3>.item{
  25.             width: 4em;
  26.             background-color: lightcyan;
  27.             border: 1px solid #000;
  28.         }
  29.         .container{
  30.             flex-wrap: wrap;
  31.             align-content:space-between;
  32.         }
  33.         .container2{
  34.             flex-wrap: wrap;
  35.             align-content:space-around;
  36.         }
  37.         .container1{
  38.             flex-wrap: wrap;
  39.             align-content:space-evenly;
  40.         }
  41.         .container3{
  42.             flex-wrap: wrap;
  43.             align-content:center;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <h2>两端对其</h2>
  49.     <div class="container">
  50.         <div class="item">test1</div>
  51.         <div class="item">test2</div>
  52.         <div class="item">test3</div>
  53.         <div class="item">test4</div>
  54.         <div class="item">test5</div>
  55.         <div class="item">test6</div>
  56.         <div class="item">test7</div>
  57.         <div class="item">test8</div>
  58.         <div class="item">test9</div>
  59.         <div class="item">test10</div>
  60.         <div class="item">test11</div>
  61.         <div class="item">test12</div>
  62.     </div>
  63.     <h2>分散对其</h2>
  64.     <div class="container2">
  65.         <div class="item">test1</div>
  66.         <div class="item">test2</div>
  67.         <div class="item">test3</div>
  68.         <div class="item">test4</div>
  69.         <div class="item">test5</div>
  70.         <div class="item">test6</div>
  71.         <div class="item">test7</div>
  72.         <div class="item">test8</div>
  73.         <div class="item">test9</div>
  74.         <div class="item">test10</div>
  75.         <div class="item">test11</div>
  76.         <div class="item">test12</div>
  77.     </div>
  78.     <h2>平均对其</h2>
  79.     <div class="container1">
  80.         <div class="item">test1</div>
  81.         <div class="item">test2</div>
  82.         <div class="item">test3</div>
  83.         <div class="item">test4</div>
  84.         <div class="item">test5</div>
  85.         <div class="item">test6</div>
  86.         <div class="item">test7</div>
  87.         <div class="item">test8</div>
  88.         <div class="item">test9</div>
  89.         <div class="item">test10</div>
  90.         <div class="item">test11</div>
  91.         <div class="item">test12</div>
  92.     </div>
  93. </body>
  94. </html>

flex项目属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>flex项目</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         .container,.container1,.container2,.container3{
  14.             /* 转为flex弹性布局元素 */
  15.             display: flex;
  16.             height: 10em;
  17.             border: 1px solid #000;
  18.             padding: 1em;
  19.             margin: 1em;
  20.         }
  21.         .container>.item,
  22.         .container1>.item,
  23.         .container2>.item,
  24.         .container3>.item{
  25.             width: 4em;
  26.             background-color: lightcyan;
  27.             border: 1px solid #000;
  28.         }
  29.         .container>.item {
  30.             flex: 0 1 auto;
  31.         }
  32.         .container2>.item{
  33.             flex: 1 1 auto;
  34.         }
  35.         .container1>.item{
  36.             flex: 0 0 auto;
  37.         }
  38.         .container3>.item{
  39.             flex-wrap: wrap;
  40.             align-content:center;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <h2>不放大 可收缩 默认宽度</h2>
  46.     <div class="container">
  47.         <div class="item">test1</div>
  48.         <div class="item">test2</div>
  49.         <div class="item">test3</div>
  50.         <div class="item">test4</div>
  51.     </div>
  52.     <h2>可放大 可收缩 默认宽度</h2>
  53.     <div class="container2">
  54.         <div class="item">test1</div>
  55.         <div class="item">test2</div>
  56.         <div class="item">test3</div>
  57.         <div class="item">test4</div>
  58.     </div>
  59.     <h2>不放大 不收缩 默认宽度</h2>
  60.     <div class="container1">
  61.         <div class="item">test1</div>
  62.         <div class="item">test2</div>
  63.         <div class="item">test3</div>
  64.         <div class="item">test4</div>
  65.     </div>
  66.     <h2>order排序,值越小越靠前</h2>
  67.     <div class="container3">
  68.         <div class="item" style="order:4">test1</div>
  69.         <div class="item" style="order:1">test2</div>
  70.         <div class="item" style="order:3">test3</div>
  71.         <div class="item" style="order:2">test4</div>
  72.         <div class="item" style="order:-1">我最靠前</div>
  73.     </div>
  74. </body>
  75. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>align-self</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         .container,.container1,.container2,.container3{
  14.             /* 转为flex弹性布局元素 */
  15.             display: flex;
  16.             height: 10em;
  17.             border: 1px solid #000;
  18.             padding: 1em;
  19.             margin: 1em;
  20.         }
  21.         .container>.item{
  22.             width: 4em;
  23.             background-color: lightcyan;
  24.             border: 1px solid #000;
  25.         }
  26.         .container>.item {
  27.             flex: 0 1 auto;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <h2>设置项目自身对其方式</h2>
  33.     <div class="container">
  34.         <div class="item" style="align-self:center">test1</div>
  35.         <div class="item" style="align-self:flex-start">test2</div>
  36.         <div class="item" style="align-self:flex-end">test3</div>
  37.     </div>
  38. </body>
  39. </html>

上一条：定位类型与模态登录框案例下一条：1222 将flex容器与项目的常用属性全部进行实例演示，并理解属性的常用值的显示效果
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多