简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > flex常用的6个属性与实例演示
Blogger Information
Blog 36
fans 1
comment 0
visits 26398
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常用的6个属性与实例演示
早晨
Original
2006 people have browsed it

flex常用的6个属性分别是：

flex-direction、flex-wrap、flex-flow、align-items、align-content、justify-content

一.flex-direction属性：

决定主轴的的方向，即容器中项目排列的方向，一般默认的方向是横排列。
flex-direction有四个属性，它的属性值如下：
1、row（默认值）：主轴水平方向，起点在左端，
2、row-reverse：起点在右端，
3、column：主轴为垂直方向，起点在上沿，
4、column-reverse：起点在下沿。

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     body{
  16.         background-color: #ccc;
  17.     }
  18.     .mein{
  19.         height: 20em;
  20.         display: flex;
  21.         border: 2px solid yellow;
  22.         /* 主轴水平方向，起点在左端 */
  23.         flex-direction: row;
  24.         /* 起点在右端 */
  25.         /* flex-direction: row-reverse; */
  26.         /* 主轴为垂直方向，起点在上沿 */
  27.         /* flex-direction: column; */
  28.         /* 起点在下沿 */
  29.         /* flex-direction: column-reverse; */
  30.     }
  31.     .nav{
  32.         width: 10em;
  33.         padding: 1px;
  34.         background-color: lightgreen;
  35.         border: 1px solid lightgray;        
  36.     }
  37. </style>
  38. <body>
  39.     <div class="mein">
  40.         <div class="nav">flex1</div>
  41.         <div class="nav">flex2</div>
  42.         <div class="nav">flex3</div>
  43.     </div>
  44. </body>
  45. </html>

运行效果：

二.flex-wrap属性：

设置子元素的换行方式，它的属性值如下：
1、nowrap（默认值）：不换行 一直往后排（当父布局空间不足时，也不会换行此时可能就会有内容被遮挡看不见了）
2、wrap：换行，子元素往后排，当空间不足时会另起一行从新排列
3、wrap-reverse：换行，跟wrap相似 只是行会从下往上开始

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     body{
  16.         background-color: #ccc;
  17.     }
  18.     .mein{
  19.         height: 20em;
  20.         display: flex;
  21.         border: 2px solid yellow;
  22.         /* 默认值 不换行一直往后排 */
  23.         /* flex-wrap: nowrap; */
  24.         /* 换行，子元素往后排，当空间不足时会另起一行 */
  25.         /* flex-wrap: wrap; */
  26.         /* 换行，跟wrap相似，中是行会从下往上开始 */
  27.         flex-wrap: wrap-reverse;
  28.     }
  29.     .nav{
  30.         width: 15em;
  31.         padding: 1px;
  32.         background-color: lightgreen;
  33.         border: 1px solid lightgray;
  36.     }
  37. </style>
  38. <body>
  39.     <div class="mein">
  40.         <div class="nav">flex1</div>
  41.         <div class="nav">flex2</div>
  42.         <div class="nav">flex3</div>
  43.     </div>
  44. </body>
  45. </html>

运行效果：

三.flex-flow属性：

它是flex-direction属性和flex-wrap的简写。默认值（row nowrap）为横向排列不换行。

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     body{
  16.         background-color: #ccc;
  17.     }
  18.     .mein{
  19.         height: 20em;
  20.         display: flex;
  21.         border: 2px solid yellow;
  22.         /* 默认值（row nowrap）为横向排列不换行 */
  23.         flex-flow: row;
  24.     }
  25.     .nav{
  26.         width: 15em;
  27.         padding: 1px;
  28.         background-color: lightgreen;
  29.         border: 1px solid lightgray;
  32.     }
  33. </style>
  34. <body>
  35.     <div class="mein">
  36.         <div class="nav">flex1</div>
  37.         <div class="nav">flex2</div>
  38.         <div class="nav">flex3</div>
  39.     </div>
  40. </body>
  41. </html>

运行效果：

四.justify-content属性：

表示子元素在主轴方向上的对齐方式，它的属性值如下：
1、flex-start（默认值）：左对齐
2、flex-end：右对齐
3、center：居中
4、space-between： 两端对齐
5、space-around：两端对齐但是项目边上的元素和容器之间有空隙

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     body{
  16.         background-color: #ccc;
  17.     }
  18.     .mein{
  19.         height: 20em;
  20.         display: flex;
  21.         border: 2px solid yellow;
  22.         /* 左对齐 */
  23.         /* justify-content: flex-start; */
  24.         /* 右对齐 */
  25.         /* justify-content: flex-end; */
  26.         /* 居中对齐 */
  27.         /* justify-content: center; */
  28.         /* 两端对齐 */
  29.         /* justify-content: space-between; */
  30.         /* 两端对齐但是项目边上的元素和容器之间有空隙 */
  31.         justify-content: space-around;
  33.     }
  34.     .nav{
  35.         width: 10em;
  36.         padding: 1px;
  37.         background-color: lightgreen;
  38.         border: 1px solid lightgray;
  41.     }
  42. </style>
  43. <body>
  44.     <div class="mein">
  45.         <div class="nav">flex1</div>
  46.         <div class="nav">flex2</div>
  47.         <div class="nav">flex3</div>
  48.     </div>
  49. </body>
  50. </html>

运行效果：

五.align-items属性：

表示子元素在交叉轴上的排列方式，它的属性值如下：
1、flex-start：交叉轴的起点对齐
2、flex-end：终点对齐
3、center：中点对齐
4、baseline：项目的第一行文字基线对齐
5、stretch（默认值）：当项目未设置高度的时候，占满这个容器的高度

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     body{
  16.         background-color: #ccc;
  17.     }
  18.     .mein{
  19.         height: 20em;
  20.         display: flex;
  21.         border: 2px solid yellow;
  22.         /* 交叉轴的起点对齐 */
  23.         /* align-items: flex-start; */
  24.         /* 终点对齐 */
  25.         /* align-items: flex-end; */
  26.         /* 中点对齐 */
  27.         align-items: center;
  28.         /* 项目的第一行文字基线对齐 */
  29.         /* align-items: baseline; */
  30.         /* 项目未设置高度的时候，占满这个容器的高度 */
  31.         /* align-items: stretch; */
  33.     }
  34.     .nav{
  35.         width: 10em;
  36.         padding: 1px;
  37.         background-color: lightgreen;
  38.         border: 1px solid lightgray;
  41.     }
  42. </style>
  43. <body>
  44.     <div class="mein">
  45.         <div class="nav">flex1</div>
  46.         <div class="nav">flex2</div>
  47.         <div class="nav">flex3</div>
  48.     </div>
  49. </body>
  50. </html>

运行效果：

六.align-content属性：

它定义了多根轴线的对齐方式。当项目只有一根轴线的时候，该属性是不起作用的，它的属性值如下：
1、flex-start：交叉轴的起点对齐，
2、flex-end：终点对齐，
3、center：中点对齐，
4、space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布，
5、space-around：每根轴线两侧的间隔都相等，因此，轴线之间的间隔比轴线与边框的间隔大一倍，
6、strentch（默认值）：轴线占满整个交叉轴。

Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！