search

博客列表 >CSS：flex布局理解及实例演示flex容器中的四个属性的功能、参数、以及作用

CSS：flex布局理解及实例演示flex容器中的四个属性的功能、参数、以及作用

逝去
逝去原创
2021年03月30日 00:14:451689浏览

一、什么是 flex 布局？

  • Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
  • flexbox 是一种一维的布局，因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。
  • 转为 flex 布局的元素就叫 flex 容器,弹性容器。
  • flex 容器中的子元素自动成 flex 容器的项目,并且是行内块显示。

二、flex 容器的四个属性的功能、参数、作用

flex 容器属性

1、主轴方向与换行方式 flex-flow

  • row nowrap
    默认主轴水平，不换行。
  • row wrap
    主轴水平，换行。
  • column nowrap
    主轴垂直，不换行。
  • column wrap
    主轴垂直，换行。
(1)row nowrap
(2)row wrap

效果图：

主轴水平，不换行
主轴水平，换行

代码实现：

  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.         box-sizing: border-box;
  11.       }
  13.       :root {
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  20.       .container {
  21.         display: flex;
  23.         height: 20rem;
  24.         border: 1px solid red;
  25.       }
  27.       .container > .item {
  28.         width: 10rem;
  29.         height: 5rem;
  30.         background-color: yellow;
  31.         border: 1px solid red;
  32.       }
  34.       .container {
  35.         /* flex-flow: row nowrap; */
  36.         flex-flow: row wrap;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="container">
  42.       <div class="item">item1</div>
  43.       <div class="item">item2</div>
  44.       <div class="item">item3</div>
  45.       <div class="item">item4</div>
  46.       <div class="item">item5</div>
  47.       <div class="item">item6</div>
  48.       <div class="item">item7</div>
  49.       <div class="item">item8</div>
  50.       <div class="item">item9</div>
  51.       <div class="item">item10</div>
  52.     </div>
  53.   </body>
  54. </html>
(3)column nowrap
(4)column wrap

效果图：

主轴垂直，不换行
主轴垂直，换行

代码实现：

  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.         box-sizing: border-box;
  11.       }
  13.       :root {
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  20.       .container {
  21.         display: flex;
  23.         height: 8rem;
  24.         border: 1px solid red;
  25.       }
  27.       .container > .item {
  28.         width: 4rem;
  29.         height: 2rem;
  30.         background-color: yellow;
  31.         border: 1px solid red;
  32.       }
  34.       .container {
  35.         /* flex-flow: column nowrap; */
  36.         flex-flow: column wrap;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="container">
  42.       <div class="item">item1</div>
  43.       <div class="item">item2</div>
  44.       <div class="item">item3</div>
  45.       <div class="item">item4</div>
  46.       <div class="item">item5</div>
  47.       <div class="item">item6</div>
  48.       <div class="item">item7</div>
  49.       <div class="item">item8</div>
  50.       <div class="item">item9</div>
  51.       <div class="item">item10</div>
  52.     </div>
  53.   </body>
  54. </html>

2、项目在主轴上的对齐方式 justify-content

  • 设置项目在主轴的对齐方式的前提是: 主轴上存在剩余空间
  • 项目在主轴上的对齐方式: justify-content

1.将所有项目看成一个整体来处理

  • justify-content: flex-start
    从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。

  • justify-content: flex-end
    从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。

  • justify-content: center
    伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。

效果图：

flex项目在主轴上的对齐方式
flex项目在主轴上的对齐方式
flex项目在主轴上的对齐方式

代码实现：

  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.         box-sizing: border-box;
  11.       }
  13.       :root {
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  20.       .container {
  21.         display: flex;
  23.         height: 8rem;
  24.         border: 1px solid red;
  25.       }
  27.       .container > .item {
  28.         width: 4rem;
  29.         height: 2rem;
  30.         background-color: yellow;
  31.         border: 1px solid red;
  32.       }
  34.       .container {
  35.         flex-flow: row nowrap;
  37.         justify-content: flex-start;
  38.         justify-content: flex-end;
  39.         justify-content: center;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <div class="container">
  45.       <div class="item">item1</div>
  46.       <div class="item">item2</div>
  47.       <div class="item">item3</div>
  48.       <div class="item">item4</div>
  49.       <div class="item">item5</div>
  50.     </div>
  51.   </body>
  52. </html>

2.将所有项目看成一个个独立的个体来处理

  • justify-content: space-between
    在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

  • justify-content: space-around
    在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

  • justify-content: space-evenly
    flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距,，主轴结束位置到最后一个 flex 项的间距，都完全一样。

效果图：

flex项目在主轴上的对齐方式
flex项目在主轴上的对齐方式
flex项目在主轴上的对齐方式

代码实现：

  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.         box-sizing: border-box;
  11.       }
  13.       :root {
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  20.       .container {
  21.         display: flex;
  23.         height: 8rem;
  24.         border: 1px solid red;
  25.       }
  27.       .container > .item {
  28.         width: 4rem;
  29.         height: 2rem;
  30.         background-color: yellow;
  31.         border: 1px solid red;
  32.       }
  34.       .container {
  35.         flex-flow: row nowrap;
  37.         /* 两端对齐 */
  38.         justify-content: space-between;
  39.         /* 分散对齐 */
  40.         justify-content: space-around;
  41.         /* 平均对齐 */
  42.         justify-content: space-evenly;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="container">
  48.       <div class="item">item1</div>
  49.       <div class="item">item2</div>
  50.       <div class="item">item3</div>
  51.       <div class="item">item4</div>
  52.     </div>
  53.   </body>
  54. </html>

3、项目在交叉轴的对齐方式 align-items

  • align-items：stretch
    弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

  • align-items：flex-start
    元素向侧轴起点对齐。

  • align-items：flex-end
    元素向侧轴终点对齐。

  • align-items：center
    元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

flex项目在交叉轴的对齐方式
flex项目在交叉轴的对齐方式
flex项目在交叉轴的对齐方式
flex项目在交叉轴的对齐方式

  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.         box-sizing: border-box;
  11.       }
  13.       :root {
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  20.       .container {
  21.         display: flex;
  23.         height: 20rem;
  24.         border: 1px solid red;
  25.       }
  27.       .container > .item {
  28.         /* width: 4rem;  */
  29.         height: 2rem;
  30.         background-color: yellow;
  31.         border: 1px solid red;
  32.       }
  34.       .container {
  35.         flex-flow: column nowrap;
  37.         /* align-items: stretch; */
  38.         /* align-items: flex-start; */
  39.         /* align-items: flex-end; */
  40.         align-items: center;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div class="container">
  46.       <div class="item">item1</div>
  47.       <div class="item">item2</div>
  48.       <div class="item">item3</div>
  49.       <div class="item">item4</div>
  50.     </div>
  51.   </body>
  52. </html>

4、项目在多行容器交叉轴上的对齐方式 align-content

  • stretch
    拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

  • flex-start
    所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。

  • flex-end
    所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。

  • center
    所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。

flex项目在交叉轴的对齐方式
flex项目在交叉轴的对齐方式
flex项目在交叉轴的对齐方式
flex项目在交叉轴的对齐方式

  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.         box-sizing: border-box;
  11.       }
  13.       :root {
  14.         font-size: 10px;
  15.       }
  16.       body {
  17.         font-size: 1.6rem;
  18.       }
  20.       .container {
  21.         display: flex;
  23.         height: 20rem;
  24.         border: 1px solid red;
  25.       }
  27.       .container > .item {
  28.         /* width: 4rem; */
  29.         height: 2rem;
  30.         background-color: yellow;
  31.         border: 1px solid red;
  32.       }
  34.       .container {
  35.         flex-flow: column wrap;
  37.         /* align-content: stretch; */
  38.         /* align-content: flex-start; */
  39.         /* align-content: flex-end; */
  40.         align-content: center;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div class="container">
  46.       <div class="item">item1</div>
  47.       <div class="item">item2</div>
  48.       <div class="item">item3</div>
  49.       <div class="item">item4</div>
  50.       <div class="item">item5</div>
  51.       <div class="item">item6</div>
  52.       <div class="item">item7</div>
  53.       <div class="item">item8</div>
  54.       <div class="item">item9</div>
  55.       <div class="item">item10</div>
  56.       <div class="item">item11</div>
  57.       <div class="item">item12</div>
  58.     </div>
  59.   </body>
  60. </html>
上一条：HTML-02常用html元素（上）下一条：HTML-01开发工具安装配置与HTML文档结构
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议