再说Flex布局

弹性布局使用起来更加灵活,本文针对其中的几个关键字段加以描述

① display: flex

使用display: flex 的元素, 称之为 【Flex 容器】
【容器】内部的所有子元素, 称之为 【Item】
Item 默认在【主轴方向】上依次排列, 主轴方向默认为【水平方向 + 自左向右】,如下图

Flex布局基本概念

   <!-- HTML -->
     <div class="flex-container">
           <div class="item">Item-1</div>
           <div class="item">Item-2</div>
           <div class="item">Item-3</div>
      </div>

   /* CSS */
   .flex-container {
       display: flex;
       height: 200px;
       background: #343a40;
       align-items: start;
   }

渲染效果

② align-content

该属性用于在Flex容器设置了换行flex-wrap: wrap的情况下, 在主轴方向上无可用空间以填满所有Item时, 在侧轴方向上 设置Item的排列规则

③ justify-content

定义了item在【主轴方向】上的对齐方式 (左, 中, 右)

   /* CSS */
   .flex-container {
       display: flex;
       height: 200px;
       background: #343a40;
       align-items: start;
      justify-content: flex-start;
   }

justify-content: flex-start justify-content: center justify-content: flex-end

④ align-items

Flex容器内的所有Item, 延【侧轴方向】上的对齐方式

align-items 释义图

属性取值范围:

image.png

默认值为 stretch, 意为, Flex容器内的所有Item 延【侧轴方向】拉伸铺满

⑤ align-self

针对【单个Item】单独设置【侧轴方向】上的对齐方式
--- 可以让某个Item 与众不同
--- 会覆盖容器的align-items

注意: 换言之, 此属性是 item的属性, 而非容器的属性

      <!-- HTML -->
      <div class="flex-container">
           <div class="item btn btn-primary">Item-1</div>
           <div class="item btn item-2 btn-danger">Item-2</div>
           <div class="item btn btn-info">Item-3</div>
      </div>

      /* CSS */
    .flex-container {
        display: flex;
        height: 200px;
        background: #343a40;
        align-items: start;
    }

    .item {
        flex: 1; /* 主轴方向上所有的 item 宽度均等 */
    }

    .item-2 {
        align-self: flex-end;
    }

用 align-self 单独设置某个item的侧轴方向(由上到下) 上的对齐方式