search

博客列表 >1222 flex的简单练习

1222 flex的简单练习

fanyigle_php
fanyigle_php原创
2021年02月13日 20:22:30745浏览

  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>
上一条：原型/类与DOM操作下一条：JS对象与流程控制
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多