search

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

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

幸福敲门的博客
幸福敲门的博客原创
2020年12月24日 02:20:04614浏览

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

flex布局的常用样式

序号 flex容器 说明
1 flex-direction flex-direction表示flex中元素的排列方式，默认为row row;从左到右水平排列 row-reverse;从右到左水平排列 column;从上到下垂直排列column-reverse：从下到上垂直排列
2 flex-wrap flex-wrap设置flex容器中当一行中的内容超过容器宽度时的排列处理方式.默认为nowrap nowrap：会将超过的内容“强行”挤在同一行;wrap：会将超过的元素放到下一行;wrap-reverse：会将超过的元素放在当前行，而没超过的元素放在下一行
3 flex-flow flex-flow是flex-direction和flex-wrap合起来写的样式，默认值为row nowrap
4 justify-content 该样式用于设置容器内元素在水平方向上的对齐方式，默认值为flex-start flex-start：左对齐;flex-end：右对齐;center：居中;space-between：元素紧贴容器左右两端，元素间的间距相同;space-around：元素与容器左右两端距离为元素间距离的一半，元素间的间距相同;space-evenly：元素间的间距相同，且两端元素和元素间的间距也是相同的
5 algin-items 该样式用于设置容器内元素在垂直上的对齐方式，默认值为stretch flex-start：以容器的顶部来对齐;flex-end：以容器的底部来对齐flex-end：以容器的底部来对齐;center：以容器的中间来对齐;baseline：按容器内元素的文字来对齐;stretch：当容器内元素没设置高度时默认占满整个容器高度
6 align-content 该样式设置了容器内多行元素的对齐方式，只有一行时该样式无效，默认值为stretch flex-start：第一行紧贴顶部;flex-end：最后一行紧贴底部;center：中间一行居中，其他行贴紧中间行;space-between：不同行行距相同，第一行和最后一行与容器顶部底部贴紧;space-around：不同行行距相同，第一行和最后一行与容器顶部底部距离为行距的一半;stretch：各行占满容器

图示：flex-direction布局

flex-direction布局

图示：flex-wrap布局

flex-wrap布局

图示：justify-content布局

justify-content布局

图示：algin-items 布局

algin-items 布局

图示：align-content 布局

align-content 布局

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>主轴方向与换行</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.         }
  12.         .container {
  13.             background-color: red;
  14.             height: 15em;
  15.             display: flex;
  16.             margin: 1em;
  17.             padding: 2em;
  18.             border: 3px solid green;
  19.         }
  20.         .container>.item {
  21.             border: 5px solid black;
  22.             background-color: lightcyan;
  23.             height: 5em;
  24.             width: 5em;
  25.         }
  26.         .container {
  27.             /* 水平方向是row 垂直方向是column 换行wrap 不换行nowrap */
  28.             /* 水平方向 不换行 */
  29.             flex-flow: row nowrap;
  30.             /* 水平方向 换行显示 */
  31.             flex-flow: row wrap;
  32.             /* 垂直方向 不换行 */
  33.             flex-flow: column nowrap;
  34.             /* 垂直方向 换行 */
  35.             flex-flow: column wrap;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="container">
  41.         <div class="item">php1</div>
  42.         <div class="item">php2</div>
  43.         <div class="item">php3</div>
  44.         <div class="item">php4</div>
  45.         <div class="item">php5</div>
  46.         <div class="item">php6</div>
  47.     </div>
  48. </body>
  49. </html>

图示：主轴方向与换行

.主轴上对齐

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>主轴上对齐</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.         }
  12.         .container {
  13.             background-color: lightcyan;
  14.             border: 2px solid black;
  15.             height: 15em;
  16.             margin: 1em;
  17.             padding: 1em;
  18.             display: flex;
  19.         }
  20.         .container>.item {
  21.             background-color: lightblue;
  22.             border: 1px solid black;
  23.             height: 5em;
  24.             width: 5em;
  25.         }
  26.         .container {
  27.             /* 1.将所有项目视为一个整体，在项目组两边进行分配 */
  28.             /* 右对齐 */
  29.             justify-content: flex-start;
  30.             /* 左对齐 */
  31.             justify-content: flex-end;
  32.             /* 居中显示 */
  33.             justify-content: center;
  34.             /* 2.将项目视为一个个独立的个体，在项目之间进行分配 */
  35.             /* 两端对齐 */
  36.             justify-content: space-between;
  37.             /* 分散对齐 */
  38.             justify-content: space-around;
  39.             /* 平均对齐 */
  40.             justify-content: space-evenly;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="container">
  46.         <div class="item">php1</div>
  47.         <div class="item">php2</div>
  48.         <div class="item">php3</div>
  49.         <div class="item">php4</div>
  50.         <div class="item">php5</div>
  51.         <div class="item">php6</div>
  52.     </div>
  53. </body>
  54. </html>

图示：
主轴上对齐

交叉轴对齐方式

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>交叉轴对齐方式</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.         }
  12.         .container {
  13.             background-color: skyblue;
  14.             border: 5px solid red;
  15.             padding: 1em;
  16.             margin: 1em;
  17.             display: flex;
  18.             height: 15em;
  19.         }
  20.         .container>.item {
  21.             background-color: red;
  22.             border: 3px solid green
  23.             height: 5em;
  24.             width: 5em;
  25.         }
  26.         .container {
  27.             /* 默认，拉伸子元素 */
  28.             align-items: stretch;
  29.             /* 位于元素容器顶部 */
  30.             align-items: flex-start;
  31.             /* 位于元素容器底部 */
  32.             align-items: flex-end;
  33.             /* 元素位于容器中心 */
  34.             align-items: center;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="item">php1</div>
  41.         <div class="item">php2</div>
  42.         <div class="item">php3</div>
  43.         <div class="item">php4</div>
  44.         <div class="item">php5</div>
  45.         <div class="item">php6</div>
  46.     </div>
  47. </body>
  48. </html>

图示：
交叉轴对齐方式

.多行容器交叉轴上的对齐方式

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>多行容器交叉轴上的对齐方式</title>.
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.         }
  12.         .container {
  13.             background-color: lightgreen;
  14.             border: 5px solid green;
  15.             height: 25em;
  16.             margin: 1em;
  17.             padding: 1em;
  18.             display: flex;
  19.         }
  20.         .container>.item {
  21.             background-color: skyblue;
  22.             border:2px solid red;
  23.             height: 5em;
  24.             width: 8em;
  25.         }
  26.         .container {
  27.             flex-flow: row wrap;
  28.             /* 拉伸对齐 */
  29.             align-content: stretch;
  30.             /* 位于容器的中心 */
  31.             align-content: center;
  32.             /* 位于容器的开头 */
  33.             align-content: flex-start;
  34.             /* 位于容器结尾 */
  35.             align-content: flex-end;
  36.             /* 两端对齐 */
  37.             align-content: space-between;
  38.             /* 分散对齐 */
  39.             align-content: space-around;
  40.             /* 平均对齐 */
  41.             align-content: space-evenly;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="container">
  47.         <div class="item">php1</div>
  48.         <div class="item">php2</div>
  49.         <div class="item">php3</div>
  50.         <div class="item">php4</div>
  51.         <div class="item">php5</div>
  52.         <div class="item">php6</div>
  53.         <div class="item">php7</div>
  54.         <div class="item">php8</div>
  55.         <div class="item">php9</div>
  56.         <div class="item">php10</div>
  57.         <div class="item">php11</div>
  58.         <div class="item">php12</div>
  59.     </div>
  60. </body>
  61. </html>

图示：
多行容器交叉轴上的对齐方式

2.flex项目常用属性

flex项目 描述 属性
flex 项目的伸缩与宽度 放大（0禁止 1开启） 收缩（0禁止 1开启） 基准宽度（使用auto）
align-self 项目的对齐方式 默认：stretch 位于项目顶部：flex-start 位于项目底部：flex-end 位于项目中心：center
order 项目在主轴上的排列顺序 0默认，支持负值 
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>flex的伸缩与宽度</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.         }
  12.         .container {
  13.             background-color: skyblue;
  14.             border: 5px solid green;
  15.             height: 15em;
  16.             margin: 1em;
  17.             padding: 1em;
  18.             display: flex;
  19.         }
  20.         .container>.item {
  21.             background-color: red;
  22.             border: 2px solid black;
  23.             height: 2em;
  24.             width: 5em;
  25.         }
  26.         .container>.item {
  27.             /* flex: flex-gro flex-shrink flex-basis */
  28.             /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
  29.             /* 默认值：不放大或收缩  */
  30.             flex: 0 1 auto;
  31.             /* 放大 收缩 */
  32.             flex: 1 1 auto;
  33.             /* 禁止放大 收缩 */
  34.             flex: 0 0 auto;
  35.             /* 如果只有一个数字，省略掉后面两个参数，表示的放大因子 */
  36.             flex: 1;
  37.             /* flex通常不会用来设置所有项目的默认选项，通常用来设置某一个项目的特征，也就是定制 */
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="container">
  43.         <div class="item">php1</div>
  44.         <div class="item">php2</div>
  45.         <div class="item">php3</div>
  46.         <div class="item">php4</div>
  47.         <div class="item">php5</div>
  48.         <div class="item">php6</div>
  49.     </div>
  50. </body>
  51. </html>

图示：
flex的伸缩与宽度

.flex的对齐方式案例

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>flex的对齐方式案例<title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.         }
  12.         .container {
  13.             background-color: red;
  14.             border: 5px solid black;
  15.             margin: 2em;
  16.             padding: 2em;
  17.             height: 15em;
  18.             display: flex;
  19.         }
  20.         .container>.item {
  21.             background-color: lightgreen;
  22.             border: 3px solid green
  23.             width: 5em;
  24.         }
  25.         .container>.item:nth-of-type(3) {
  26.             align-self: stretch;
  27.             /* 上对齐 */
  28.             align-self: flex-start;
  29.             /* 下对齐 */
  30.             align-self: flex-end;
  31.             /* 居中 */
  32.             align-self: center;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="container">
  38.         <div class="item">php1</div>
  39.         <div class="item">php2</div>
  40.         <div class="item">php3</div>
  41.         <div class="item">php4</div>
  42.     </div>
  43. </body>
  44. </html>

图示：
flex的对齐方式案例

.flex在主轴上的排列顺序

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>主轴排列顺序</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.         }
  12.         .container {
  13.             background-color: violet;
  14.             border: 2px solid yellow;
  15.             margin: 1em;
  16.             padding: 1em;
  17.             display: flex;
  18.             height: 15em;
  19.         }
  20.         .container>.item {
  21.             background-color: lightblue;
  22.             border: 1px solid lightseagreen;
  23.             width: 8em;
  24.         }
  25.         .container>.item:first-of-type {
  26.             order: 1;
  27.             background-color: yellow;
  28.         }
  29.         .container>.item:nth-of-type(2) {
  30.             order: -1;
  31.             background-color: lightgreen;
  32.         }
  33.         .container>.item:nth-of-type(2)+* {
  34.             order: 0;
  35.             background-color: red;
  36.         }
  37.         .container>.item:last-of-type {
  38.             order: 4;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="container">
  44.         <div class="item">php1</div>
  45.         <div class="item">php2</div>
  46.         <div class="item">php3</div>
  47.         <div class="item">php4</div>
  48.     </div>
  49. </body>
  50. </html>

图示：
主轴排列顺序

上一条：CSS 弹性盒子（flexbox）常用的的容器属性与项目属性介绍下一条：京东app页眉-推荐-页脚制作
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多