search

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

flex容器与项目的常用属性

a.
a.原创
2020年12月23日 01:29:10525浏览

1. 容器属性

编号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-conten 项目在主轴上的对齐方式
3 aling-items 项目在交叉轴上的对齐方式
4 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.       .container {
  9.         display: flex;
  10.         height: 40em;
  12.         padding: 1em;
  13.         margin: 1em;
  14.         border: limegreen 1px solid;
  15.       }
  16.       .item {
  17.         border: magenta solid 1px;
  18.         background-color: mediumslateblue;
  19.         width: 4em;
  20.         height: 3em;
  21.       }
  22.       /* 单行容器属性 */
  23.       .container {
  24.         /* flex-direction: row; 这个是默认属性 */
  25.         /* flex-wrap: nowrap; 这个是控制换行 */
  26.         /* 一般使用简写 */
  27.         /* flex-flow: nowrap row;默认值 */
  29.         /* 多行容器：一行显示不行，允许换行显示 */
  30.         /* flex-flow: row wrap; */
  32.         /* 换为列方向  主轴垂直方向*/
  33.         /* flex-flow: nowrap column; */
  34.         /* flex-flow: wrap column; */
  35.       }
  36.       /* 设置项目在单行容器上轴上的对齐前提：主轴上存在剩余空间 */
  37.       /* 空间分配的两个方案： */
  39.       .container {
  40.         /* 1.将所有项目视为一个整体，在项目组两边进行分配  */
  41.         /* 起始边对齐 */
  42.         justify-content: flex-start;
  43.         /* 终止边对齐 */
  44.         justify-content: flex-end;
  45.         /* 居中对齐 */
  46.         justify-content: center;
  47.         /* 2.将所有项目视为独立个体，在项目之间进行分配  */
  48.         /* 两端对齐 */
  49.         justify-content: space-between;
  50.         /*分散对齐：每个项目中间平均分配*/
  51.         justify-content: space-around;
  52.         /* 平均对齐 */
  53.         justify-content: space-evenly;
  54.       }
  56.       /* 交叉轴上的对齐方式： */
  57.       .container {
  58.         /* 默认拉伸 */
  59.         align-items: stretch;
  60.         align-items: flex-start;
  61.         align-items: flex-end;
  62.         align-items: center;
  63.       }
  64.     </style>
  65.   </head>
  66.   <body>
  67.     <div class="container">
  68.       <div class="item">1</div>
  69.       <div class="item">2</div>
  70.       <div class="item">3</div>
  71.       <div class="item">4</div>
  72.       <div class="item">5</div>
  73.       <div class="item">6</div>
  74.       <div class="item">7</div>
  75.       <div class="item">8</div>
  76.     </div>
  77.   </body>
  78. </html>

效果：

  • 起始边对齐
  • 终止边对齐
  • 居中对齐
  • 两端对齐
  • 分散对齐
  • 平均对齐

1.4 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.       .container {
  9.         display: flex;
  10.         height: 40em;
  11.         padding: 1em;
  12.         margin: 1em;
  13.         border: limegreen 1px solid;
  14.       }
  15.       .item {
  16.         border: magenta solid 1px;
  17.         background-color: mediumslateblue;
  18.         width: 4em;
  19.         height: 3em;
  20.       }
  21.       /* 多行容器属性 */
  22.       .container {
  23.         /* 多行容器 */
  24.         flex-flow: row wrap;
  25.         /* 默认值 */
  26.         align-content: stretch;
  28.         align-content: flex-start;
  29.         align-content: flex-end;
  30.         align-content: center;
  32.         /* 两端对齐 */
  33.         align-content: space-between;
  34.         /* 分散对齐 */
  35.         align-content: space-around;
  36.         /*平均对齐*/
  37.         align-content: space-evenly;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="container">
  43.       <div class="item">1</div>
  44.       <div class="item">2</div>
  45.       <div class="item">3</div>
  46.       <div class="item">4</div>
  47.       <div class="item">5</div>
  48.       <div class="item">6</div>
  49.       <div class="item">7</div>
  50.       <div class="item">8</div>
  51.     </div>
  52.   </body>
  53. </html>

效果：

  • 多行容器

2. 项目属性

编号 属性 描述
1 flex 项目的缩放比例与基准宽度
2 align-self 单个项目在交叉轴上的对齐方式
4 order 项目在主轴上排列顺序

2.1 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.       .container {
  9.         display: flex;
  10.         height: 40em;
  11.         padding: 1em;
  12.         margin: 1em;
  13.         border: limegreen 1px solid;
  14.       }
  15.       .item {
  16.         border: magenta solid 1px;
  17.         background-color: mediumslateblue;
  18.         width: 8em;
  19.         height: 3em;
  21.         /* flex: flex-grow flex-shrink flex-basis */
  22.         /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
  23.         /* 默认属性,不放大可以收缩 */
  24.         flex: 0 1 auto;
  25.         flex: initial;
  26.         /* 放大和收缩 */
  27.         flex: 1 1 auto;
  28.         flex: auto;
  29.         /* 禁止放大收缩 */
  30.         flex: 0 0 auto;
  31.         /* 简写 */
  32.         flex: none;
  34.         /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
  35.         flex: 1;
  36.         /* 等于 flex: 1 1 auto; */
  38.         /* flex一般不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */
  39.       }
  40.       .container > .item:last-of-type {
  41.         flex: 2;
  42.       }
  43.       .container > .item:nth-of-type(2),
  44.       .container > .item:first-of-type {
  45.         flex: 1;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <div class="container">
  51.       <div class="item">1</div>
  52.       <div class="item">2</div>
  53.       <div class="item">3</div>
  54.     </div>
  55.   </body>
  56. </html>

2.2 align-self

  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.       .container {
  9.         display: flex;
  10.         height: 20em;
  11.         padding: 1em;
  12.         margin: 1em;
  13.         border: limegreen 1px solid;
  14.       }
  15.       .item {
  16.         border: magenta solid 1px;
  17.         background-color: mediumslateblue;
  18.         width: 4em;
  19.         height: 3em;
  20.       }
  21.       /* 设置一个项目与其它项目对齐方式不一样 */
  22.       .item:first-of-type {
  23.         align-self: stretch;
  24.         align-self: flex-start;
  25.         align-self: flex-end;
  26.         align-self: center;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item">1</div>
  33.       <div class="item">2</div>
  34.       <div class="item">3</div>
  35.     </div>
  36.   </body>
  37. </html>

2.3 order

  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.       .container {
  9.         display: flex;
  10.         height: 40em;
  11.         padding: 1em;
  12.         margin: 1em;
  13.         border: limegreen 1px solid;
  14.       }
  15.       .item {
  16.         border: magenta solid 1px;
  17.         position: relative;
  18.         width: 4em;
  19.         height: 3em;
  20.       }
  21.       /* 设置一个项目与其它项目对齐方式不一样 */
  22.       .container > .item:first-of-type {
  23.         background-color: mediumslateblue;
  24.         order: 2;
  25.       }
  26.       .container > .item:nth-of-type(2) {
  27.         background-color: rgb(186, 211, 96);
  28.         order: 1;
  29.       }
  30.       .container > .item:last-of-type {
  31.         background-color: rgb(155, 238, 87);
  32.         order: 3;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="container">
  38.       <div class="item">1</div>
  39.       <div class="item">2</div>
  40.       <div class="item">3</div>
  41.     </div>
  42.   </body>
  43. </html>

上一条：定位类型应用场景实例操作模态框下一条：flex容器与项目的常用属性和实例演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
a.2020-12-23 13:09:042楼
row-reverse和colume-reverse写掉了
a.2020-12-23 12:13:351楼
好无语，我的效果图被吞了

相关文章

查看更多