简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Web 前端 - CSS - Flex 弹性布局及仿 php 中文网移动端布局实战
Blogger Information
Blog 33
fans 0
comment 0
visits 27358
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
Web 前端 - CSS - Flex 弹性布局及仿 php 中文网移动端布局实战
郴
Original
836 people have browsed it

Web 前端 - CSS - Flex 弹性布局及仿 php 中文网移动端布局实战

[toc]

作业的公网链接

一、概述

序号 内容 描述
1 解释 弹性盒子，即宽度和高度可以进行弹性伸缩的盒子，意为弹性布局
2 特点 元素大小可以在容器中自动伸缩以适应容器的变化
3 场景 主流的布局方式，特别适合移动端布局

二、主轴、交叉轴与布局方向

序号 内容 描述
1 布局方向 flex 为一维布局，即一个物体在一个平面中，平面拥有横轴和纵轴，物体要么水平排列，要么垂直排列，布局方向也分为水平方向和垂直方向
2 主轴 主轴作为元素主要的排列方向，主轴可以是横轴，也可以是纵轴。如果主轴是横轴，那么元素的的布局方向为水平排列；如果主轴是纵轴，那么元素的的布局方向为垂直排列
3 交叉轴 交叉轴作为副轴，起到辅助排列元素的作用。交叉轴可以是横轴，也可以是纵轴。如果主轴是横轴，那么交叉轴就是纵轴；如果主轴是纵轴，那么交叉轴就是横轴

三、容器

1. 属性

序号 属性 描述 备注
1 flex-direction 设置容器的主轴，即子元素的排列方式
2 flex-wrap 是否允许换行 适用于多行容器布局
3 flex-flow flex-direction和flex-wrap属性的简写
4 justify-content 设置子元素在主轴上的对齐方式 主轴上有剩余空间才有意义
5 align-items 设置子元素在交叉轴上的对齐方式 交叉轴上有剩余空间才有意义
6 align-content 在多行容器中，设置子元素在交叉轴上的对齐方式 交叉轴上有剩余空间才有意义
  • 容器即父元素，通过display:flex设置
  • 多行容器是指允许换行的容器

2. 值

序号 值 描述 适用元素
1 row 默认值。水平方向，顺序为从左往右 flex-direction
2 row-reverse 水平方向的相反方向，顺序为从右往左 flex-direction
3 column 垂直方向，顺序为从上往下 flex-direction
4 column-reverse 垂直方向的相反方向，顺序为从下往上 flex-direction
5 nowrap 默认值。不换行 flex-wrap
6 wrap 换行 flex-wrap
7 flex-start 默认值。起始线对齐 justify-content
8 flex-end 终止线对齐 justify-content
9 center 居中对齐 justify-content
10 space-evenly 平均对齐。剩余空间在每个子元素之间平均分配 justify-content
11 space-around 分散对齐。剩余空间在每个子元素两侧平均分配 justify-content
12 space-between 两端对齐。剩余空间在头尾子元素之外的子元素之间平均分配 justify-content
13 flex-start 默认值。起始线对齐 align-items
14 flex-end 终止线对齐 align-items
15 center 居中对齐 align-items
16 stretch 默认值。子元素拉伸占据整个交叉轴 align-content
17 flex-start 默认值。起始线对齐 align-content
18 flex-end 终止线对齐 align-content
19 center 居中对齐 align-content
20 space-evenly 平均对齐。剩余空间在每个子元素之间平均分配 align-content
21 space-around 分散对齐。剩余空间在每个子元素两侧平均分配 align-content
22 space-between 两端对齐。剩余空间在头尾子元素之外的子元素之间平均分配 align-content

四、项目

1. 属性

序号 属性 描述 备注
1 flex-grow 放大因子。将主轴上的剩余空间按比例分配给指定项目 主轴上有剩余空间才有意义
2 flex-shrink 缩小因子。将项目上多出的空间按比例在指定项目中进行缩减
3 flex-basis 项目在分配主轴的剩余空间之前，某项目所占据的主轴空间宽度 权重大于 width
3 flex flex-grow、flex-shrink和flex-basis属性的简写
4 align-self 单独设置某项目在交叉轴上的对齐方式 会覆盖容器的 align-items 属性
5 order 自定义某项目在主轴上的排列顺序，默认为 0，值越小位置越靠前

2. 值

序号 值 描述 适用元素
1 auto 默认值。继承 align-items 属性值 align-self
2 auto 默认值。继承 align-items 属性值 align-self
3 flex-start 默认值。起始线对齐 align-self
4 flex-end 终止线对齐 align-self
5 center 居中对齐 align-self
6 stretch 拉伸对齐 align-self
7 stretch 拉伸对齐 align-self
8 baseline 与基线对齐 align-self
  • 项目即子元素，被包裹在容器中

五、代码实例

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>商城</title>
  7.     <link rel="stylesheet" href="css/index.css" />
  8.     <link rel="stylesheet" href="css/font-icon.css" />
  9.   </head>
  10.   <body>
  11.     <!--头部区域-->
  12.     <header>
  13.       <!--顶部登录模块-->
  14.       <div class="login-box">
  15.         <!--登录图标-->
  16.         <a href="#"><span class="iconfont h_icf">&#xe656;</span></a>
  17.         <!--官网图标-->
  18.         <a href="#"><span class="iconfont h_icf">&#xe669;</span></a>
  19.         <!--列表图标-->
  20.         <a href="#"><span class="iconfont h_icf">&#xe65a;</span></a>
  21.       </div>
  22.       <!--轮播图模块-->
  23.       <div class="sli-box">
  24.         <img src="/image/banner.jpg" alt="banner" />
  25.       </div>
  26.       <!--导航栏模块-->
  27.       <nav>
  28.         <a href="#"
  29.           ><span>
  30.             <img src="/image/html.png" alt="html" />
  31.             <p>HTML</p>
  32.           </span></a
  33.         >
  34.         <a href="#"
  35.           ><span>
  36.             <img src="/image/html.png" alt="html" />
  37.             <p>CSS</p>
  38.           </span></a
  39.         >
  40.         <a href="#"
  41.           ><span>
  42.             <img src="/image/html.png" alt="html" />
  43.             <p>JavaScript</p>
  44.           </span></a
  45.         >
  46.         <a href="#"
  47.           ><span>
  48.             <img src="/image/html.png" alt="html" />
  49.             <p>PHP</p>
  50.           </span></a
  51.         >
  52.         <a href="#"
  53.           ><span>
  54.             <img src="/image/html.png" alt="html" />
  55.             <p>MySQL</p>
  56.           </span></a
  57.         >
  58.         <a href="#"
  59.           ><span>
  60.             <img src="/image/html.png" alt="html" />
  61.             <p>Layui</p>
  62.           </span></a
  63.         >
  64.         <a href="#"
  65.           ><span>
  66.             <img src="/image/html.png" alt="html" />
  67.             <p>Laravel</p>
  68.           </span></a
  69.         >
  70.         <a href="#"
  71.           ><span>
  72.             <img src="/image/html.png" alt="html" />
  73.             <p>Redis</p>
  74.           </span></a
  75.         >
  76.       </nav>
  77.     </header>
  78.     <!--主体区域-->
  79.     <main>
  80.       <!--精品推荐模块-->
  81.       <p>精品推荐</p>
  82.       <section>
  83.         <a href="#"
  84.           ><span
  85.             ><img src="/image/a1.jpg" alt="a1" />
  86.             <p>前端入门课程</p></span
  87.           ></a
  88.         >
  89.         <a href="#"
  90.           ><span
  91.             ><img src="/image/a1.jpg" alt="a1" />
  92.             <p>前端进阶课程</p></span
  93.           ></a
  94.         >
  95.         <a href="#"
  96.           ><span
  97.             ><img src="/image/a1.jpg" alt="a1" />
  98.             <p>PHP入门课程</p></span
  99.           ></a
  100.         >
  101.         <a href="#"
  102.           ><span
  103.             ><img src="/image/a1.jpg" alt="a1" />
  104.             <p>PHP进阶课程</p></span
  105.           ></a
  106.         >
  107.       </section>
  108.       <!--文章列表模块-->
  109.       <p>文章列表</p>
  110.       <article>
  111.         <a href="#"
  112.           ><span
  113.             ><img src="/image/php.png" alt="php" />
  114.             <span
  115.               ><h3>php基础语法课程-第1课</h3>
  116.               <p>
  117.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  118.               </p></span
  119.             >
  120.           </span></a
  121.         >
  122.         <a href="#"
  123.           ><span
  124.             ><img src="/image/php.png" alt="php" />
  125.             <span
  126.               ><h3>php基础语法课程-第2课</h3>
  127.               <p>
  128.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  129.               </p></span
  130.             >
  131.           </span></a
  132.         >
  133.         <a href="#"
  134.           ><span
  135.             ><img src="/image/php.png" alt="php" />
  136.             <span
  137.               ><h3>php基础语法课程-第3课</h3>
  138.               <p>
  139.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  140.               </p></span
  141.             ></span
  142.           ></a
  143.         >
  144.         <a href="#"
  145.           ><span
  146.             ><img src="/image/php.png" alt="php" />
  147.             <span
  148.               ><h3>php基础语法课程-第4课</h3>
  149.               <p>
  150.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  151.               </p></span
  152.             ></span
  153.           ></a
  154.         >
  155.         <a href="#"
  156.           ><span
  157.             ><img src="/image/php.png" alt="php" />
  158.             <span
  159.               ><h3>php基础语法课程-第5课</h3>
  160.               <p>
  161.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  162.               </p></span
  163.             ></span
  164.           ></a
  165.         >
  166.         <a href="#"
  167.           ><span
  168.             ><img src="/image/php.png" alt="php" />
  169.             <span
  170.               ><h3>php基础语法课程-第6课</h3>
  171.               <p>
  172.                 好多同学在PHP基础的时候对PHP文件的操作了解的不够多
  173.               </p></span
  174.             ></span
  175.           ></a
  176.         >
  177.       </article>
  178.       <!--用来抵消脱离文档流的尾部-->
  179.       <div class="none-box"></div>
  180.     </main>
  181.     <!--尾部区域-->
  182.     <footer>
  183.       <!--首页图标-->
  184.       <a href="#"
  185.         ><span class="iconfont"
  186.           >&#xe656;
  187.           <p>首页</p></span
  188.         >
  189.       </a>
  190.       <!--分类图标-->
  191.       <a href="#"
  192.         ><span class="iconfont"
  193.           >&#xe651;
  194.           <p>分类</p></span
  195.         >
  196.       </a>
  197.       <!--购物车图标-->
  198.       <a href="#"
  199.         ><span class="iconfont"
  200.           >&#xe63d;
  201.           <p>购物车</p></span
  202.         >
  203.       </a>
  204.       <!--账户图标-->
  205.       <a href="#"
  206.         ><span class="iconfont"
  207.           >&#xe658;
  208.           <p>账户</p></span
  209.         >
  210.       </a>
  211.     </footer>
  212.   </body>
  213. </html>
  1. /*框架样式*/
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5. }
  6. html {
  7.   width: 100vw;
  8.   height: 100vh;
  9. }
  10. body {
  11.   min-width: 360px;
  12.   background-color: white;
  13.   display: flex;
  14.   flex-flow: column nowrap;
  15. }
  16. a {
  17.   color: #303;
  18. }
  19. /*头部样式*/
  20. header {
  21.   display: flex;
  22.   flex-flow: column nowrap;
  23. }
  24. /*登录模块样式*/
  25. .login-box {
  26.   height: 30px;
  27.   background-color: gray;
  28.   display: flex;
  29.   flex-flow: row nowrap;
  30.   justify-content: space-between;
  31.   align-items: center;
  33.   position: fixed;
  34.   width: 100vw;
  35.   top: 0;
  36. }
  37. .login-box > a {
  38.   text-decoration: none;
  39. }
  40. .login-box > a > .h_icf {
  41.   color: lightgoldenrodyellow;
  42. }
  43. /*轮播图模块样式*/
  44. .sli-box > img {
  45.   width: 100vw;
  46. }
  47. /*导航栏模块样式*/
  48. nav {
  49.   display: flex;
  50.   flex-flow: row wrap;
  51.   justify-content: space-evenly;
  52. }
  53. nav > a {
  54.   text-decoration: none;
  55. }
  56. nav > a > span {
  57.   width: 25vw;
  58.   display: flex;
  59.   flex-flow: column nowrap;
  60.   justify-content: center;
  61.   align-items: center;
  62. }
  63. nav > a > span > img {
  64.   width: 12vw;
  65. }
  66. /*主体样式*/
  67. main {
  68.   display: flex;
  69.   flex-flow: column nowrap;
  70. }
  71. main > p {
  72.   font-size: large;
  73.   font-weight: bold;
  74.   color: gray;
  75.   margin: 5px 0 5px 15px;
  76. }
  77. /*精品推荐模块样式*/
  78. section {
  79.   display: flex;
  80.   flex-flow: row wrap;
  81.   justify-content: space-evenly;
  82. }
  83. section > a {
  84.   text-decoration: none;
  85. }
  86. section > a > span {
  87.   width: 50vw;
  88.   display: flex;
  89.   flex-flow: column nowrap;
  90.   justify-content: center;
  91.   align-items: center;
  92. }
  93. section > a > span > img {
  94.   width: 45vw;
  95. }
  96. /*文章列表模块样式*/
  97. article {
  98.   display: flex;
  99.   flex-flow: column nowrap;
  100.   justify-content: space-evenly;
  101. }
  102. article > a {
  103.   text-decoration: none;
  104.   width: 100vw;
  105.   display: flex;
  106.   flex-flow: row nowrap;
  107. }
  108. article > a:first-of-type {
  109.   margin: 0 0 5px 0;
  110. }
  111. article > a:last-of-type {
  112.   margin: 5px 0 0 0;
  113. }
  114. article > a:not(:first-of-type):not(:last-of-type) {
  115.   margin: 5px 0 5px 0;
  116. }
  117. article > a > span {
  118.   width: 100vw;
  119.   display: flex;
  120.   flex-flow: row nowrap;
  121. }
  122. article > a > span > img {
  123.   width: 35vw;
  124. }
  125. article > a > span > span {
  126.   width: 65vw;
  127.   display: flex;
  128.   flex-flow: column nowrap;
  129. }
  130. article > a > span > span > p {
  131.   color: gray;
  132.   white-space: nowrap;
  133.   overflow: hidden;
  134.   text-overflow: ellipsis;
  135. }
  136. .none-box {
  137.   width: 100vw;
  138.   height: 61px;
  139.   background-color: white;
  140. }
  141. /*尾部样式*/
  142. footer {
  143.   background-color: white;
  144.   display: flex;
  145.   flex-flow: row nowrap;
  146.   justify-content: space-around;
  148.   position: fixed;
  149.   bottom: 0;
  150.   width: 100vw;
  151. }
  152. footer > a {
  153.   text-decoration: none;
  154. }
  155. footer > a > span {
  156.   width: 25vw;
  157.   display: flex;
  158.   flex-flow: column nowrap;
  159.   align-items: center;
  160. }
  161. footer > a > span > p {
  162.   font-size: large;
  163. }


六、课程总结

  • 今天学习了 CSS 的 Flex 弹性布局，通过上课认真听讲和认真完成老师布置的作业，使得我对 CSS 的理解和运用更加深入和熟悉。最主要的知识点是明白了什么是弹性盒子、容器和项目和主轴、交叉轴与布局方向的特点，以及了解并熟悉了 Flex 布局常见属性如 flex-flow、justify-content 等的用法。
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！