简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >flex容器

flex容器

橙絮圆
橙絮圆原创
2021年07月06日 15:19:49477浏览

flex容器

作业内容：实例演示flex容器与项目中常用的属性,并写出功能

  • flex-flow
    主轴方向是否换行

    • 效果图
      flex-flow

    • 代码

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <title>flex项目在主轴上是如何排列的</title>
      8. <style>
      9.   /* flex-flow */
      10.   :root {
      11.     font-size: 10px;
      12.   }
      13.   body {
      14.     font-size: 1.6rem;
      15.   }
      16.   .container {
      17.     /* 转为flex容器，这样就可以使得flex特征进行布局了 */
      18.     display: flex;
      19.     border: 1px dashed;
      20.     /* flex-direction:row; */
      21.     width:40rem;
      22.     background-color:wheat;
      23.     /* flex-wrap: wrap; */
      24.     /* flex-flow:主轴方向 是否换行； */
      26.     /* 有换行：多行容器 */
      27.     /* 多行容器中，每一行都有一根主轴 */
      28.     flex-flow:row wrap;
      29.   }
      30.   /* flex项目必须是flex容器的直直接子元素 */
      31.   .container > .item {
      32.     /* 项目默认可收缩但不会放大 */
      33.     padding: 1rem;
      34.     height: 10rem;
      35.     background-color: lightcyan;
      36.     border: 1px solid;
      37.   }
      38.   /* 1.任何一个可视元素，添加display:flex后都可转为flex弹性容器 */
      39.   /* 2.flex弹性容器内的直接子元素称之为flex项目，它是真正的布局目标对象 */
      40. </style>
      41. </head>
      42. <body>
      43. <div class="container">
      44.   <div class="item">item1</div>
      45.   <div class="item">item2</div>
      46.   <div class="item">item3</div>
      47.   <div class="item">item4</div>
      48.   <div class="item">item5</div>
      49.   <div class="item">item6</div>
      50.   <div class="item">item7</div>
      51.   <div class="item">item8</div>
      52. </html>
  • justify-content:
    在主轴上的对齐方式
    flex-start 左对齐
    flex-end 右对齐
    space-between 两端对齐
    space-around 分散对齐
    space-evenly 平均对齐
    • 效果图
      justify-content
    • 代码
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <title>flex项目在主轴上是如何对齐的</title>
      8. <style>
      9.   :root {
      10.     font-size: 10px;
      11.   }
      12.   body {
      13.     font-size: 1.6rem;
      14.   }
      15.   .container {
      16.     display: flex;
      17.     border: 1px dashed;
      18.     height: 20rem;
      19.     justify-content: flex-start;
      20.     justify-content: flex-end;
      21.     justify-content: center;
      22.     /* 两端对齐 */
      23.     justify-content: space-between;
      24.     /* 分散对齐 */
      25.     justify-content:space-around;
      26.     /* 平均对齐 */
      27.     justify-content: space-evenly;
      28.   }
      29.   .container > .item {
      30.     padding: 1rem;
      31.     height: 10rem;
      32.     background-color: lightcyan;
      33.     border: 1px solid;
      34.   }
      35. </style>
      36. </head>
      37. <body>
      38. <div class="container">
      39.   <div class="item">item1</div>
      40.   <div class="item">item2</div>
      41.   <div class="item">item3</div>
      42.   <div class="item">item4</div>
      43. </html>
  • align-items
    交叉对齐
    stretch拉伸
    flex-start顶端对齐
    flex-end 底端对齐
    center 居中对齐
    • 效果图
      align-items
    • 代码
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <title>flex项目在主轴上是如何对齐的</title>
      8. <style>
      9.   :root {
      10.     font-size: 10px;
      11.   }
      12.   body {
      13.     font-size: 1.6rem;
      14.   }
      15.   .container {
      16.     display: flex;
      17.     border: 1px dashed;
      18.     height: 20rem;
      19.     justify-content: flex-start;
      20.     justify-content: flex-end;
      21.     justify-content: center;
      22.     /* 两端对齐 */
      23.     justify-content: space-between;
      24.     /* 分散对齐 */
      25.     justify-content:space-around;
      26.     /* 平均对齐 */
      27.     justify-content: space-evenly;
      28.     /* 交叉轴对齐 */
      29.     /* 拉抻 */
      30.     align-items: stretch;
      31.     align-items:flex-start;
      32.     align-items: flex-end;
      33.     align-items:center;
      34.   }
      35.   .container > .item {
      36.     padding: 1rem;
      37.     /* height: 10rem; */
      38.     background-color: lightcyan;
      39.     border: 1px solid;
      40.   }
      41. </style>
      42. </head>
      43. <body>
      44. <div class="container">
      45.   <div class="item">item1</div>
      46.   <div class="item">item2</div>
      47.   <div class="item">item3</div>
      48.   <div class="item">item4</div>
      49. </html>

  • flex属性
    flex 1 完全自适应

    • 效果图
      flex

    • 代码

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <title>flex属性</title>
      8. <style>
      9.   html {
      10.     font-size: 10px;
      11.   }
      12.   body {
      13.     font-size: 1.6rem;
      14.   }
      15.   /* flex容器 */
      16.   .container {
      17.     height: 20rem;
      19.     border: 1px solid;
      20.     display: flex;
      21.   }
      22.   /* flex项目 */
      23.   .container > .item {
      24.     /* max-width: 20rem; */
      25.     width: 20rem;
      26.     background-color: lightcyan;
      27.     border: 1px solid;
      28.     /* 项目的计算尺寸,优先级大于width,但小于min-width*/
      29.     /* flex-basis: 项目在主轴的宽度; */
      30.     /* flex-basis: 25rem; */
      31.     /* 禁止收缩 */
      32.     /* flex-shrink: 1; */
      33.     /* 默认不允许放大 */
      34.     /* flex-grow: 1; */
      35.     /* flex:放大因子 收缩因子 计算大小 */
      36.     /* flex默认：禁止放大，允许收缩，宽度自动 */
      37.     /* flex: 0 1 auto; */
      38.     /* 完全自适应 */
      39.     /* flex:1 1 auto; */
      40.     /* flex: auto; */
      41.     /* 完全无弹性，用在pc端布局 */
      42.     /* flex: 0 0 auto; */
      43.     /* flex: none; */
      44.     /* flex: 1;
      45.     flex: 1 1 auto; */
      46.   }
      47.   .container > .item:first-of-type,
      48.   .container > .item:last-of-type {
      49.     background-color: lightgreen;
      50.     flex: none;
      51.   }
      52.   .container > .item:first-of-type + .item {
      53.     flex: 1;
      54.   }
      55. </style>
      56. </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.   <!-- 三列布局，左右两列固定，中间自适应 -->
      63. </div>
      64. </body>
      65. </html>
上一条：一个免费开源的轻量级PHP开发框架下一条：flex容器与项目的认识和常用属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多