Bootstrap 媒体对象(Media object) 谈 flexbox的应用场景

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;
    }
    
}

2. 设置父元素的 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