使用 flex 打造漂亮友情链接页面

效果如图，也可 点击查看 具体效果。

优点如下：

• 随着页面宽度自适应，一直保持正方形。
• 头像和标题自动左右垂直居中。

实现原理

自适应正方型的原理是利用 padding-bottom:100% 来实现的，为什么 padding-bottom:100% 等于容器宽度而不是高度呢，因为 padding 和 margin 的百分比都是按照文档方向算的，正常的文档方式是左右，自然也就是宽度了。

垂直居中利用了 flex 的 justify-content，具体可以搜索相关资料。

实现方法

友情链接我以前写过好几篇文章了，原理大家都很熟悉了，直接给出 CSS 和 PHP 代码。

CSS代码：

.catalog-title {
    font-size: 24px;
    color: #000;
    font-weight: 700
}

.catalog-share {
    font-size: 14px;
    color: rgba(0,0,0,.44);
    margin-bottom: 20px
}

.userItems {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 50px
}

.userItem {
    width: 25%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px
}

.userItem--inner {
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    border-radius: 3px;
    position: relative;
    padding-bottom: 100%;
    height: 0
}

.userItem-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.userItem-content .avatar {
    border-radius: 100%
}

.userItem-name {
    margin-top: 8px;
    text-align: center
}

@media (max-width:900px) {
    .userItem {
        width: 33.33333%
    }
}

@media (max-width:600px) {
    .userItem {
        width: 50%
    }
}

PHP 代码：

适用于 WordPress。

function get_the_link_items($id = null){
    $bookmarks = get_bookmarks('orderby=date&category=' . $id);
    $output    = '';
    if (!empty($bookmarks)) {
        $output .= '<div class="catalog-share">' . count($bookmarks) . ' items in collection</div><div class="userItems">';
        foreach ($bookmarks as $bookmark) {
            $output .= '<div class="userItem"><div class="userItem--inner"><div class="userItem-content">'. get_avatar($bookmark->link_notes,64) . '
            <div class="userItem-name"><a class="link link--primary" href="' . $bookmark->link_url . '" target="_blank" >' . $bookmark->link_name . '</a></div></div></div></div>';
        }
        $output .= '</div>';
    }
    return $output;
}

function get_link_items(){
    $linkcats = get_terms('link_category');
    if (!empty($linkcats)) {
        foreach ($linkcats as $linkcat) {
            $result .= '
            <h3 class="catalog-title">' . $linkcat->name . '</h3><div class="catalog-description">' . $linkcat->description . '</div>
            ';
            $result .= get_the_link_items($linkcat->term_id);
        }
    } else {
        $result = get_the_link_items();
    }
    return $result;
}

参考

全文转载自 fatesinger

原文链接：使用flex 打造漂亮友情链接页面