由 Bootstrap 的媒体对象(Media object) 谈 flexbox

末蓝、 2021-09-18 09:02 142阅读 0赞

CSS3 弹性盒子(flexbox)，是一种新的布局方式。使用 flexbox，可以很方便的实现常见的布局以及居中效果。Bootstrap v4 的 Media object 也是使用 flexbox 来实现。flexbox 相关的属性较多，本文便结合几种的情形来探讨 flexbox 的应用场景。

Boostrap v3 中的 Media object 使用 table-cell 实现，新版本则采用了 flexbox。table-cell 是一个不太常见的属性，使用该属性主要是：1. 实现两栏或者多栏布局；2.很容易实现元素垂直居中效果。

v4 版本使用了 flexbox，完成功能的同时，相较于 v3 更加简洁了。下面我们来结合 Media Object 介绍 flexbox 的相关知识。

### 1. 常见的 Media object ###

Media object 用来实现常见的两栏或者多栏布局。

html 片段：

<div class="media">
        <img class="media-left media-pic" src="../assets/logo.png" />
        <div class="media-body">body</div>
        <div class="media-right">right</div>
    </div>
    复制代码

scss 片段：

.media {
        display: flex;
        .media-pic {
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }
        .media-body {
            flex: 1 1 230px;
            background-color: #b1b1b1;
        }
        .media-right {
            width: 50px;
        }
    }
    
    复制代码

在需要布局的区域设置 display: flex 就完成了最基本的布局。通过在 media-body 部分设置 flex: 1 来让这部分自动占据剩余宽度。flex 是 flex-grow，flex-shrink 与 flex-basis 的简写，flex: 1 相当于 flex: 1 1 none，其中 flex-shink 为 1，该元素宽度扩张为剩余的宽度。

### 2. 常见的居中效果 ###

有了 flexbox，我们可以很方便实现一些居中效果。这里讨论两种情形的居中。

#### 2.1 元素的居中 ####

在没有 flexbox 之前，让一个块级元素垂直居中用的是 `负外边距` 或者 `table-cell` 的方式来实现。现在有了 flexbox，居中很容易实现。

html 片段：

<div class="vertical-container">
        <p>简单的垂直居中布局的方法</p>
    </div>
    复制代码

scss 片段：

.vertical-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    复制代码

#### 2.2 align-self-center ####

在进行多栏布局中，我们其中的某一项垂直居中，Bootstrap 提供了一个 `align-self-center` 的类。把这个类添加到需要垂直居中的 flex item 上即可。

.align-self-center {
        align-self: center;
    }
    复制代码

### 3. 关于 Flexbox 的一些细节 ###

#### 3.1 flex 与 flex-wrap 属性 ####

flex 是 flex-shrink flex-grow flex-basis 的缩写，初始值是 flex: 0 1 auto。 默认情况下 flex-shrink 为 1，也就是说当 flex item 元素的宽度大于 Flexbox 的宽度时，flex item 元素的宽度会自动等比缩小，以避免撑破父元素。如果不希望子元素缩放，有两种情形。

1.  设置 flex-shrink 为 0，父元素加上滚动条。

.media {
        overflow-x: scroll;
        .box {
            flex-shirnk: 0;
        }
        
    }
    复制代码

1.  设置父元素的 flex-wrap 为 wrap。

.media {
        flex-wrap: wrap;
    }
    复制代码

#### 3.2 当使用 text-overflow 需要注意的细节 ####

CSS 的 text-overflow 可以用来控制超长溢出的文字内容的显示方式，对于超出的内容可以是直接截断、用省略号表示，或用自定义的字符替代。但是要想使该属性生效，还需设置元素的 overflow，white-space 属性。我们可以简单写一个 text-overflow 的类，专门用来控制文本的显示。

.text-overflow {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    复制代码

`white-space: no-wrap` 表示文本不会换行，除非遇到 <br>。与 Media object 想结合时，可能会导致文本把 Flex 容器撑破的情形。

<h4>情形-1</h4>
    <div class="media">
      <img class="media-left" src="../assets/logo.png" />
      <div class="media-body text-overflow">
        Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
      </div>
      <div class="media-right"></div>
    </div>
    <h4>情形-2</h4>
    <div class="media media3 media3-3">
      <img class="media-left" src="../assets/logo.png" />
      <div class="media-body">
        <p class="text-overflow">Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。</p>
      </div>
      <div class="media-right"></div>
    </div>
    复制代码

渲染效果如下：

我们发现 `text-overflow` 作用在 flex item 下的元素时，flex item 宽度被撑破，整个 Flexbox 排版也全乱掉。情形-2演示的场景很常见。为了排版的灵活性，一般情况下，并不会把 media-body 的宽度设定为一个固定值。一种最简便的解决方案是设置 media-body 的 min-width 为 0。

.media-body {
        min-width: 0;
    }
    复制代码

当设置 min-width 为 0，media-body 的宽度就不会超过 Flexbox 的剩余宽度。

### 4. 总结 ###

flex 弹性盒子的属性众多，一篇文章详解全部的属性也不太可能。一种好的方法是结合常见的排版情形来学习 flexbox。 下面总结一下文中涉及到的 flex box 相关的属性。

作用在 flex container 的属性:

> 1.  justify-content
> 2.  align-items
> 3.  flex-wrap

作用在 flex item 上的属性:

> 1.  flex (flex-shrink flex-grow flex-basis)
> 2.  align-self

本文只是结合自己的开发经验总结出一些常见情形，文中未涉及到或者讲解不详细的地方，大家可以在 [mdn 上查阅关于 flex 的资料][mdn _ flex]。

#### 参考资料 ####

*  [Flex 布局教程][Flex]
 *  [Bootstrap v3 Media object][]
 *  [Bootstrap v4 Media object][]
 *  [text-overflow 导致容器撑破的解决方案][text-overflow]

[mdn _ flex]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2FCSS_Flexible_Box_Layout%2FUsing_flexbox_to_lay_out_web_applications
[Flex]: https://link.juejin.im?target=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2015%2F07%2Fflex-grammar.html
[Bootstrap v3 Media object]: https://link.juejin.im?target=http%3A%2F%2Fv3.bootcss.com%2Fcomponents%2F%23media
[Bootstrap v4 Media object]: https://link.juejin.im?target=https%3A%2F%2Fgetbootstrap.com%2Fdocs%2F4.0%2Flayout%2Fmedia-object%2F
[text-overflow]: https://link.juejin.im?target=https%3A%2F%2Fcss-tricks.com%2Fflexbox-truncated-text%2F