PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载
最新更新

博客列表 > flex容器与项目的常用属性实例演示

flex容器与项目的常用属性实例演示

吳
吳 原创
2020年12月23日 02:23:15 594浏览

flex容器与项目的常用属性实例演示

1. flex容器常用属性

flex容器 描述 属性
flex-flow 主轴方向与换行 row/column norap/wrap
justify-content 项目在主轴上的对齐方式 默认：flex-start 项目位于容器结尾：flex-end 项目位于容器的中心：center 两端对齐：space-between 分散对齐：space-around 平均对齐：space-evenly
align-items 项目在交叉轴上的对齐方式 默认拉伸：stretch 元素位于容器中心：center 元素位于容器开头：flex-start 元素位于容器结尾：flex-end
align-content 项目在多行容器中的交叉轴上的对齐方式 默认拉伸：stretch 元素位于容器的中心：center 元素位于容器的开头：flex-start 元素位于容器结尾：flex-end 两端对齐：space-between 分散对齐：space-around 平均对齐：space-evenly
  • 主轴方向与换行
  1. <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.         }
  14.         .container {
  15.             background-color: skyblue;
  16.             height: 15em;
  17.             display: flex;
  18.             margin: 1em;
  19.             padding: 2em;
  20.             border: 2px solid red;
  22.         }
  24.         .container>.item {
  25.             border: 1px solid black;
  26.             background-color: lightcyan;
  27.             height: 5em;
  28.             width: 5em;
  29.         }
  31.         .container {
  32.             /* 水平方向是row 垂直方向是column 换行wrap 不换行nowrap */
  33.             /* 水平方向 不换行 */
  34.             flex-flow: row nowrap;
  35.             /* 水平方向 换行显示 */
  36.             flex-flow: row wrap;
  38.             /* 垂直方向 不换行 */
  39.             flex-flow: column nowrap;
  40.             /* 垂直方向 换行 */
  41.             flex-flow: column wrap;
  42.         }
  43.     </style>
  44. </head>
  46. <body>
  47.     <div class="container">
  48.         <div class="item">test1</div>
  49.         <div class="item">test2</div>
  50.         <div class="item">test3</div>
  51.         <div class="item">test4</div>
  52.         <div class="item">test5</div>
  53.         <div class="item">test6</div>
  54.     </div>
  55. </body>
  57. </html>

演示截图

  • 项目在主轴上的对齐方式
  1. <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.         }
  14.         .container {
  15.             background-color: lightcyan;
  16.             border: 1px solid black;
  17.             height: 15em;
  18.             margin: 1em;
  19.             padding: 1em;
  20.             display: flex;
  21.         }
  23.         .container>.item {
  24.             background-color: lightblue;
  25.             border: 1px solid black;
  26.             height: 5em;
  27.             width: 5em;
  28.         }
  30.         .container {
  31.             /* 1.将所有项目视为一个整体，在项目组两边进行分配 */
  32.             /* 右对齐 */
  33.             justify-content: flex-start;
  34.             /* 左对齐 */
  35.             justify-content: flex-end;
  36.             /* 居中显示 */
  37.             justify-content: center;
  39.             /* 2.将项目视为一个个独立的个体，在项目之间进行分配 */
  40.             /* 两端对齐 */
  41.             justify-content: space-between;
  42.             /* 分散对齐 */
  43.             justify-content: space-around;
  44.             /* 平均对齐 */
  45.             justify-content: space-evenly;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div class="container">
  52.         <div class="item">test1</div>
  53.         <div class="item">test2</div>
  54.         <div class="item">test3</div>
  55.         <div class="item">test4</div>
  56.         <div class="item">test5</div>
  57.         <div class="item">test6</div>
  58.     </div>
  59. </body>
  61. </html>

演示截图

  • 项目在交叉轴上的对齐方式
  1. <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.         }
  14.         .container {
  15.             background-color: skyblue;
  16.             border: 3px solid red;
  17.             padding: 1em;
  18.             margin: 1em;
  19.             display: flex;
  20.             height: 15em;
  21.         }
  23.         .container>.item {
  24.             background-color: yellow;
  25.             border: 1px solid red;
  26.             height: 5em;
  27.             width: 5em;
  28.         }
  30.         .container {
  31.             /* 默认，拉伸子元素 */
  32.             align-items: stretch;
  33.             /* 位于元素容器顶部 */
  34.             align-items: flex-start;
  35.             /* 位于元素容器底部 */
  36.             align-items: flex-end;
  37.             /* 元素位于容器中心 */
  38.             align-items: center;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">test1</div>
  46.         <div class="item">test2</div>
  47.         <div class="item">test3</div>
  48.         <div class="item">test4</div>
  49.         <div class="item">test5</div>
  50.         <div class="item">test6</div>
  51.     </div>
  52. </body>
  54. </html>

  • 项目在多行容器中的交叉轴上的对齐方式
  1. <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.         }
  14.         .container {
  15.             background-color: lightgreen;
  16.             border: 1px solid red;
  17.             height: 25em;
  18.             margin: 1em;
  19.             padding: 1em;
  20.             display: flex;
  21.         }
  23.         .container>.item {
  24.             background-color: skyblue;
  25.             border: 1px solid red;
  26.             height: 5em;
  27.             width: 8em;
  28.         }
  30.         .container {
  31.             flex-flow: row wrap;
  32.             /* 拉伸对齐 */
  33.             align-content: stretch;
  34.             /* 位于容器的中心 */
  35.             align-content: center;
  36.             /* 位于容器的开头 */
  37.             align-content: flex-start;
  38.             /* 位于容器结尾 */
  39.             align-content: flex-end;
  40.             /* 两端对齐 */
  41.             align-content: space-between;
  42.             /* 分散对齐 */
  43.             align-content: space-around;
  44.             /* 平均对齐 */
  45.             align-content: space-evenly;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div class="container">
  52.         <div class="item">test1</div>
  53.         <div class="item">test2</div>
  54.         <div class="item">test3</div>
  55.         <div class="item">test4</div>
  56.         <div class="item">test5</div>
  57.         <div class="item">test6</div>
  58.         <div class="item">test7</div>
  59.         <div class="item">test8</div>
  60.         <div class="item">test9</div>
  61.         <div class="item">test10</div>
  62.         <div class="item">test11</div>
  63.         <div class="item">test12</div>
  64.     </div>
  65. </body>
  67. </html>

演示截图

2.flex项目常用属性

flex项目 描述 属性
flex 项目的伸缩与宽度 放大（0禁止 1开启） 收缩（0禁止 1开启） 基准宽度（使用auto）
align-self 项目的对齐方式 默认：stretch 位于项目顶部：flex-start 位于项目底部：flex-end 位于项目中心：center
order 项目在主轴上的排列顺序 0默认，支持负值
  • 项目的伸缩与宽度
  1. <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.         }
  14.         .container {
  15.             background-color: skyblue;
  16.             border: 2px solid red;
  17.             height: 15em;
  18.             margin: 1em;
  19.             padding: 1em;
  20.             display: flex;
  21.         }
  23.         .container>.item {
  24.             background-color: lightcyan;
  25.             border: 1px solid black;
  26.             height: 2em;
  27.             width: 5em;
  28.         }
  30.         .container>.item {
  31.             /* flex: flex-gro flex-shrink flex-basis */
  32.             /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
  33.             /* 默认值：不放大或收缩  */
  34.             flex: 0 1 auto;
  35.             /* 放大 收缩 */
  36.             flex: 1 1 auto;
  37.             /* 禁止放大 收缩 */
  38.             flex: 0 0 auto;
  40.             /* 如果只有一个数字，省略掉后面两个参数，表示的放大因子 */
  41.             flex: 1;
  42.             /* flex通常不会用来设置所有项目的默认选项，通常用来设置某一个项目的特征，也就是定制 */
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <div class="container">
  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 class="item">test5</div>
  54.         <div class="item">test6</div>
  55.     </div>
  56. </body>
  58. </html>

演示截图

  • 项目的对齐方式
  1. <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.         }
  14.         .container {
  15.             background-color: lightblue;
  16.             border: 3px solid black;
  17.             margin: 2em;
  18.             padding: 2em;
  19.             height: 15em;
  20.             display: flex;
  21.         }
  23.         .container>.item {
  24.             background-color: lightgreen;
  25.             border: 1px solid red;
  26.             width: 5em;
  27.         }
  29.         .container>.item:nth-of-type(3) {
  30.             align-self: stretch;
  31.             /* 上对齐 */
  32.             align-self: flex-start;
  33.             /* 下对齐 */
  34.             align-self: flex-end;
  35.             /* 居中 */
  36.             align-self: center;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42.     <div class="container">
  43.         <div class="item">test1</div>
  44.         <div class="item">test2</div>
  45.         <div class="item">test3</div>
  46.         <div class="item">test4</div>
  47.     </div>
  48. </body>
  50. </html>

演示截图

  • 项目在主轴上的排列顺序
  1. <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.         }
  14.         .container {
  15.             background-color: violet;
  16.             border: 2px solid yellow;
  17.             margin: 1em;
  18.             padding: 1em;
  19.             display: flex;
  20.             height: 15em;
  21.         }
  23.         .container>.item {
  24.             background-color: lightblue;
  25.             border: 1px solid lightseagreen;
  26.             width: 8em;
  27.         }
  29.         .container>.item:first-of-type {
  30.             order: 1;
  31.             background-color: yellow;
  32.         }
  34.         .container>.item:nth-of-type(2) {
  35.             order: -1;
  36.             background-color: lightgreen;
  37.         }
  39.         .container>.item:nth-of-type(2)+* {
  40.             order: 0;
  41.             background-color: red;
  42.         }
  44.         .container>.item:last-of-type {
  45.             order: 4;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div class="container">
  52.         <div class="item">test1</div>
  53.         <div class="item">test2</div>
  54.         <div class="item">test3</div>
  55.         <div class="item">test4</div>
  56.     </div>
  57. </body>
  59. </html>

演示截图

上一条： 盒模型类型讲解，常用元素定位对齐方式简介 下一条： 定位类型应用场景实例操作模态框
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多
热门课程