search

博客列表 >初识Flex布局以及常用属性

初识Flex布局以及常用属性

邱世家的博客
邱世家的博客原创
2020年06月23日 17:13:51894浏览

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 这个属性没有理解透，需要多多联系
  • 谢谢老师批复作业
上一条：基于浮动、定位方式的布局、分栏显示、flex容器实战和order控制下一条：Flex Box（弹性布局）相关知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多