Flexbox布局（6）

上一篇介绍了flex-direction: row-reverse，来颠倒排列。
现使用下面规则：

• display: flex
• flex-direction: column
• align-items: center
• justify-content: center

来实现下面效果：

<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>

<style>
    .card {
        display: flex;
        flex-direction: column;
        border: 1px solid lightgray;
        border-radius: 6px;
    }
    .card-width {
        max-width: 150px;
    }
    .card-description {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        color: #BCD2DA;
        padding: 10px;
    }
    .card-description-icon {
        font-size: 32px;
    }
    .card-price {
        background: #EEF3F5;
        color: #57727C;
        border-top: 1px solid lightgrey;
        text-align: center;
        padding: 10px;
        font-weight: 700;
    }
</style>


<div class="card card-width">
    <div class="card-description">
        <div class="icon fa fa-flask card-description-icon"></div>
        <div class="card-description-text">science potion</div>
    </div>
    <div class="card-price">cost $5</div>
</div>

上面的css规则都是flex的简单应用。为了实现下面的布局效果，我们就需要一些复杂的flex规则。

上面布局要求：

1. 每个卡片的宽度一样，即使有的卡片内容比较多。
2. 每个卡片的高度一样， 即使有些卡片内的描述文字比较多。

使用css 的table布局，会非常麻烦，为了控制图标和文字的位置，还需要使用css calc函数。
使用flexbox就很精妙了。

将flex: 1 1 0作用在flexbox的子元素card上，它是下面flex规则的简写：

• flex-grow: 1，指明flex容器变大时当前子元素如何扩展。默认值为0。现在设置为1，让当前元素随着flexbox变大而变大。
• flex-shrink: 1，跟flex-grow一个道理，让当前元素随着flexbox变小而变小。
• flex-basis: 0，主要用来调节当前元素的大小。如果容器足够大，那么当前子元素和其他兄弟们的大小相等。

flex: 1 1 0的使用到达了要求1的效果，即卡片等宽
为了达到要求2的效果，flex: 1 1 auto用在card description上。

<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<style>
    .card-group {
        display: flex;
        overflow: hidden;
    }
    .card {
        display: flex;
        flex-direction: column;
        border: 1px solid lightgray;
        /*border-radius: 6px;*/
        overflow: hidden;
        flex: 1 1 0;
    }
    .card:first-child {
        border-radius: 6px 0 0 6px;
    }
    .card:last-child {
        border-radius: 0 6px 6px 0;
    }
    .card + .card {
        border-left: none;
    }
    .card-width {
        max-width: 150px;
    }
    .card-description {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;
        flex: 1 1 auto;
    }
    .card-description-icon {
        font-size: 32px;
        color: #BCD2DA;
    }
    .card-description-text {
        color: #57727C;
        font-size: 12px;
        text-align: center;
    }
    .card-price {
        background: #EEF3F5;
        color: #57727C;
        border-top: 1px solid lightgrey;
        text-align: center;
        padding: 10px;
        font-weight: 700;
    }
</style>

<div class="card-group">

    <div class="card card-width">
        <div class="card-description">
            <div class="icon fa fa-flask card-description-icon"></div>
            <div class="card-description-text">science potion</div>
        </div>
        <div class="card-price">cost $5</div>
    </div>
    <div class="card card-width">
        <div class="card-description">
            <div class="icon fa fa-trophy card-description-icon"></div>
            <div class="card-description-text">science poti onsdf sdfsd fsdffffff fffff ffffff fffff ffffff fffff ffffff fff fff</div>
        </div>
        <div class="card-price">cost $5</div>
    </div>
    <div class="card card-width">
        <div class="card-description">
            <div class="icon fa fa-bolt card-description-icon"></div>
            <div class="card-description-text">science potion</div>
        </div>
        <div class="card-price">cost $5</div>
    </div>
</div>