Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器与项目的常用属性实例演示
Blogger Information
Blog 41
fans 0
comment 0
visits 41136
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex容器与项目的常用属性实例演示
幸福敲门的博客
Original
621 people have browsed it

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>

图示：
主轴排列顺序

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post