简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 初识Flex布局以及常用属性
Blogger Information
Blog 17
fans 1
comment 0
visits 14749
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布局以及常用属性
邱世家的博客
Original
892 people have browsed it

Flex基本知识：

  • 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
  • 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
  • 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性都将失效!!!

    flex常用属性：

NO 属性 释义 属性值
A flex-direction 定义主轴(项目排列)的方向 1.row(默认值)主轴水平方向起点在左边；2.row-reverse：主轴水平方向起点在右端。3.column:主轴垂直方向，起点在上沿，4.column-reverse：主轴垂直方向，起点在下沿
B flex-wrap 规定一条轴线排不下如何换行 1.nowrap(默认)不换行；2.wrap：换行，第一行在上方；3.wrap-reverse：换行第一行在下方
C flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row/nowrap
D justify-content 定义项目在主轴上的对齐方式 1.flex-start(默认值)左对齐；2.flex-end右对齐；3.center居中；4.space-between：两端对齐，项目之间的间隔相等。5.space-around：各个项目两侧的间隔相等。所以项目之间的间隔比项目与边框间隔大一倍；6.space-evenly：平均分配
E align-items 定义flex子项在flex容器的当前行的侧轴（交叉轴）方向上的对齐方式 1.flex-start：交叉轴起点对齐；2.flex-end：交叉轴终点对齐；3.center：与交叉轴的中点对齐；4.baseline 项目的第一行文字的基线对齐；5.stretch(默认值) 如果项目未设置高或设为auto，将占满整个容器的高度
F align-content 设置多行容器的项目排列(垂直) 1.flex-start：2.fles-end；3.center；4.space-between 与交叉轴两端对齐，轴线之间的间隔平均分布；5.space-around 每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍；6.stretch(默认值) 轴线占满整个交叉轴

项目属性

  • order:定义项目排列的顺序。数值越小，排列越靠前，默认为0
  • flex-grow:定义项目的放大比例，默认为0，如果存在空白部分，也不会放大.
  • flex-shrink:定义了项目的缩小比例，默认为1，如果空间不足，该项目将缩小.
  • flex-basis:定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目本来的大小.
  • flex:是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto，后两个属性可选
  • align-self:允许单个的项目有与其他项目不一样的对齐方式，可覆盖align-item属性。默认为auto，表示继承父元素的align-item属性,如果没有父元素，则等同于stretch

实例解析各项属性：

  1. flex-direction:定义主轴(项目排列)的方向
    1. <style>
    2.    .container {
    3.      width: 300px;
    4.      /* 如果这个容器的内容要使用flexbox布局：
    5.      首先必须将这个容器转为弹性盒子 */
    6.      display: flex;
    7.      /* 默认值 水平方向从左边显示 */
    8.      flex-direction: row;
    9.      /* 水平方向从右边开始显示 */
    10.      flex-direction: row-reverse;
    11.      /* 切换为主轴为垂直方向显示起来在上沿*/
    12.      flex-direction: column;
    13.      /* 下沿显示 */
    14.      flex-direction: column-reverse;
    15.    }
    16.  </style>
    17. </head>
    18. <body>
    19.  <div class="container">
    20.    <div class="item">1</div>
    21.    <div class="item">2</div>
    22.    <div class="item">3</div>
    23.    <div class="item">4</div>
    24.    <div class="item">5</div>
    25.    <div class="item">6</div>
    26.  </div>
    27. </body>
  1. flex-wrap：默认值 nowrap
    1. .container {
    2.      width: 300px;
    3.      /* 如果这个容器的内容要使用flexbox布局：
    4.      首先必须将这个容器转为弹性盒子 */
    5.      display: flex;
    6.      /* 定义换行 */
    7.      flex-wrap: wrap;
    8.      /* 第一行在下方 */
    9.      flex-wrap: wrap-reverse;
    10.    }
    11.    .container > .item {
    12.      width: 100px;
    13.    }
    14.  </style>
    15. </head>
    16. <body>
    17.  <div class="container">
    18.    <div class="item">1</div>
    19.    <div class="item">2</div>
    20.    <div class="item">3</div>
    21.    <div class="item">4</div>
    22.    <div class="item">5</div>
    23.    <div class="item">6</div>
    24.  </div>
    25. </body>
  1. flex-flow： 缩写 默认值row nowrap 建议用缩写
    1. .container {
    2.      width: 300px;
    3.      display: flex;
    4.      /* 主轴：从右开始水平排列，并换行且第一行在下方 */
    5.      flex-flow: column-reverse wrap-reverse;
    6.    }
    7.    .container > .item {
    8.      width: 100px;
    9.    }
    10.  </style>
    11. </head>
    12. <body>
    13.  <div class="container">
    14.    <div class="item">1</div>
    15.    <div class="item">2</div>
    16.    <div class="item">3</div>
    17.    <div class="item">4</div>
    18.    <div class="item">5</div>
    19.    <div class="item">6</div>
    20.  </div>
    21. </body>
    22. </html>

4.justify-content：定义项目在主轴上的对齐方式：本质就是剩余空间的分配{项目两边(全部项目看做整体)和项目之间(将项目视为一个个整体)}

  • 项目两边(全部项目看做整体)

    1. .container {
    2.       width: 300px;
    3.       /* 转为弹性盒子 */
    4.       display: flex;
    5.       /* 主轴水平从左侧 换行
    6.       (此处不换行是因为 .item总宽度<父元素宽度)不用换行*/
    7.       flex-flow: row wrap;
    8.       /* 左对齐 */
    9.       justify-content: flex-start;
    10.       /* 右对齐 */
    11.       justify-content: flex-end;
    12.       /* 居中 */
    13.       justify-content: center;
    14.     }
    15.     .container > .item {
    16.       width: 30px;
    17.     }
    18.   </style>
    19. </head>
    20. <body>
    21.   <div class="container">
    22.     <div class="item">1</div>
    23.     <div class="item">2</div>
    24.     <div class="item">3</div>
    25.     <div class="item">4</div>
    26.     <div class="item">5</div>
    27.     <div class="item">6</div>
    28.   </div>
    29. </body>

  • 项目之间(将项目视为一个个整体)

    1.       /* 两端对齐 */
    2.       justify-content: space-between;
    3.       /* 分散对齐 */
    4.       justify-content: space-around;
    5.       /* 平均分配 */
    6.       justify-content: space-evenly;

5.align-content:设置多行容器的项目排列(垂直)

  1. .container {
  2.         width: 300px;
  3.         height: 150px;
  4.         display: flex;
  5.         flex-flow: row wrap;
  6.         /* 默认占满整个空间 */
  7.         align-content: stretch;
  8.         /* 容器开始（左对齐） */
  9.         align-content: flex-start;
  10.         /* 容器结束 (右对齐)*/
  11.         align-content: flex-end;
  12.         /* 容器中间 (居中)*/
  13.         align-content: center;
  14.         /* 两端对齐 */
  15.         align-content: space-between;
  16.         /* 分散对齐 */
  17.         align-content: space-around;
  18.        /* 平均分配 */
  19.         align-content: space-evenly;
  20.       }
  21.       .container > .item {
  22.         width: 100px;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="container">
  28.       <div class="item">1</div>
  29.       <div class="item">2</div>
  30.       <div class="item">3</div>
  31.       <div class="item">4</div>
  32.       <div class="item">5</div>
  33.       <div class="item">6</div>
  34.     </div>
  35.   </body>

6.align-items：定义flex子项在flex容器的当前行的侧轴（交叉轴）方向上的对齐方式

  1. .container {
  2.         width: 300px;
  3.         height: 80px;
  4.         display: flex;
  5.         /* 项目在交叉轴上默认是自动伸缩的 
  6.         父容器高度200，项目默认也是200*/
  7.         align-items: stretch;
  8.         /* 容器开头 注意这是在交叉轴*/
  9.         align-items: flex-start;
  10.         /* 容器结尾 注意这是在交叉轴*/
  11.         align-items: flex-end;
  12.         /* 容器中间 注意这是在交叉轴*/
  13.         align-items: center;
  14.         /* 元素位于容器的基线上注意这是在交叉轴 */
  15.         align-items: baseline;
  16.       }
  18.       .container > .item {
  19.         widows: 30px;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="container">
  25.       <div class="item">1</div>
  26.       <div class="item">2</div>
  27.       <div class="item">3</div>
  28.       <div class="item">4</div>
  29.       <div class="item">5</div>
  30.       <div class="item">6</div>
  31.     </div>
  32.   </body>

实战之导航条：

  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.     <title>导航条实战：FLEX</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #cccccc;
  16.       }
  17.       header nav {
  18.         background-color: cadetblue;
  19.         height: 40px;
  20.         padding: 0 100px;
  21.         display: flex;
  22.       }
  23.       nav a {
  24.         /* 继承父级高度 */
  25.         height: inherit;
  26.         line-height: 40px;
  27.         padding: 0 20px;
  28.       }
  29.       nav a:hover {
  30.         color: coral;
  31.         background-color: cornsilk;
  32.       }
  33.       nav a:last-of-type {
  34.         margin-left: auto;
  35.       }
  36.     </style>
  37.   </head>
  38.   <body>
  39.     <header>
  40.       <nav>
  41.         <a href="">首页</a>
  42.         <a href="">视频教程</a>
  43.         <a href="">入门教程</a>
  44.         <a href="">视频问答</a>
  45.         <a href="">技术文章</a>
  46.         <a href="">PHP培训</a>
  47.       </nav>
  48.     </header>
  49.   </body>
  50. </html>

### 项目属性

  • order:定义项目排列的顺序。数值越小，排列越靠前，默认为0
  1. <style>
  2.       .container {
  3.         width: 300px;
  4.         display: flex;
  5.       }
  6.       .container > .item {
  7.         width: 60px;
  8.       }
  9.       .container > .item:first-of-type {
  10.         /* order:默认为零，谁大谁往后挪 */
  11.         order: 3;
  12.       }
  13.       .container > .item:last-of-type {
  14.         order: 5;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div class="container">
  20.       <div class="item">1</div>
  21.       <div class="item">2</div>
  22.       <div class="item">3</div>
  23.     </div>
  24.   </body>

总结

  • align-items 这个属性没有理解透，需要多多联系
  • 谢谢老师批复作业
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！