search

博客列表 >Flex 容器常用属性与简单案例

Flex 容器常用属性与简单案例

司马青衫
司马青衫原创
2020年06月27日 14:33:44592浏览

Flex常用属性与简单案例

Flex 常用属性

1、应用 Flex 布局

  • 容器应用弹性盒子布局代码display:flex
  • 容器内的子元素就会成为弹性项目
  • 弹性项目成为行内块（可以设置宽度高度）
  • 有已分配空间与剩余空间概念

  • 弹性盒子有主轴、交叉轴概念 所有弹性项目都会沿主轴排列

  • 示例代码

  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.       .container {
  9.         /* 当前容器应用flex布局 */
  10.         display: flex;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <div class="container">
  16.       <div class="item">1</div>
  17.       <div class="item">2</div>
  18.       <div class="item">3</div>
  19.     </div>
  20.   </body>
  21. </html>
  • 显示效果

2、Flex 的单行容器

  • Flex 默认是单行容器flex-wrap: nowrap;
  • 单行容器的项目排列对齐方式控制代码justify-content

  • 本质是设置剩余空间与项目的排列方式

  • 示例代码

  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.       .container {
  9.         /* 当前容器应用flex布局 */
  10.         display: flex;
  12.         /* 单行容器项目对齐排列方式 */
  13.         /* 项目在容器的开头 剩余空间在容器结尾 */
  14.         justify-content: flex-start;
  15.         /* 项目在容器的结尾 剩余空间在容器开头 */
  16.         justify-content: flex-end;
  17.         /* 项目居中 剩余空间在容器两端平均分配 */
  18.         justify-content: center;
  20.         /* 剩余空间平均分布在项目与项目之间 */
  21.         justify-content: space-between;
  22.         /* 每个项目左右两边都带有一样大小的剩余空间 */
  23.         /* 即剩余空间被平均分配成项目数量的1/2n倍 */
  24.         /* 每个项目左右两边都带1/2n的剩余空间 */
  25.         /* 项目之间的剩余空间大小叠加 */
  26.         justify-content: space-around;
  27.         /* 剩余空间平均分配在每个项目的两边 */
  28.         justify-content: space-evenly;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="container">
  34.       <div class="item">1</div>
  35.       <div class="item">2</div>
  36.       <div class="item">3</div>
  37.     </div>
  38.   </body>
  39. </html>
  • 显示效果

3、Flex 的多行容器

  • Flex 改成多行容器flex-wrap: wrap;
  • 多行容器的项目排列对齐方式控制代码align-content

  • 本质是设置剩余空间与项目的排列方式

  • 示例代码

  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.       .container {
  9.         /* 当前容器应用flex布局 */
  10.         display: flex;
  11.         /* 定义容器大小 */
  12.         width: 100px;
  13.         height: 60px;
  15.         flex-wrap: wrap;
  16.         /* 多行容器项目对齐排列方式 */
  17.         /* 项目在容器的开头 剩余空间在容器结尾 */
  18.         align-content: flex-start;
  19.         /* 项目在容器的结尾 剩余空间在容器开头 */
  20.         align-content: flex-end;
  21.         /* 项目居中 剩余空间在容器两端平均分配 */
  22.         align-content: center;
  24.         /* 剩余空间平均分布在行与行之间 */
  25.         align-content: space-between;
  26.         /* 每行上下两边都带有一样大小的剩余空间 */
  27.         /* 即剩余空间被平均分配成行数量的1/2n倍 */
  28.         /* 每行上下两边都带1/2n的剩余空间 */
  29.         /* 行之间的剩余空间大小叠加 */
  30.         align-content: space-around;
  31.         /* 剩余空间平均分配在每行的两边 */
  32.         align-content: space-evenly;
  33.       }
  34.       .container > .item {
  35.         /* 定义项目的大小 */
  36.         width: 50px;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="container">
  42.       <div class="item">1</div>
  43.       <div class="item">2</div>
  44.       <div class="item">3</div>
  45.     </div>
  46.   </body>
  47. </html>
  • 显示效果

4、Flex 项目在交叉轴上排列方式

  • 使用align-item控制排列方式

  • 默认是align-items: stretch;

  • 示例代码

  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.       .container {
  9.         /* 当前容器应用flex布局 */
  10.         display: flex;
  11.         /* 定义容器大小 */
  12.         width: 100px;
  13.         height: 60px;
  14.         /* 项目被拉伸适应容器高度 */
  15.         align-items: stretch;
  16.         /* 项目在交叉轴方向上的开头排列 */
  17.         align-items: flex-start;
  18.         /* 项目在交叉轴方向的结尾排列 */
  19.         align-items: flex-end;
  20.         /* 项目在交叉轴方向的中间排列 */
  21.         align-items: center;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div class="container">
  27.       <div class="item">1</div>
  28.       <div class="item">2</div>
  29.       <div class="item">3</div>
  30.     </div>
  31.   </body>
  32. </html>
  • 显示效果

5、Flex 设置主轴为垂直方向

  • 使用代码flex-direction: column;

  • 示例代码

  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.       .container {
  9.         /* 当前容器应用flex布局 */
  10.         display: flex;
  11.         /* 设置主轴为垂直方向（默认是水平方向） */
  12.         flex-direction: column;
  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>
  22.   </body>
  23. </html>
  • 显示效果

  • 可以看出原先水平排列的 123 成了竖直排列的 123
  • 项目的对齐排列效果都会随着主轴变化而变化

6、Flex 控制项目显示顺序

  • 使用order进行控制

  • 默认参数为 0

  • 示例代码

  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.       .container {
  9.         /* 当前容器应用flex布局 */
  10.         display: flex;
  11.       }
  12.       .container > .item:first-of-type {
  13.         /* 将第一个项目调整到第三个显示  */
  14.         order: 3;
  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>
  25. </html>
  • 显示效果

  • 可以看出原先 1 在第一个显示 现在显示在最后面

Flex 布局简单导航案例

  • 示例代码
  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.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       nav {
  15.         /* 设置高度 */
  16.         height: 40px;
  17.         /* 设置导航栏背景颜色 */
  18.         background-color: #333;
  19.         /* 设置导航内边距 左右40px */
  20.         padding: 0 40px;
  21.         /* 导航栏使用flex布局 */
  22.         display: flex;
  23.       }
  24.       nav > a {
  25.         height: 40px;
  26.         line-height: 40px;
  27.         /* a标签去除下划线 */
  28.         text-decoration: none;
  29.         color: #ccc;
  30.         padding: 0 10px;
  31.       }
  32.       nav > a:last-of-type {
  33.         margin-left: auto;
  34.       }
  35.       nav > a:hover {
  36.         color: white;
  37.         background-color: seagreen;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <header>
  43.       <nav>
  44.         <a href="">主页</a>
  45.         <a href="">导航1</a>
  46.         <a href="">导航2</a>
  47.         <a href="">导航3</a>
  48.         <a href="">导航4</a>
  49.         <a href="">导航5</a>
  50.         <a href="">登录/注册</a>
  51.       </nav>
  52.     </header>
  53.   </body>
  54. </html>
  • 显示效果

上一条：熟悉盒模型下一条：flex布局和对齐方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多