Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1222 flex的简单练习
Blogger Information
Blog 15
fans 0
comment 0
visits 9229
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1222 flex的简单练习
fanyigle_php
Original
744 people have browsed it

  1. 定位的布局思路练习

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>定位的布局思路练习</title>
    7.  <!--
    8.      1.确定文档结构
    9.      2.样式的初始化
    10.      3.分块的样式设定
    11.  -->
    12.  <style>
    13.    * {
    14.      margin: 0;
    15.      padding: 0;
    16.      box-sizing: border-box;
    17.    }
    18.    header {
    19.      background-color: antiquewhite;
    20.      min-height: 10em;
    21.    }
    23.    .container {
    24.      min-height: 20em;
    25.      position: relative;
    26.      margin: 1em 0;
    27.    }
    28.    .container aside:first-of-type {
    29.      min-height: inherit;
    30.      width: 5em;
    31.      background-color: hotpink;
    32.      position: absolute;
    33.      top: 0;
    34.      left: 0;
    35.    }
    37.    .container aside:last-of-type {
    38.      min-height: inherit;
    39.      width: 5em;
    40.      background-color: darkgoldenrod;
    41.      position: absolute;
    42.      top: 0;
    43.      right: 0;
    44.    }
    46.    .container main {
    47.      min-height: inherit;
    48.      background-color: darkmagenta;
    49.      /* padding: 0 5em; */
    50.      position: absolute;
    51.      left: 5em;
    52.      right: 5em;
    53.      margin: 0 0.5em;
    54.    }
    55.    footer {
    56.      background-color: aquamarine;
    57.      min-height: 10em;
    58.    }
    59.  </style>
    60. </head>
    61. <body>
    62.  <header>头部</header>
    63.  <div class="container">
    64.    <aside>左侧</aside>
    65.    <main>主题</main>
    66.    <aside>右侧</aside>
    67.  </div>
    68.  <footer>尾部</footer>
    69. </body>
    70. </html>

  2. flex实现水平和垂直居中

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    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.    .box {
    9.      width: 15em;
    10.      height: 15em;
    11.      background-color: aquamarine;
    12.      position: relative;
    13.    }
    14.    .box .item {
    15.      width: 5em;
    16.      height: 5em;
    17.      background-color: yellow;
    18.      position: absolute;
    19.    }
    20.    /* .box .item {
    21.      width: 5em;
    22.      height: 5em;
    23.      background-color: yellow;
    24.      position: absolute;
    25.      left: 0;
    26.      top: 0;
    27.      right: 0;
    28.      bottom: 0;
    29.      margin: auto;
    30.    } */
    32.    .box {
    33.      display: flex;
    34.      justify-content: center;
    35.      align-items: center;
    36.    }
    37.  </style>
    38. </head>
    39. <body>
    40.  <div class="box">
    41.    <div class="item"></div>
    42.  </div>
    43. </body>
    44. </html>

  3. 用flex写三列

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    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.      box-sizing: border-box;
    10.    }
    11.    /*实体元素改色可见*/
    12.    body *:not(.container) {
    13.      background-color: antiquewhite;
    14.    }
    16.    header,
    17.    footer {
    18.      height: 10vh;
    19.    }
    21.    .container {
    22.      height: calc(80vh - 1em);
    23.      margin: 0.5em 0;
    24.      display: flex;
    25.    }
    27.    .container aside {
    28.      min-width: 15em;
    29.    }
    31.    .container main {
    32.      min-width: calc(100vw - 30em - 2em);
    33.      margin: 0 1em;
    34.    }
    35.  </style>
    36. </head>
    37. <body>
    38.  <header>头部</header>
    39.  <div class="container">
    40.    <aside>左侧</aside>
    41.    <main>主题</main>
    42.    <aside>右侧</aside>
    43.  </div>
    44.  <footer>尾部</footer>
    45. </body>
    46. </html>

  4. grid写三行三列

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>grid写三行三列</title>
    7.  <style>
    8.    body {
    9.      height: 100vh;
    10.      display: grid;
    11.      grid-template-columns: 10em 1fr 10rem;
    12.      grid-template-rows: 10vh 1fr 10vh;
    13.      gap: 0.5em;
    14.    }
    16.    body > * {
    17.      background-color: aqua;
    18.    }
    20.    header,
    21.    footer {
    22.      grid-column: span 3;
    23.    }
    24.  </style>
    25. </head>
    26. <body>
    27.  <header>头部</header>
    29.  <aside>左侧</aside>
    30.  <main>主题</main>
    31.  <aside>右侧</aside>
    33.  <footer>尾部</footer>
    34. </body>
    35. </html>

  5. 弹性容器与子项目

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    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.      box-sizing: border-box;
    10.    }
    11.    .container {
    12.      display: flex;
    13.      height: 20em;
    14.      padding: 1em;
    15.      border: 1em dotted blue;
    16.    }
    17.    .item {
    18.      width: 10em;
    19.      height: 6em;
    20.      border: 1px solid red;
    21.    }
    23.    .item:last-of-type {
    24.      display: flex;
    25.    }
    27.    .subitem {
    28.      border: 2px dashed green;
    29.    }
    30.  </style>
    31. </head>
    33. <body>
    34.  <div class="container">
    35.    <div class="item">item1</div>
    36.    <div class="item">item2</div>
    37.    <div class="item">
    38.      item3
    39.      <div class="subitem">subitem1</div>
    40.      <div class="subitem">subitem2</div>
    41.      <div class="subitem">subitem3</div>
    42.    </div>
    43.  </div>
    44. </body>
    45. </html>
  6. 项目的排列和换行
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    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.    .container {
    9.      display: flex;
    10.      /* flex-direction: row;
    11.      flex-wrap: wrap; */
    12.      flex-flow: row wrap;
    13.      height: 20em;
    14.      /* width: 10em; */
    15.      padding: 1em;
    16.      border: 2px solid green;
    17.    }
    18.    .item {
    19.      width: 5em;
    20.      height: 4em;
    21.      border: 1px solid red;
    22.    }
    23.  </style>
    24. </head>
    25. <body>
    26.  <div class="container">
    27.    <div class="item">item1</div>
    28.    <div class="item">item2</div>
    29.    <div class="item">item3</div>
    30.    <div class="item">item4</div>
    31.    <div class="item">item5</div>
    32.    <div class="item">item6</div>
    33.    <div class="item">item7</div>
    34.    <div class="item">item8</div>
    35.  </div>
    36. </body>
    37. </html>

  7. 项目在容器内的横纵对齐方式

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>项目在容器内的横纵对齐方式</title>
    7.  <!--
    8.      对齐解决的是项目和留白区域的划分
    9.      1.项目在主轴上和交叉轴上有剩余空间则可以使用对齐,调整项目的位置;
    10.  -->
    11.  <style>
    12.    .container {
    13.      display: flex;
    14.      /* flex-direction: row;
    15.      flex-wrap: wrap; */
    16.      flex-flow: row wrap;
    17.      height: 20em;
    18.      /* width: 10em; */
    19.      padding: 1em;
    20.      border: 2px solid green;
    21.    }
    22.    .item {
    23.      width: 5em;
    24.      height: 4em;
    25.      border: 1px solid red;
    26.    }
    27.    .container {
    28.      /*主轴上的对齐方式,水平移动*/
    30.      /*1.所有项目无间隙排列*/
    31.      justify-content: flex-start;
    32.      justify-content: flex-end;
    33.      justify-content: center;
    34.      /*2.每个项目左右都有间隙*/
    35.      justify-content: space-around;
    36.      justify-content: space-between;
    37.      justify-content: space-evenly;
    39.      /*交叉轴上的对齐,垂直移动*/
    40.      align-items: stretch;
    41.      align-items: flex-start;
    42.      align-items: flex-end;
    43.      align-items: center;
    44.    }
    45.  </style>
    46. </head>
    47. <body>
    48.  <div class="container">
    49.    <div class="item">item1</div>
    50.    <div class="item">item2</div>
    51.    <div class="item">item3</div>
    52.    <div class="item">item4</div>
    53.    <div class="item">item5</div>
    54.    <div class="item">item6</div>
    55.    <div class="item">item7</div>
    56.  </div>
    57. </body>
    58. </html>

  8. 多行项目在容器内的横纵对齐方式

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>多行项目在容器内的横纵对齐方式</title>
    7.  <!--
    8.      对齐解决的是项目和留白区域的划分
    9.      1.项目在主轴上和交叉轴上有剩余空间则可以使用对齐,调整项目的位置;
    10.  -->
    11.  <style>
    12.    .container {
    13.      display: flex;
    14.      /* flex-direction: row;
    15.      flex-wrap: wrap; */
    16.      flex-flow: row wrap;
    17.      height: 20em;
    18.      /* width: 10em; */
    19.      padding: 1em;
    20.      border: 2px solid green;
    21.    }
    22.    .item {
    23.      width: 5em;
    24.      height: 4em;
    25.      border: 1px solid red;
    26.    }
    27.    .container {
    28.      /*主轴上的对齐方式,水平移动*/
    30.      /*1.所有项目无间隙排列*/
    31.      justify-content: flex-start;
    32.      justify-content: flex-end;
    33.      justify-content: center;
    34.      /*2.每个项目左右都有间隙*/
    35.      /* justify-content: space-around;
    36.      justify-content: space-between;*/
    37.      justify-content: space-evenly;
    39.      /*交叉轴上的对齐,垂直移动*/
    40.      /*align-items先切割成多行,然后处理每行的交叉轴对齐*/
    41.      align-items: stretch;
    42.      align-items: flex-start;
    43.      align-items: flex-end;
    44.      /* align-items: center; */
    46.      /*多行项目沿交叉轴无间隙,整体移动*/
    47.      /* align-content: flex-end;
    48.      align-content: flex-start; */
    49.      /* align-content: center; */
    51.      /*多行项目沿交叉轴有间隙调整*/
    52.      /* align-content: space-between;
    53.      align-content: space-evenly;*/
    54.      align-content: space-around;
    55.    }
    56.  </style>
    57. </head>
    58. <body>
    59.  <div class="container">
    60.    <div class="item">item1</div>
    61.    <div class="item">item2</div>
    62.    <div class="item">item3</div>
    63.    <div class="item">item4</div>
    64.    <div class="item">item5</div>
    65.    <div class="item">item6</div>
    66.    <div class="item">item7</div>
    67.    <div class="item">item8</div>
    68.    <div class="item">item9</div>
    69.    <div class="item">item10</div>
    70.    <div class="item">item11</div>
    71.    <div class="item">item12</div>
    72.  </div>
    73. </body>
    74. </html>

  9. 项目的flex属性\order属性\align-self属性

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>项目的flex属性\order属性\align-self属性</title>
    7.  <!--改变项目大小\交叉轴对齐\在容器中的顺序-->
    8.  <style>
    9.    .container {
    10.      display: flex;
    11.      /* flex-direction: row;
    12.                  flex-wrap: wrap; */
    13.      flex-flow: row nowrap;
    14.      height: 20em;
    15.      /* width: 10em; */
    16.      padding: 1em;
    17.      border: 2px solid green;
    18.    }
    19.    .item {
    20.      width: 5em;
    21.      /* height: 4em; */
    22.      border: 1px solid red;
    23.    }
    24.    .container .item {
    25.      /* 默认值 */
    26.      flex: 0 1 auto;
    27.      flex: initial;
    28.      /*允许放大*/
    29.      flex: 1 1 auto;
    30.      flex: auto;
    31.      flex: 1;
    32.      /*禁止放大和缩小*/
    33.      flex: 0 0 auto;
    34.      flex: none;
    35.      /*test*/
    37.      flex: 3;
    38.    }
    40.    .container > .item:last-of-type,
    41.    .container > .item:nth-of-type(2) {
    42.      flex: 1;
    43.    }
    45.    /*设置某一个项目在交叉轴上的对齐方式*/
    46.    .container > .item:first-child {
    47.      align-self: flex-start;
    48.    }
    49.    /*项目的order属性*/
    51.    .container .item:nth-child(2) {
    52.      order: -1;
    53.    }
    54.  </style>
    55. </head>
    57. <body>
    58.  <div class="container">
    59.    <div class="item">item1</div>
    60.    <div class="item">item2</div>
    61.    <div class="item">item3</div>
    62.    <div class="item">item4</div>
    63.    <div class="item">item5</div>
    64.    <div class="item">item6</div>
    65.    <div class="item">item7</div>
    66.    <div class="item">item8</div>
    67.    <div class="item">item9</div>
    68.  </div>
    69. </body>
    70. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post