Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex中项目(子元素)的属性
Blogger Information
Blog 6
fans 1
comment 0
visits 5719
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中项目(子元素)的属性
xiaosheng
Original
935 people have browsed it

flex中项目(子元素)的属性

项目宽度(显示宽度) flex-basis

  • 简介 : 项目在分配主轴剩余空间之前,项目所在的主轴空间的宽度
  • flex-basis 的优先级要高于width
  • auto(默认) : 为项目的原始宽度
  • 也可以设置百分比,如果设置百分比的话,则是指在分配多余空间之前,项目占据主轴的空间

项目扩展 flex-grow

  • 简介 : 将主轴上的剩余空间分配给项目,该属性的值在0-1之间
  • 0(默认) : 不允许扩展
  • 1 : 将剩余空间平均分配给每个项目

项目收缩 flex-shrink

  • 简介 : 将项目上多出来的空间按比例在项目之间收缩
  • 1(默认) : 允许收缩
  • 0 : 不收缩

简写 flex

  • 格式 : flex : flex-grow flex-shrink flex-basis
  • 默认值为 : flex : 0 1 auto (不扩展,允许收缩,默认宽度)
  • flex : auto 等价于 flex : 1 1 auto
  • flex : initial 等价于 flex : 0 1 auto
  • flex : none 等价于 flex : 0 0 auto
  • flex : 2 等价于 flex : 1 1 auto
  • flex : 1 指当前项目可以自动伸展到所有的剩余空间

align-self

  • 简介 : 单独设置某个项目在交叉轴上的对齐方式
  • flex-start 是默认值,还可以设置flex-end

order

  • 简介 : 自定义项目在主轴上的排列顺序,默认值为0,值越小越靠前

顶部组件代码

注 : 注意引入css中的路径

页面布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../../../../static/font/iconfont.css">
  7.     <link rel="stylesheet" href="../../../static/css/_header.css">
  8. </head>
  9. <body>
  10.     <header>
  11.         <div class="header">
  12.             <div class="left">
  13.                 <ul>
  14.                     <li><a href="">网站首页</a></li>
  15.                     <li><a href="">专题</a></li>
  16.                     <li><a href="">网站导航</a></li>
  17.                     <li><a href="">二手商品</a></li>
  18.                     <li><a href="">讨论区</a></li>
  19.                 </ul>
  20.             </div>
  21.             <div class="right">
  22.                 <a href=""><i class="iconfont icon-huiyuan2"></i></a>
  23.                 <a href="">登录</a>
  24.                 <a href="">注册</a>
  25.             </div>
  26.         </div>
  27.     </header>
  28. </body>
  29. </html>

具体样式

_header.css

  1. @import "reset.css";
  2. .header {
  3.     height: 50px;
  4.     background-color: #000000;
  5.     position: relative;
  6. }
  7. .header .left {
  8.     width: 400px;
  9.     margin-left: 30px;
  10. }
  11. .header .left > ul {
  12.     width: 400px;
  13.     height: 50px;
  14.     display: flex;
  15.     align-content: center;
  16.     justify-content: space-between;
  17. }
  18. .header .left > ul > li {
  19.     width: 50px;
  20.     height: 50px;
  21.     text-align: center;
  22.     line-height: 50px;
  23. }
  24. .header .left > ul > li > a {
  25.     display: inline-block;
  26.     width: 50px;
  27.     height: 50px;
  28.     color: #ffffff;
  29. }
  30. .header .left > ul > li > a:hover {
  31.     background-color: #fff;
  32.     color: #000;
  33. }
  34. .header .right {
  35.     margin-right: 30px;
  36.     position: absolute;
  37.     top: 0;
  38.     right: 0;
  39.     width: 100px;
  40.     height: 50px;
  41.     display: flex;
  42.     justify-content: space-between;
  43.     align-items: center;
  44. }
  45. .header .right a {
  46.     color: #ffffff;
  47. }

reset.css

  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4. }
  5. a {
  6.     text-decoration: none;
  7. }

手写笔记


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