search

博客列表 >弹性盒子flex的常用6个属性

弹性盒子flex的常用6个属性

吴长清
吴长清原创
2022年07月14日 10:49:031528浏览

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------------- */

效果预览

上一条：Maven教程(Eclipse配置及maven项目)下一条：宝塔部署svn
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多