第八谈：Flex 弹性布局

作者: 辽A丶孙悟空 | 来源:发表于2020-06-04 18:33 被阅读0次

css:About Flex
第八谈：Flex 弹性布局
CSS3弹性布局 flexible boxes
flex布局
Flex布局
6Flex 布局
CSS弹性布局简单了解
前端概念解读
RN笔记：样式布局总结
flex布局

本节课我们来开始学习 Bootstrap 提供的 Flex 布局的样式功能，并且我将本次课程内容分为上下两个部分。

一．Flex 样式（上）

使用.d-flex 和.d-inline-flex 实现开启 flex 布局样式；
      <div class="d-flex">Flex 弹性布局</div>
这一对样式，也支持响应式的媒体查询：.d-*-flex；

.flex-row 可以呈现子元素水平方向的位置，默认居左并从左到右显示(1,2,3)；
      <div class="d-flex flex-row">
          <div class="p-2">项目 1</div>
          <div class="p-2">项目 2</div>
          <div class="p-2">项目 3</div>
      </div>
.flex-row-reverse 让子元素水平方向的位置居右并从左到右显示(3,2,1)；
      <div class="d-flex flex-row-reverse">
          <div class="p-2">项目 1</div>
          <div class="p-2">项目 2</div>
          <div class="p-2">项目 3</div>
      </div>
这一对样式，也支持响应式的媒体查询：.flex-*-row；

.flex-column 实现子元素垂直效果，并从上往下显示(1,2,3)；
      <div class="d-flex flex-column">
          <div class="p-2">项目 1</div>
          <div class="p-2">项目 2</div>
          <div class="p-2">项目 3</div>
      </div>
.flex-column-reverse 实现子元素垂直效果，并从上往下显示(3,2,1)；
      <div class="d-flex flex-column-reverse">
          <div class="p-2">项目 1</div>
          <div class="p-2">项目 2</div>
          <div class="p-2">项目 3</div>
      </div>
这一对样式，也支持响应式的媒体查询：.flex-*-column；

.justify-content-start(end、center、between、around)实现内容对齐；
      <div class="d-flex justify-content-start">...</div>
      <div class="d-flex justify-content-end">...</div>
      <div class="d-flex justify-content-center">...</div>
      <div class="d-flex justify-content-between">...</div>
      <div class="d-flex justify-content-around">...</div>
这五个内容对齐样式，也支持媒体查询：justify-content-*-start;

.align-items-start(end、center、baseline、stretch)实现项目对齐；
      <div class="d-flex align-items-start" style="height:100px;">
      <div class="d-flex align-items-end" style="height:100px;">
      <div class="d-flex align-items-center" style="height:100px;">
      <div class="d-flex align-items-baseline" style="height:100px;">
      <div class="d-flex align-items-stretch" style="height:100px;">
这五个项目对齐，也支持媒体查询：align-items-*-start；

.align-self-start(end、center、baseline、stretch)实现单项目对齐；
      <div class="d-flex m-2 p-2" style="height:100px;">
          <div class="p-2 align-self-start">项目 1</div>
          <div class="p-2 align-self-end">项目 2</div>
          <div class="p-2 align-self-center">项目 3</div>
          <div class="p-2 align-self-baseline">项目 4</div>
          <div class="p-2 align-self-stretch">项目 5</div>
      </div>

二．Flex 样式（下）

使用.flex-fill 强制让每个元素项目占据相等的水平宽度；
      <div class="d-flex">
          <div class="p-2 flex-fill">项目 1</div>
          <div class="p-2 flex-fill">项目 2</div>
          <div class="p-2 flex-fill">项目 3</div>
      </div>
三个项目同时设置了.flex-fill，则它们等比例分割宽度，适合导航项目；

如果其中一个或两个没有设置.flex-fill，则没有设置的会被设置的填充宽度；

.flex-*-fill 也可以实现响应式的媒体查询操作；

使用.flex-grow-，表示 0 或 1，也能实现.flex-fill
      <div class="d-flex">
          <div class="p-2 flex-grow-1">项目 1</div>
          <div class="p-2 flex-grow-1">项目 2</div>
          <div class="p-2 flex-grow-1">项目 3</div>
      </div>
通过元素生成的 CSS，我们可以看出，其实.flex-fill 就 flex 族的简写形式；

使用.flex-shrink-，表示 0 或 1，表示是否强制更换到新行中；
      <div class="d-flex">
          <div class="p-2 w-100">项目 1</div>
          <div class="p-2 flex-shrink-0">项目 2</div>
      </div>
这一对样式，也支持响应式的媒体查询：.flex--grow|shrink-；

使用.mr-auto 等对齐方式，对 flex 元素进行浮动对齐；
      <div class="d-flex">
          <div class="p-2 mr-auto">项目 1</div>
          <div class="p-2">项目 2</div>
          <div class="p-2">项目 3</div>
      </div>

      <div class="d-flex">
          <div class="p-2">项目 1</div>
          <div class="p-2">项目 2</div>
          <div class="p-2 border ml-auto">项目 3</div>
      </div>
对于垂直方向，也可以使用.mb-auto 和.mt-auto 来设置对象方向；
      <div class="d-flex flex-column align-items-start" style="height: 200px;">
          <div class="p-2 mb-auto">项目 1</div>
          <div class="p-2">项目 2</div>
          <div class="p-2">项目 3</div>
      </div>
      <div class="d-flex flex-column align-items-start" style="height: 200px;">
          <div class="p-2">项目 1</div>
          <div class="p-2">项目 2</div>
          <div class="p-2 mt-auto">项目 3</div>
      </div>
使用.flex-wrap(包裹)和.flex-nowrap(不包裹，默认)来设置子元素项目；
      <div class="d-flex flex-wrap" style="width: 200px;">
          <div class="p-2">项目 1</div>
          <div class="p-2">项目 2</div>
          <div class="p-2">项目 3</div>
          <div class="p-2">项目 4</div>
          <div class="p-2">项目 5</div>
          <div class="p-2">项目 6</div>
          <div class="p-2">项目 7</div>
          <div class="p-2">项目 8</div>
          <div class="p-2">项目 9</div>
          <div class="p-2">项目 10</div>
      </div>
使用.flex-warp-reverse 进行项目排序顺序的倒序；

这三个样式，也支持响应式的媒体查询：.flex-*-warp 等;

使用.order-，来设置子元素项目的排序顺序，支持.order--*；
      <div class="d-flex text-light">
          <div class="p-2 order-3">项目 1</div>
          <div class="p-2 order-1">项目 2</div>
          <div class="p-2 order-2">项目 3</div>
      </div>
.align-content-start(end、center、between、around、stretch)垂直对齐；
      <div class="d-flex flex-wrap align-content-end" style="height: 200px;">
      ...
.align-content-*-start 等支持媒体响应式查询；