Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 弹性盒子flex的常用6个属性
Blogger Information
Blog 48
fans 3
comment 1
visits 30313
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
1529 people have browsed it

1.flex容器上的三个必知属性

序号 属性 描述
1 flex-flow 控制主轴方向与项目是否允许换行
2 place-content 容器剩余空间在项目之间进行分配
3 place-items 项目在交叉轴上的对齐方式

1.1 flex-flow

flex-flow: value1 value2其中value1控制主轴上的方向，row:水平排列（默认）或column垂直排列;value2控制是否允许换行，nowrap不换行（默认）或wrap换行

例如：flex-flow: row wrap则表示flex容器内的项目水平排列且允许换行，如下：

  1.  <div class="container">
  2.       <div class="item">iten1</div>
  3.       <div class="item">iten2</div>
  4.       <div class="item">iten3</div>
  5.       <div class="item">iten4</div>
  6.       <div class="item">iten5</div>
  7.  </div>
  8.  <style>
  9.   body .container {
  10.       /* 转为弹性盒子flex */
  11.       display: flex;
  12.       /* 容器内的项目水平排列且允许换行 */
  13.       flex-flow: row wrap;
  14.   }
  15.  </style>

1.2 flex-content

flex-content在主轴（横轴）方向的六个常用的属性（水平排列）

序号 属性 描述
1 start 左对齐 剩余空间在项目的右侧（默认值）
2 end 右对齐 剩余空间在项目的左侧
3 center 水平居中 剩余空间平均分配在项目两侧
4 space-between 两端对齐 剩余空间在除首尾两个项目外平均分配
5 space-around 分散对齐 剩余空间在每个项目的两侧平均分配
6 space-evenly 平均对齐/等间距 剩余空间在每个项目之间平均分配

例如：flex-content:space-evenly项目之间的剩余空间相等，换句话说项目之间的距离相等,如下

  1.  <div class="container">
  2.       <div class="item">iten1</div>
  3.       <div class="item">iten2</div>
  4.       <div class="item">iten3</div>
  5.       <div class="item">iten4</div>
  6.       <div class="item">iten5</div>
  7.  </div>
  8.  <style>
  9.   body .container {
  10.       /* 转为弹性盒子flex */
  11.       display: flex;
  12.       /* 平均对齐/等间距 */
  13.       place-content: space-evenly ;
  14.   }
  15.  </style>

1.3 flex-items

flex-items在交叉轴（竖轴）方向的四个常用的属性（垂直排列）

序号 属性 描述
1 stretch 拉伸: 默认值, 自动拉伸成等高列
2 start 顶对齐: 项目从交叉轴起始线开始排列
3 end 底对齐: 项目从交叉轴终止线开始排列
4 center 居中对齐: 项目在交叉轴中居中显示

例如：flex-items:center项目在交叉轴方向上居中显示,如下

  1.  <div class="container">
  2.       <div class="item">iten1</div>
  3.       <div class="item">iten2</div>
  4.       <div class="item">iten3</div>
  5.       <div class="item">iten4</div>
  6.       <div class="item">iten5</div>
  7.  </div>
  8.  <style>
  9.   body .container {
  10.       /* 转为弹性盒子flex */
  11.       display: flex;
  12.       /* 项目在交叉轴方向居中对齐 */
  13.       place-items: center;
  14.   }
  15.  </style>

2.flex项目上的三个必知属性

序号 属性 描述
1 flex 项目在主轴中的缩放因子与宽度
2 order 项目在主轴上的顺序
3 place-self 控制某一个项目在交叉轴上的对齐方式

2.1 flex

语法：flex:放大因子(0/1),缩小因子(0/1),计算宽度

序号 属性 描述
1 inital 默认值，等价于flex:0 1 auto ,禁止放大、允许缩小和自动计算宽度
2 auto 等价于flex:1 1 auto 完全响应式,允许放大和缩小且自动计算宽度
3 none 等价于flex:0 0 auto 非响应式,禁止放大和缩小且自动计算宽度

例如：flex:inital项目属性flex的默认值，等价于flex:0 1 auto，表示禁止放大，允许缩小，宽度自动计算;若当前项目没有设置宽度，则自动计算内容的宽度，如下

  1.  <div class="container">
  2.       <div class="item">iten1</div>
  3.       <div class="item">iten2</div>
  4.       <div class="item">iten3</div>
  5.       <div class="item">iten4</div>
  6.       <div class="item">iten5</div>
  7.  </div>
  8.  <style>
  9.   body .container {
  10.     /* 转为弹性盒子flex */
  11.     display: flex;
  12.   }
  13.   body .container .item {
  14.       flex: initial;
  15.   }
  16.  </style>

2.2 order

改变项目在主轴方向的排列顺序（书写顺序/文档流顺序），值越小项目就越靠前，且支持负数，默认值是0，显示顺序即书写顺序

序号 属性 描述
1 order 0 默认值, 显示顺序与源码顺序一致
2 order: 2 显示在<2的右侧
3 order: -2 允许负数

例如：将item3放在item2之前，且item1排在最后，分别使用了order:-1和order:6，如下：

  1.  <div class="container">
  2.       <div class="item">item1</div>
  3.       <div class="item">item2</div>
  4.       <div class="item">item3</div>
  5.       <div class="item">item4</div>
  6.       <div class="item">item5</div>
  7.  </div>
  8.  <style>
  9.    body .container .item:first-of-type {
  10.        background-color: aqua;
  11.        /* 排序 */
  12.        order: 6;
  13.    }
  14.    body .container .item:nth-of-type(3) {
  15.        background-color: yellow;
  16.        /* 排序 */
  17.        order: -1;
  18.    }
  19.  </style>

2.3 place-self

控制某一个项目在交叉轴的对齐方式（垂直方向）

序号 属性 描述
1 stretch 拉伸: 默认值, 自动拉伸成等高列
2 start 顶对齐: 项目从交叉轴起始线开始排列
3 end 底对齐: 项目从交叉轴终止线开始排列
4 center 居中对齐: 项目在交叉轴中居中显示

例如：将item1设置为自动拉伸，item2和item3顶对齐，item4底对齐，item5居中对齐，如下：

  1.  <div class="container">
  2.       <div class="item">item1</div>
  3.       <div class="item">item2</div>
  4.       <div class="item">item3</div>
  5.       <div class="item">item4</div>
  6.       <div class="item">item5</div>
  7.  </div>
  8.  <style>
  9.    body .container .item:first-of-type {
  10.        background-color: aqua;
  11.        /* 拉伸 */
  12.        place-self: stretch;
  13.    }
  14.    body .container .item:first-of-type + .item {
  15.        background-color: lightskyblue;
  16.        /* 顶对齐 */
  17.        place-self: start;
  18.    }
  19.    body .container .item:nth-of-type(3) {
  20.        background-color: yellow;
  21.        /* 顶对齐 */
  22.        place-self: start;
  23.    }
  24.    body .container .item:nth-of-type(4) {
  25.        background-color: lightpink;
  26.        /* 底对齐 */
  27.        place-self: end;
  28.    }
  29.    body .container .item:last-of-type {
  30.        background-color: lightskyblue;
  31.        /* 居中对齐 */
  32.        place-self: center;
  33.    }
  34.  </style>

3.使用flex布局的小案例

html代码

  1.     <!-- 页眉 -->
  2.     <header>
  3.       <div class="headerTop">
  4.         <div class="content">
  5.           <div class="text">php中文网-程序员梦开始的地方</div>
  6.           <div class="loginRigister">
  7.             <a href="#" class="login">登录</a>
  8.             <span style="color: white">/</span>
  9.             <a href="#" class="register">注册</a>
  10.           </div>
  11.         </div>
  12.       </div>
  13.       <div class="herderNav">
  14.         <div class="navs">
  15.           <a href="#"><img src="images/logo.png" alt="" /></a>
  16.           <ul>
  17.             <li class="item">首页</li>
  18.             <li class="item">视频教程</li>
  19.             <li class="item">php培训</li>
  20.             <li class="item">资源下载</li>
  21.             <li class="item">技术文章</li>
  22.             <li class="item">社区交流</li>
  23.             <li class="item">App下载</li>
  24.           </ul>
  25.         </div>
  26.       </div>
  27.     </header>
  29.     <!-- 主体 -->
  30.     <div class="wrap">
  31.       <!-- 左侧 -->
  32.       <aside class="left">
  33.         <a href="">php开发</a>
  34.         <a href="">大前端</a>
  35.         <a href="">后端开发</a>
  36.         <a href="">数据库</a>
  37.         <a href="">移动端</a>
  38.         <a href="">运维开发</a>
  39.         <a href="">UI设计</a>
  40.         <a href="">计算机基础</a>
  41.       </aside>
  43.       <!-- 主体内容区 -->
  44.       <main class="main">
  45.         <a href="#"><img src="images/123.jpeg" alt="" /></a>
  46.       </main>
  48.       <!-- 右侧 -->
  49.       <aside class="right">
  50.         <div class="rightTop">
  51.           <div class="top">
  52.             <img src="images/tlbb.png" alt="头像" />
  53.             <span>同步app学习</span>
  54.           </div>
  55.           <div class="bottom">
  56.             <button class="login">登录</button>
  57.             <button class="register">注册</button>
  58.           </div>
  59.         </div>
  60.         <hr />
  61.         <div class="rightBottom">
  62.           <!-- <span>问答社区</span><span>答疑</span>
  63.             <span>头条</span><a href="#">200年最新前段</a> -->
  64.         </div>
  65.       </aside>
  66.     </div>
  68.     <!-- 页脚 -->
  69.     <footer>页脚</footer>

CSS代码

  1. /* 设置公共样式 */
  2. * {
  3.   padding: 0;
  4.   margin: 0;
  5.   /* outline: 1px dashed red; */
  6. }
  7. /* 改变a标签的公共样式 */
  8. body a {
  9.   text-decoration: none;
  10.   color: black;
  11. }
  12. /* 去掉ul的小圆点 */
  13. body ul {
  14.   list-style-type: none;
  15. }
  17. /* 使用flex初始化布局 */
  18. /* -----------------start------------- */
  19. body header,
  20. body footer {
  21.   background-color: lawngreen;
  22. }
  23. body {
  24.   display: flex;
  25.   flex-flow: column nowrap;
  26.   background-color: rgba(226, 222, 222, 0.384);
  27. }
  28. body .wrap {
  29.   display: flex;
  30.   /* 设置外边距  上下10px 左右居中*/
  31.   margin: 10px auto;
  32.   width: 80%;
  33.   /* 设置最小宽度 防止变形 */
  34.   min-width: 1000px;
  35. }
  36. body .wrap .left,
  37. body .wrap .right {
  38.   width: 200px;
  39. }
  40. body .wrap .main {
  41.   margin: 10px auto;
  42. }
  43. /* -----------------end------------- */
  45. /* 设置头部顶部的样式 */
  46. /* -----------------start------------- */
  47. body header .headerTop {
  48.   width: 100%;
  49.   height: 30px;
  50.   /* 文本上下居中 */
  51.   line-height: 30px;
  52.   background-color: #343434;
  53. }
  54. body header .headerTop .content {
  55.   width: 80%;
  56.   margin: auto;
  57.   /* 转为弹性盒子 */
  58.   display: flex;
  59.   /* 在主轴方向两端对齐 */
  60.   place-content: space-between;
  61. }
  62. body header .headerTop .content .text {
  63.   color: gainsboro;
  64. }
  65. body header .headerTop .content .loginRigister a {
  66.   color: white;
  67. }
  68. /* -----------------end------------- */
  70. /* 设置头部底部的样式 */
  71. /* -----------------start------------- */
  73. body header .herderNav {
  74.   width: 100%;
  75.   height: 80px;
  76.   line-height: 80px;
  77.   background-color: #fff;
  78.   /* box-shadow: *水平阴影 *垂直阴影 模糊距离 阴影大小 阴影颜色 向内阴影; */
  79.   box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  80. }
  81. body header .herderNav .navs {
  82.   width: 80%;
  83.   height: 80px;
  84.   margin: auto;
  85.   display: flex;
  86.   /* background-color: blue; */
  87. }
  88. body header .herderNav .navs img {
  89.   width: 140px;
  90.   margin: 5px;
  91. }
  92. body header .herderNav .navs ul {
  93.   width: 60%;
  94.   display: flex;
  95.   place-content: space-evenly;
  96. }
  97. body header .herderNav .navs ul li {
  98.   width: 100px;
  99.   min-width: 70px;
  100.   text-align: center;
  101. }
  102. body header .herderNav .navs ul li:first-of-type {
  103.   color: red;
  104.   font-weight: bold;
  105. }
  107. /* -----------------end------------- */
  109. /* 设置主体左侧的样式 */
  110. /* -----------------start------------- */
  111. body .wrap .left {
  112.   display: flex;
  113.   background-color: #fff;
  114.   flex-flow: column nowrap;
  115.   height: 500px;
  116.   place-content: space-evenly;
  117.   border-radius: 20px;
  118.   box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  119. }
  120. body .wrap .left a {
  121.   width: 150px;
  122.   height: 40px;
  123.   text-align: center;
  124.   line-height: 40px;
  125.   margin: 0 auto;
  126. }
  128. body .wrap .left a:hover {
  129.   background-color: lightpink;
  130.   border-radius: 20px;
  131.   color: red;
  132.   font-weight: bold;
  133.   /* 设置透明度 */
  134.   opacity: 0.8;
  135. }
  136. /* -----------------end------------- */
  138. /* 设置主体内容区的样式 */
  139. /* -----------------start------------- */
  140. body .wrap .main img {
  141.   width: 100%;
  142.   border-radius: 20px;
  143. }
  144. /* -----------------end------------- */
  146. /* 设置主体右侧的样式 */
  147. /* -----------------start------------- */
  148. body .wrap .right {
  149.   background-color: white;
  150.   border-radius: 20px;
  151.   box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  152. }
  153. body .wrap .right .rightTop .top {
  154.   display: flex;
  155.   width: 100%;
  156.   height: 80px;
  157.   place-content: space-between;
  158. }
  159. body .wrap .right .rightTop .top img {
  160.   width: 50px;
  161.   height: 50px;
  162.   border-radius: 50px;
  163.   margin-left: 15px;
  164.   place-self: center;
  165. }
  166. body .wrap .right .rightTop .top span {
  167.   margin-right: 15px;
  168.   place-self: center;
  169.   opacity: 0.7;
  170. }
  171. body .wrap .right .rightTop .bottom {
  172.   width: 100%;
  173.   display: flex;
  174.   height: 60px;
  175.   place-content: space-evenly;
  176. }
  177. body .wrap .right .rightTop .bottom .login,
  178. body .wrap .right .rightTop .bottom .register {
  179.   width: 80px;
  180.   height: 30px;
  181.   place-self: center;
  182.   cursor: pointer;
  183.   color: #fff;
  184.   border: none;
  185.   border-radius: 20px;
  186. }
  187. body .wrap .right .rightTop .bottom .login {
  188.   background-color: red;
  189. }
  190. body .wrap .right .rightTop .bottom .register {
  191.   background-color: lavender;
  192.   color: #343434;
  193. }
  194. /* -----------------end------------- */
  196. /* 设置页脚的样式 */
  197. /* -----------------start------------- */
  198. body footer{
  199.   background-color: antiquewhite;
  200.   height: 50px;
  201.   text-align: center;
  202.   line-height: 50px;
  203.   color: red;
  204. }
  205. /* -----------------end------------- */

效果预览

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