Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex项目属性，实战案例。
Blogger Information
Blog 13
fans 1
comment 0
visits 9907
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
672 people have browsed it

flex项目上的属性

序号 属性 描述
1 flex 项目的缩放比例与基准宽度
2 align-self 单个项目在交叉轴上的对齐方式
3 order 项目在主轴上排列顺序

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         font-size: 10px;
  14.       }
  15.       body {
  16.         font-size: 1.6rem;
  17.       }
  18.       /* flex容器 */
  19.       .container {
  20.         display: flex;
  21.         height: 20rem;
  22.         border: 1px solid #000;
  23.       }
  24.       /* flex项目样式  flex容器的子元素 */
  25.       .container > .item {
  26.         width: 10rem;
  27.         background-color: lightcyan;
  28.         border: 1px solid #000;
  29.       }
  30.       /* flex属性 */
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="container">
  35.       <div class="item">item1</div>
  36.       <div class="item">item2</div>
  37.       <div class="item">item3</div>
  38.       <div class="item">item4</div>
  39.     </div>
  40.   </body>
  41. </html>

flex-grow

项目是否允许放大

  1. /*允许放大*/
  2.  flex-grow: 1;

flex-shrink

项目是否允许收缩
页面缩小，项目也随之缩小

  1. /*允许缩小*/
  2.  flex-shrink:1;

flex-basis

设置当前项目在主轴上的大小

  1. flex-basis: 15rem;


注意：max-width:优先级大于flex-basis

flex

flex: 放大因子 收缩因子 计算大小

  1. flex:0 0 15rem;
  2. 等效于
  3. flex-grow:0;
  4. flex-shrink:0;
  5. flex-basis:15rem;


flex默认情况

  1. /*禁止放大 允许缩小 当前的固定宽度值*/
  2. flex:0 1 auto;
  3. 等效于：
  4. flex:initial;
  6. 完全的弹性：允许放大与收缩：
  7. flex:1 1 auto;
  8. 等效于：
  9. flex:auto;
  11. 完全失去弹性：禁止放大 收缩 适合pc端：
  12. flex:0 0 auto;
  13. 等效于：
  14. flex:none;
  16. 单值 仅表示是否允许放大
  17. flex:1; 
  18. 等效于：
  19. flex:auto;

flex作用于多个元素的时候：
效果：item2是item1和item3盒子宽度的两倍

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         font-size: 10px;
  14.       }
  15.       body {
  16.         font-size: 1.6rem;
  17.       }
  18.       /* flex容器 */
  19.       .container {
  20.         display: flex;
  21.         height: 20rem;
  22.         border: 1px solid #000;
  23.       }
  24.       /* flex项目样式  flex容器的子元素 */
  25.       .container > .item {
  26.         width: 10rem;
  27.         background-color: lightcyan;
  28.         border: 1px solid #000;
  29.       }
  30.       .container > .item:first-of-type {
  31.         background-color: yellow;
  32.         /* flex: 1 1 auto; */
  33.         flex: 1;
  34.       }
  35.       .container > .item:first-of-type + * {
  36.         background-color: lightgreen;
  37.         flex: 2;
  38.       }
  39.       .container > .item:last-of-type {
  40.         background-color: coral;
  41.         flex: 1;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="container">
  47.       <div class="item">item1</div>
  48.       <div class="item">item2</div>
  49.       <div class="item">item3</div>
  50.     </div>
  51.   </body>
  52. </html>

align-self属性

给某个项目设置对齐属性

  1. /* 默认值 拉伸 stretch */
  2.         align-self: stretch;
  3.         align-self: flex-end;
  4.         align-self: flex-start;
  5.         align-self: center;

flex是支持定位的

  1. .container {
  2.         position: relative;
  3.       }
  4.       .container > .item:nth-of-type(3) {
  5.         position: absolute;
  6.         left: 5rem;
  7.       }

order

设置项目在主轴上的位置
order=0的情况：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>设置项目在主轴上的顺序</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         font-size: 10px;
  14.       }
  15.       body {
  16.         font-size: 1.6rem;
  17.       }
  18.       .container {
  19.         display: flex;
  20.         height: 20rem;
  21.         border: 1px solid #000;
  22.       }
  23.       .container > .item {
  24.         width: 10rem;
  25.         background-color: lightcyan;
  26.         border: 1px solid #000;
  27.         order: 0;
  28.       }
  29.       .item.one {
  30.         background-color: #fff;
  31.       }
  32.       .item.two {
  33.         background-color: #ff7;
  34.       }
  35.       .item.three {
  36.         background-color: #9f7;
  37.       }
  38.       .item.four {
  39.         background-color: #897;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <div class="container">
  45.       <div class="item one">item1</div>
  46.       <div class="item two">item2</div>
  47.       <div class="item three">item3</div>
  48.       <div class="item four">item4</div>
  49.     </div>
  50.   </body>
  51. </html>


order是谁小谁靠前：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>设置项目在主轴上的顺序</title>
  8.     <style>
  9.       * {
  10.         box-sizing: border-box;
  11.       }
  12.       :root {
  13.         font-size: 10px;
  14.       }
  15.       body {
  16.         font-size: 1.6rem;
  17.       }
  18.       .container {
  19.         display: flex;
  20.         height: 20rem;
  21.         border: 1px solid #000;
  22.       }
  23.       .container > .item {
  24.         width: 10rem;
  25.         background-color: lightcyan;
  26.         border: 1px solid #000;
  27.         order: 0;
  28.       }
  29.       .item.one {
  30.         background-color: #fff;
  31.         order: 4;
  32.       }
  33.       .item.two {
  34.         background-color: #ff7;
  35.         order: 3;
  36.       }
  37.       .item.three {
  38.         background-color: #9f7;
  39.         order: 1;
  40.       }
  41.       .item.four {
  42.         background-color: #897;
  43.         order: 2;
  44.       }
  45.     </style>
  46.   </head>
  47.   <body>
  48.     <div class="container">
  49.       <div class="item one">item1</div>
  50.       <div class="item two">item2</div>
  51.       <div class="item three">item3</div>
  52.       <div class="item four">item4</div>
  53.     </div>
  54.   </body>
  55. </html>

实战-移动商城首页的页眉和页脚的布局

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="static/css/index.css" />
  8.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  9.     <link rel="stylesheet" href="static/css/header.css" />
  10.     <link rel="stylesheet" href="static/css/footer.css" />
  11.     <title>页脚</title>
  12.   </head>
  13.   <body>
  14.     <div class="header">
  15.       <!-- 菜单 -->
  16.       <div class="menu iconfont icon-menu"></div>
  17.       <!-- 搜索框 -->
  18.       <div class="search">
  19.         <div class="logo">JD</div>
  20.         <div class="zoom iconfont icon-search"></div>
  21.         <input type="text" class="words" value="移动硬盘5000g" id="" />
  22.       </div>
  23.       <!-- 登录按钮 -->
  24.       <a href="" class="login">登录</a>
  25.     </div>
  26.     <!-- 主体 -->
  27.     <div class="main">main</div>
  28.     <!-- 页脚 -->
  29.     <div class="footer">
  30.       <div>
  31.         <div class="iconfont icon-home"></div>
  32.         <span>首页</span>
  33.       </div>
  34.       <div>
  35.         <div class="iconfont icon-home"></div>
  36.         <span>分类</span>
  37.       </div>
  38.       <div>
  39.         <div class="iconfont icon-home"></div>
  40.         <span>京喜</span>
  41.       </div>
  42.       <div>
  43.         <div class="iconfont icon-home"></div>
  44.         <span>购物车</span>
  45.       </div>
  46.       <div>
  47.         <div class="iconfont icon-home"></div>
  48.         <span>未登录</span>
  49.       </div>
  50.     </div>
  51.   </body>
  52. </html>

reset.css

  1. * {
  2.   margin: 0px;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. li {
  7.   /* 去掉前面的点 */
  8.   list-style: none;
  9. }
  10. a {
  11.   /* 去掉下划线 */
  12.   text-decoration: none;
  13.   color: #7b7b7b;
  14. }
  15. body {
  16.   background-color: #f6f6f6;
  17. }
  18. html {
  19.   font-size: 10px;
  20. }
  21. body {
  22.   font-size: 1.6rem;
  23. }
  24. @media screen and (min-width: 480px) {
  25.   html {
  26.     font-size: 12px;
  27.   }
  28. }
  29. @media screen and (min-width: 640px) {
  30.   html {
  31.     font-size: 14px;
  32.   }
  33. }
  34. @media screen and (min-width: 720px) {
  35.   html {
  36.     font-size: 16px;
  37.   }
  38. }

index.css

  1. /* @import url("reset.css"); */
  2. @import "reset.css";
  3. .header {
  4.   background-color: #e43130;
  5.   color: #fff;
  6.   height: 4.4rem;
  7.   /* 固定定位 */
  8.   position: fixed;
  9.   left: 0;
  10.   top: 0;
  11.   right: 0;
  12.   /* 保证他始终在视口的最前面 */
  13.   z-index: 100;
  14. }
  15. /* 主体绝对定位 */
  16. .main {
  17.   position: absolute;
  18.   top: 4.4rem;
  19.   left: 0;
  20.   right: 0;
  21.   bottom: 4.4rem;
  22. }
  23. .footer {
  24.   background-color: #666;
  25.   color: #fff;
  26.   height: 4.4rem;
  27.   /* 固定定位 */
  28.   position: fixed;
  29.   left: 0;
  30.   bottom: 0;
  31.   right: 0;
  32.   z-index: 100;
  33. }

header.css

  1. /* 使用一个类作为入口，后面可以使用class或伪类来获取内部的每一个元素。 */
  2. .header {
  3.   display: flex;
  4.   flex-flow: row nowrap;
  5.   align-items: center;
  6. }
  7. .header .menu {
  8.   flex: 1;
  9.   /* 行内元素 文本居中 */
  10.   text-align: center;
  11.   font-size: 2.5rem;
  12. }
  13. .header .login {
  14.   flex: 1;
  15.   color: white;
  16.   text-align: center;
  17. }
  18. .header .search {
  19.   flex: 6;
  20.   padding: 0.5rem;
  21.   background-color: #fff;
  22.   /* 圆角 */
  23.   border-radius: 3rem;
  24.   display: flex;
  25. }
  26. .header .search .logo {
  27.   color: #e43130;
  28.   font-size: 2rem;
  29.   flex: 0 1 4rem;
  30.   text-align: center;
  31.   line-height: 2rem;
  32. }
  33. .header .search .zoom {
  34.   color: #ccc;
  35.   flex: 0 1 4rem;
  36.   text-align: center;
  37.   /* 垂直居中 */
  38.   line-height: 2rem;
  39.   border-left: 1px solid;
  40. }
  41. .header .search .words {
  42.   flex: auto;
  43.   border: none;
  44.   outline: none;
  45.   color: #aaa;
  46. }

footer.css

  1. .footer {
  2.   display: flex;
  3.   justify-content: space-around;
  4.   align-items: center;
  5.   color: #888;
  6. }
  7. /* flex支持嵌套布局 */
  8. /* flex的项目可以又是一个flex容器 */
  9. .footer > div {
  10.   display: flex;
  11.   flex-flow: column nowrap;
  12.   /* 主轴垂直 交叉轴就是水平 */
  13.   align-items: center;
  14. }
  15. .footer > div.iconfont {
  16.   font-size: 2rem;
  17. }
  18. .footer > div > span {
  19.   font-size: 1rem;
  20. }
  21. .footer > div:hover {
  22.   cursor: pointer;
  23. }

效果图：

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