search

博客列表 >flex中项目(子元素)的属性

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

xiaosheng
xiaosheng原创
2019年12月26日 12:55:37934浏览

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. }

手写笔记


上一条：2019.12.25第五节课 flex项目属性下一条：12月25，关于FLEX项目属性的了解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多