Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex必知术语/flex容器的必知属性以及项目上的必知属性/用flex完成导航条
Blogger Information
Blog 43
fans 4
comment 0
visits 19297
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必知术语/flex容器的必知属性以及项目上的必知属性/用flex完成导航条
汇享科技
Original
354 people have browsed it

必知术语

术语名称 描述
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. }
  46. header nav a:nth-of-type(2) {
  47.   color: red;
  48. }
  49. header nav div {
  50.   padding-top: 15px;
  51.   display: flex;
  52.   height: 30px;
  53. }
  54. header nav div input {
  55.   height: 30px;
  56.   width: 200px;
  57.   border: none;
  58.   outline: none;
  59.   box-shadow: 0 0 8px #ccc;
  60.   border-radius: 5px;
  61. }
  63.     </style>
  64.   </head>
  65.   <body>
  66.     <header>
  67.       <nav>
  68.         <a href=""><img src="../motaikuang/images/logo.png" alt="" /></a>
  69.         <a href="" class="active">首页</a>
  70.         <a href="">视频教程</a>
  71.         <a href="">学习路径</a>
  72.         <a href="">我的博客</a>
  73.         <a href="">个人介绍</a>
  74.         <div class="right">
  75.           <input type="search" placeholder="搜索框" />
  76.         </div>
  77.       </nav>
  78.     </header>
  79.   </body>
  80. </html>
Correcting teacher：PHPzPHPz

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