search

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

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

郴
郴原创
2020年04月12日 16:40:20852浏览

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 等的用法。
上一条：前端布局实战-仿php中文网移动端首页下一条：html基础利用flex布局仿php中文网手机端首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多