效果如图,也可 点击查看 具体效果。
优点如下:
- 随着页面宽度自适应,一直保持正方形。
- 头像和标题自动左右垂直居中。
实现原理
自适应正方型的原理是利用 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 打造漂亮友情链接页面