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

优点如下：

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

实现原理

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

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

实现方法

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

CSS代码：

  1. .catalog-title {
  2.     font-size: 24px;
  3.     color: #000;
  4.     font-weight: 700
  5. }
  7. .catalog-share {
  8.     font-size: 14px;
  9.     color: rgba(0,0,0,.44);
  10.     margin-bottom: 20px
  11. }
  13. .userItems {
  14.     display: -webkit-box;
  15.     display: -webkit-flex;
  16.     display: -ms-flexbox;
  17.     display: flex;
  18.     -webkit-flex-wrap: wrap;
  19.     -ms-flex-wrap: wrap;
  20.     flex-wrap: wrap;
  21.     margin-bottom: 50px
  22. }
  24. .userItem {
  25.     width: 25%;
  26.     box-sizing: border-box;
  27.     margin-bottom: 20px;
  28.     padding-left: 10px;
  29.     padding-right: 10px
  30. }
  32. .userItem--inner {
  33.     border: 1px solid rgba(0,0,0,.05);
  34.     box-shadow: 0 1px 4px rgba(0,0,0,.04);
  35.     border-radius: 3px;
  36.     position: relative;
  37.     padding-bottom: 100%;
  38.     height: 0
  39. }
  41. .userItem-content {
  42.     display: -webkit-box;
  43.     display: -webkit-flex;
  44.     display: -ms-flexbox;
  45.     display: flex;
  46.     position: absolute;
  47.     top: 0;
  48.     bottom: 0;
  49.     left: 0;
  50.     right: 0;
  51.     padding: 10px;
  52.     -webkit-box-align: center;
  53.     -webkit-align-items: center;
  54.     -ms-flex-align: center;
  55.     align-items: center;
  56.     -webkit-flex-flow: column wrap;
  57.     -ms-flex-flow: column wrap;
  58.     flex-flow: column wrap;
  59.     -webkit-box-pack: center;
  60.     -webkit-justify-content: center;
  61.     -ms-flex-pack: center;
  62.     justify-content: center
  63. }
  65. .userItem-content .avatar {
  66.     border-radius: 100%
  67. }
  69. .userItem-name {
  70.     margin-top: 8px;
  71.     text-align: center
  72. }
  74. @media (max-width:900px) {
  75.     .userItem {
  76.         width: 33.33333%
  77.     }
  78. }
  80. @media (max-width:600px) {
  81.     .userItem {
  82.         width: 50%
  83.     }
  84. }

PHP 代码：

适用于 WordPress。

  1. function get_the_link_items($id = null){
  2.     $bookmarks = get_bookmarks('orderby=date&category=' . $id);
  3.     $output    = '';
  4.     if (!empty($bookmarks)) {
  5.         $output .= '<div class="catalog-share">' . count($bookmarks) . ' items in collection</div><div class="userItems">';
  6.         foreach ($bookmarks as $bookmark) {
  7.             $output .= '<div class="userItem"><div class="userItem--inner"><div class="userItem-content">'. get_avatar($bookmark->link_notes,64) . '
  8.             <div class="userItem-name"><a class="link link--primary" href="' . $bookmark->link_url . '" target="_blank" >' . $bookmark->link_name . '</a></div></div></div></div>';
  9.         }
  10.         $output .= '</div>';
  11.     }
  12.     return $output;
  13. }
  15. function get_link_items(){
  16.     $linkcats = get_terms('link_category');
  17.     if (!empty($linkcats)) {
  18.         foreach ($linkcats as $linkcat) {
  19.             $result .= '
  20.             <h3 class="catalog-title">' . $linkcat->name . '</h3><div class="catalog-description">' . $linkcat->description . '</div>
  21.             ';
  22.             $result .= get_the_link_items($linkcat->term_id);
  23.         }
  24.     } else {
  25.         $result = get_the_link_items();
  26.     }
  27.     return $result;
  28. }

参考

全文转载自 fatesinger

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