search

博客列表 >css基础之flex布局

css基础之flex布局

Yang_Sir
Yang_Sir原创
2020年04月10日 16:30:28992浏览

flex布局

1.什么是flex

  • flex 是 Flexible Box 的缩写,意为弹性布局
  • flex布局中把一个元素作为容器，容器中的子元素称为项目
  • 可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。

2.flex布局的方向

  • flex布局项目的排列方向可以有两个维度，一水平，二垂直
  • 项目排列方向称为主轴，与主轴垂直的方向叫交叉轴
  • 在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。

2.1 flex水平布局

  • 在水平维度，默认方向是从左至右
  • 可以通过 flex-direction：row-reverse设置为从右到左排列
  1. <style>
  2. header {
  3.         background-color: skyblue;
  4.       }
  5. .nav-container {
  6.         display: flex;
  7.         flex-direction：row;
  8.         flex-direction：row-reverse;
  9.       }
  11. </style>
  12. <header>
  13.       <nav>
  14.         <ul class="nav-container">
  15.           <li class=""><img src="" alt="LOGO" /></li>
  16.           <li class=""><a href="">导航1</a></li>
  17.           <li class=""><a href="">导航2</a></li>
  18.           <li class=""><a href="">导航3</a></li>
  19.           <li class=""><a href="">导航4</a></li>
  20.         </ul>
  21.       </nav>
  22.     </header>

效果图：
1).默认方向,从左至右

2).反方向

2.2 垂直布局

  1. <style>
  2. header {
  3.         background-color: skyblue;
  4.       }
  5. .nav-container {
  6.         display: flex;
  7.         flex-direction：column;
  8.         flex-direction：row-reverse;
  9.       }
  11. </style>
  12. <header>
  13.       <nav>
  14.         <ul class="nav-container">
  15.           <li class=""><img src="" alt="LOGO" /></li>
  16.           <li class=""><a href="">导航1</a></li>
  17.           <li class=""><a href="">导航2</a></li>
  18.           <li class=""><a href="">导航3</a></li>
  19.           <li class=""><a href="">导航4</a></li>
  20.         </ul>
  21.       </nav>
  22.     </header>

效果图：
1).默认方向，从上到下

2).反方向

3. 容器内项目换行

  • 通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。
  • 不换行的称为单行容器，换行的称为多行容器
  • 也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用）
  1. <style>
  2. .content {
  3.         border-style: groove;
  4.         width: 150px;
  5.         height: 80px;
  6.         margin-top: 10px;
  7.       }
  8.       main > section {
  9.         width: 600px;
  10.         display: flex;
  11.         border-style: dotted;
  12.         flex-flow: row nowrap;/*水平方向，不允许换行*/
  13.         flex-flow: row wrap;/*水平方向，允许换行*/
  14.       }
  15. </style>
  16. <main>
  17.         <section>
  18.           <div class="content">
  19.             <p>我是段落01</p>
  20.           </div>
  21.           <div class="content">
  22.             <p>我是段落02</p>
  23.           </div>
  24.           <div class="content">
  25.             <p>我是段落03</p>
  26.           </div>
  27.           <div class="content">
  28.             <p>我是段落04</p>
  29.           </div>
  30.           <div class="content">
  31.             <p>我是段落05</p>
  32.           </div>
  33.           <div class="content">
  34.             <p>我是段落06</p>
  35.           </div>
  36.           <div class="content">
  37.             <p>我是段落07</p>
  38.           </div>
  39.         </section>
  40.       </main>

效果图：
1).默认不允许换行，项目被压缩

2).允许换行，当剩余宽度不足容纳一个项目块时，就换行

4.项目对齐

4.1 主轴线上项目对齐

  • justify-content属性，设置主轴线上的项目对齐方式。只有当容器主轴线上有剩余空间时才生效
  1. <style>
  2. .content {
  3.         border-style: groove;
  4.         width: 150px;
  5.         height: 80px;
  6.         margin-top: 10px;
  7.       }
  8.       main > section {
  9.         width: 600px;
  10.         display: flex;
  11.         border-style: dotted;
  12.         flex-flow: row wrap;/*水平方向，允许换行*/
  13.         justify-content: center;
  14.         justify-content: flex-end;
  15.         justify-content: space-evenly;
  16.       }
  17. </style>
  18. <main>
  19.         <section>
  20.           <div class="content">
  21.             <p>我是段落01</p>
  22.           </div>
  23.           <div class="content">
  24.             <p>我是段落02</p>
  25.           </div>
  26.           <div class="content">
  27.             <p>我是段落03</p>
  28.           </div>
  29.           <div class="content">
  30.             <p>我是段落04</p>
  31.           </div>
  32.           <div class="content">
  33.             <p>我是段落05</p>
  34.           </div>
  35.           <div class="content">
  36.             <p>我是段落06</p>
  37.           </div>
  38.           <div class="content">
  39.             <p>我是段落07</p>
  40.           </div>
  41.         </section>
  42.       </main>

示例：
1).居中对齐

2).靠终止边对齐

3).平分对齐

4.2 交叉轴上项目对齐

  • align-items属性，适用于单行容器
  • align-content属性，适用于多行容器
  • 交叉轴上的项目对齐，在交叉轴上有剩余空间才有意义

4.2.1 交叉轴上单行容器对齐

  1. <style>
  2. .content {
  3.         border-style: groove;
  4.         width: 150px;
  5.         height: 80px;
  6.         margin-top: 10px;
  7.       }
  8.       main > section {
  9.         width: 600px;
  10.         height: 180px;
  11.         display: flex;
  12.         border-style: dotted;
  13.         flex-flow: row nowrap;
  14.         align-items: center; /*交叉轴 居中对齐 */
  15.         align-items: flex-end; /* 交叉轴终止边对齐 */
  16.       }
  17. </style>
  18. <main>
  19.         <section>
  20.           <div class="content">
  21.             <p>我是段落01</p>
  22.           </div>
  23.           <div class="content">
  24.             <p>我是段落02</p>
  25.           </div>
  26.           <div class="content">
  27.             <p>我是段落03</p>
  28.           </div>
  29.       </main>

1).交叉轴居中对齐

2).交叉轴靠终止边对齐

4.2.2 交叉轴上多行容器对齐

  1. <style>
  2.  .content {
  3.         border-style: groove;
  4.         width: 120px;
  5.         height: 80px;
  6.         margin-top: 10px;
  7.       }
  8.       main > section {
  9.         width: 600px;
  10.         height: 280px;
  11.         display: flex;
  12.         border-style: dotted;
  13.         flex-flow: row wrap;
  14.         align-content: center; /*交叉轴 居中对齐 */
  15.         align-content: flex-end; /*交叉轴终止边对齐 */
  16.       }
  17. </style>
  18. <main>
  19.         <section>
  20.           <div class="content">
  21.             <p>我是段落01</p>
  22.           </div>
  23.           <div class="content">
  24.             <p>我是段落02</p>
  25.           </div>
  26.           <div class="content">
  27.             <p>我是段落03</p>
  28.           </div>
  29.           <div class="content">
  30.             <p>我是段落04</p>
  31.           </div>
  32.           <div class="content">
  33.             <p>我是段落05</p>
  34.           </div>
  35.           <div class="content">
  36.             <p>我是段落06</p>
  37.           </div>
  38.           <div class="content">
  39.             <p>我是段落07</p>
  40.           </div>
  41.         </section>
  42.       </main>

1).交叉轴居中对齐

2).交叉轴靠终止边对齐

5.项目在交叉轴上的单独对齐

  • align-self属性，可以单独设置项目在交叉轴上的对齐
  • 如果多行容器设置了align-content，项目align-self属性失效
    1. <style>
    2. .content {
    3.       border-style: groove;
    4.       width: 120px;
    5.       height: 80px;
    6.       margin-top: 10px;
    7.     }
    8.     .content:last-of-type {
    9.       align-self: flex-end;
    10.     }
    11.     main > section {
    12.       width: 600px;
    13.       height: 280px;
    14.       display: flex;
    15.       border-style: dotted;
    16.       flex-flow: row wrap;
    17.       /* align-content: center; */
    18.       align-items: center; /*交叉轴 居中对齐 */
    19.     }
    20. </style>
    21. <main>
    22.       <section>
    23.         <div class="content">
    24.           <p>我是段落01</p>
    25.         </div>
    26.         <div class="content">
    27.           <p>我是段落02</p>
    28.         </div>
    29.         <div class="content">
    30.           <p>我是段落03</p>
    31.         </div>
    32.         <div class="content">
    33.           <p>我是段落04</p>
    34.         </div>
    35.         <div class="content">
    36.           <p>我是段落05</p>
    37.         </div>
    38.         <div class="content">
    39.           <p>我是段落06</p>
    40.         </div>
    41.         <div class="content">
    42.           <p>我是段落07</p>
    43.         </div>
    44.       </section>
    45.     </main>

6.项目的缩放

  • flex-grow属性，设置项目的放大系数，默认0，不放大。
  • 在容器主轴上存在剩余空间时，flex-grow才有意义
  • 放大时，按各项目的放大系数在系数和中占的比例分配剩余空间
  • flex-shrink属性，设置项目的缩小系数，默认1，允许缩小。
  • 当容器主轴 “空间不足” 且 “禁止换行” 时，flex-shrink才有意义
  • 缩小时，按各项目的缩小系数在系数和中占的比例缩小超出容器的空间
  • flex-basis属性，设置flex 元素在主轴方向上的初始大小
  • 项目缩放的简写：flex: flex-grow flex-shrink flex-basis
  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.       body {
  9.         width: 800px;
  10.         height: 2000px;
  11.         display: flex;
  12.         flex-flow: column wrap;
  13.         align-items: center;
  14.         margin: auto;
  15.       }
  16.       /* * {
  17.         outline-style: groove;
  18.       } */
  19.       header {
  20.         background-color: skyblue;
  21.       }
  22.       nav {
  23.         width: 800px;
  24.         margin: auto;
  25.       }
  26.       .nav-container {
  27.         display: flex;
  28.         justify-content: space-around;
  29.       }
  30.       li {
  31.         list-style-type: none;
  32.       }
  33.       ol > li {
  34.         list-style-type: decimal;
  35.       }
  37.       .container {
  38.         width: 800px;
  39.         display: flex;
  40.         justify-content: space-between;
  41.       }
  42.       aside {
  43.         /*  */
  44.         flex: 1 1 200px;
  45.         margin-right: 5%;
  46.       }
  47.       main {
  48.         flex: 3 1 auto;
  49.       }
  50.       .content {
  51.         border-style: groove;
  52.         width: 120px;
  53.         height: 80px;
  54.         margin-top: 10px;
  55.         flex: 1 0 100px;
  56.       }
  57.       /*.content:last-of-type {
  59.         flex: 1 1 80px;
  60.       }
  61.       .content:nth-of-type(6) {
  63.         flex: 2 1 80px;
  64.       }*/
  65.       main > section {
  66.         width: 600px;
  67.         height: 280px;
  68.         display: flex;
  69.         flex-flow: row wrap;
  70.         /* align-content: center; */
  71.         align-items: center; /*交叉轴 居中对齐 */
  72.       }
  74.       p {
  75.         margin: auto;
  76.         text-align: center;
  77.       }
  78.       footer {
  79.         width: inherit;
  80.         height: 80px;
  82.         background-color: #ffff80;
  83.       }
  84.     </style>
  85.   </head>
  86.   <body>
  87.     <header>
  88.       <nav>
  89.         <ul class="nav-container">
  90.           <li class=""><img src="" alt="LOGO" /></li>
  91.           <li class=""><a href="">导航1</a></li>
  92.           <li class=""><a href="">导航2</a></li>
  93.           <li class=""><a href="">导航3</a></li>
  94.           <li class=""><a href="">导航4</a></li>
  95.         </ul>
  96.       </nav>
  97.     </header>
  98.     <div class="container">
  99.       <aside>
  100.         <!-- <h3>排行榜</h3> -->
  102.         <ol>
  103.           <li><a href="">排名1</a></li>
  104.           <li><a href="">排名2</a></li>
  105.           <li><a href="">排名3</a></li>
  106.           <li><a href="">排名4</a></li>
  107.           <li><a href="">排名5</a></li>
  108.           <li><a href="">排名6</a></li>
  109.           <li><a href="">排名7</a></li>
  110.           <li><a href="">排名8</a></li>
  111.           <li><a href="">排名9</a></li>
  112.           <li><a href="">排名10</a></li>
  113.         </ol>
  114.       </aside>
  115.       <main>
  116.         <section>
  117.           <div class="content">
  118.             <p>我是段落01</p>
  119.           </div>
  120.           <div class="content">
  121.             <p>我是段落02</p>
  122.           </div>
  123.           <div class="content">
  124.             <p>我是段落03</p>
  125.           </div>
  126.           <div class="content">
  127.             <p>我是段落04</p>
  128.           </div>
  129.           <div class="content">
  130.             <p>我是段落05</p>
  131.           </div>
  132.           <div class="content">
  133.             <p>我是段落06</p>
  134.           </div>
  135.           <div class="content">
  136.             <p>我是段落07</p>
  137.           </div>
  138.         </section>
  139.       </main>
  140.     </div>
  141.     <footer>
  142.       <section>
  143.         <p>底部导航</p>
  144.       </section>
  145.     </footer>
  146.   </body>
  147. </html>

7. 课程总结

  • flex布局可以把每一个元素都设成一个容器，它的子元素是他的项目，同时它又是其父级的项目。
  • 通过设置项目在容器主轴和交叉轴的排列方式来实现元素的定位
  • 通过容器内项目的缩放设置，使显示页面可以很好的适应可视窗口的变化
上一条：flex容器与项目笔记作业和感想下一条：flex弹性布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多