Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2019年12月26日 flex弹性元素6属性+组件开发思路+导航代码练习
Blogger Information
Blog 7
fans 0
comment 2
visits 5440
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
2019年12月26日 flex弹性元素6属性+组件开发思路+导航代码练习
L
Original
838 people have browsed it

flex 弹性元素

1.flex-basis 元素在分配主轴剩余空间之前，在主轴上占据的宽度，默认值为 auto

2.flex-grow 元素宽度扩展，元素按主轴剩余空间的比例进行扩展，默认值为 0

3. flex-shrink 元素宽度收缩，元素按照主轴剩余空间的比例进行缩减，默认值为 1

4.flex 以上 3 个元素的合并简写，flex:flex-grow flex-shrink flex-basis，默认值为 0 1 auto

  1. flex: 1; /* 相当于flex:1 1 auto;或flex:1 1 0;或flex:2; */

5.align-self 当前某个元素在交叉轴上的排列方式

  1. align-self: flex-start; /* 元素位于容器交叉轴的起点 */
  2. align-self: flex-end; /* 元素位于容器交叉轴的终点 */
  3. align-self: center; /* 元素位于容器交叉轴的中心 */

6.order 元素在主轴上的排列顺序，值越小，顺序越靠前，默认值为 0

页面组件开发的思路与实现过程

一个页面分成若干个组件，分为可复用组件和专用组件，可复用组件如公共头部、公共底部等，而专用组件，顾名思义，针对性专门使用的组件，所有组件拼接起来形成一个完整页面

导航代码

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.         <link rel="stylesheet" href="../../static/font/iconfont.css" />
  8.         <link rel="stylesheet" href="public_header.css" />
  9.         <title>导航</title>
  10.     </head>
  11.     <body>
  12.         <div class="public-header">
  13.             <a href="">导航1</a>
  14.             <a href="">导航2</a>
  15.             <a href="">导航3</a>
  16.             <a href="">导航4</a>
  17.             <a href="">导航5</a>
  18.             <a href="">导航6</a>
  19.             <span>
  20.                 <a href=""><i class="icon iconfont icon-huiyuan1"></i>登陆</a>
  21.                 <a href="">
  22.                     <i class="icon iconfont icon-shiyongwendang"></i>
  23.                     注册
  24.                 </a>
  25.             </span>
  26.         </div>
  27.     </body>
  28. </html>

public_header.css

  1. /* 导入公共初始化样式 */
  2. @import "public_reset.css";
  4. .public-header {
  5.     height: 44px;
  6.     background-color: black;
  7.     display: flex;
  8.     flex-flow: row nowrap;
  9. }
  10. .public-header a {
  11.     color: #ffffff;
  12.     line-height: 44px;
  13.     padding: 0 5px;
  14. }
  15. .public-header > a:hover {
  16.     background-color: #ffffff;
  17.     color: #333333;
  18. }
  19. .public-header > span {
  20.     margin-left: auto;
  21. }
  22. .public-header > span i {
  23.     padding-right: 5px;
  24. }

public_reset.css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body {
  6.     color: #000;
  7. }
  8. a {
  9.     color: #000;
  10.     text-decoration: none;
  11. }
  12. li {
  13.     list-style: none;
  14. }
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