博客列表 >flex必知术语/flex容器的必知属性以及项目上的必知属性/用flex完成导航条

flex必知术语/flex容器的必知属性以及项目上的必知属性/用flex完成导航条

汇享科技
汇享科技原创
2022年07月13日 13:06:37353浏览

必知术语

术语名称 描述
flex容器 display属性为flex的元素就是flex容器
flex项目 flex容器中的子元素就是flex项目
主轴 控制容器中的项目的排列方向
交叉轴 控制项目在容器中的对齐方式
剩余空间 容器中没有项目占据的空间

l5j0kjhd.png

flex容器中的三个必知属性

术语名称 描述
flex-flow 设置容器在主轴上的排列方式与控制是否允许换行
place-content 设置容器中的剩余空间如何分配
place-items 设置容器在交叉轴上的对齐方式
  • flex-flow实例演示

    flex-flow的默认值是 row水平排列 nowrap不换行 无论页面宽度如何缩小 项目不会自动进行换行只会将项目宽度进行压缩直到无法压缩为止 对应的属性是:column:垂直排列 wrap:允许换行,当页面宽度缩小到一定程度后会进行压缩 这边以row水平为实例进行演示

  1. <head>
  2. <meta charset="UTF-8" />
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5. <title>Flex布局</title>
  6. <style>
  7. * {
  8. padding: 0;
  9. margin: 0;
  10. box-sizing: border-box;
  11. }
  12. body {
  13. padding: 10px;
  14. }
  15. .box {
  16. height: 30em;
  17. outline: solid firebrick;
  18. display: flex;
  19. flex-flow: row wrap;
  20. }
  21. .item1,
  22. .item2,
  23. .item3 {
  24. /* outline: dashed red; */
  25. width: 8em;
  26. height: 5em;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div class="box">
  32. <div class="item1"></div>
  33. <div class="item2"></div>
  34. <div class="item3"></div>
  35. </div>
  36. </body>
  • place-content实例演示

    place-content 将容器内的剩余空间在项目之间进行分配有两种分配方式 属性如下:

属性 介绍
start 将剩余空间全部分配到了右边 项目从左边开始排列也是默认方案
end 将剩余空间全部分配到了左边 项目从右边开始排列
center 将剩余空间在所有项目两端进行分配
space-between 剩余空间在项目两端对齐
space-around 剩余空间在项目之间分散对齐
space-evenly 剩余空间在项目之间平均对齐
  • 实例演示

    1. 第一种方案
    2. 第二种方案
  • place-items实例演示

    • place-items将容器中的项目对齐方式进行更改属性如下:
属性 介绍
stretch 自动伸展
start 上对齐
end 下对齐

flex项目上的必知属性

术语名称 描述
flex 控制项目是否能缩放与控制宽度
order 控制项目在容器中的排列顺序值越小越往前
place-self 控制某一个项目在交叉轴上的对齐方式
  • flex实例演示

    flex属性有三个值 第一个值是放大因子 第二个是缩小因子 第三个控制宽度
    实例演示:

  • order实例演示

    order可以控制项目的排列顺序 值越小越往前

l5j3gb3u.png

  • place-self实例演示

    place-self控制某一个项目在交叉轴上的对齐方式属性有start和end
    l5j3jam6.png

用flex做一个导航

l5j4yh41.png

  • 实例代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Flex导航条</title>
  8. <style>
  9. * {
  10. padding: 0;
  11. margin: 0;
  12. box-sizing: border-box;
  13. }
  14. a {
  15. text-decoration: none;
  16. }
  17. ul {
  18. list-style: none;
  19. }
  20. /*布局开始*/
  21. header nav {
  22. height: 60px;
  23. min-width: 1000px;
  24. /* border: 1px solid #000; */
  25. display: flex;
  26. place-content: center;
  27. background-color: #fff;
  28. box-shadow: 0 5px 5px #888;
  29. }
  30. header nav a img {
  31. width: 100%;
  32. height: 50px;
  33. }
  34. header nav a:not(:first-of-type) {
  35. text-shadow: 0 1px 3px #888;
  36. color: #333333;
  37. font-size: 16px;
  38. font-weight: bold;
  39. padding: 20px;
  40. }
  41. header nav a:not(:first-of-type):hover {
  42. color: red;
  43. font-size: 18px;
  44. }
  45. header nav a:nth-of-type(2) {
  46. color: red;
  47. }
  48. header nav div {
  49. padding-top: 15px;
  50. display: flex;
  51. height: 30px;
  52. }
  53. header nav div input {
  54. height: 30px;
  55. width: 200px;
  56. border: none;
  57. outline: none;
  58. box-shadow: 0 0 8px #ccc;
  59. border-radius: 5px;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <header>
  65. <nav>
  66. <a href=""><img src="../motaikuang/images/logo.png" alt="" /></a>
  67. <a href="" class="active">首页</a>
  68. <a href="">视频教程</a>
  69. <a href="">学习路径</a>
  70. <a href="">我的博客</a>
  71. <a href="">个人介绍</a>
  72. <div class="right">
  73. <input type="search" placeholder="搜索框" />
  74. </div>
  75. </nav>
  76. </header>
  77. </body>
  78. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议