Question

我在这个网站artpenleystudios.com上设计了一些社交媒体图标。它们目前正好对齐，但我希望使用'flex'属性使其更整洁，特别是在某些屏幕尺寸下。我希望4个图标在2 x 2网格中以相等的间距，垂直和水平方向显示，并且当屏幕尺寸发生变化时（通过媒体查询），还可以显示完美间隔和居中的4 x 1。如果有人有解决方案，那么我将非常感激。

Answer 1

你有没有想过这样的事情？

HTML：

<div class="master">
  <div class="group">
    <div class="item item-1">
      <img src="http://artpenleystudios.com/wp-content/themes/ap-studios/assets/images/instagram.svg">
    </div>
    <div class="item item-2">
      <img src="http://artpenleystudios.com/wp-content/themes/ap-studios/assets/images/facebook.svg" alt="Art Penley Studios - Facebook">
    </div>
  </div>  
  <div class="group">
    <div class="item item-3">
      <img src="http://artpenleystudios.com/wp-content/themes/ap-studios/assets/images/soundcloud.svg" alt="Art Penley Studios - Soundcloud">
    </div>
    <div class="item item-4">
      <img src="http://artpenleystudios.com/wp-content/themes/ap-studios/assets/images/vimeo.svg" alt="Art Penley Studios - Vimeo">
    </div>
  </div> 
</div>

CSS：

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}

.master {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: stretch; 
    padding: 20px;
}

.group {
   flex: 1 1 auto;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: center;
   align-items: center;
   background-color: white;
}

.item {
  flex: 1 1 auto;
  text-align: center;
}

img {
  width: 150px;
  height: 150px;
  padding: 60px;
}

CODEPEN

这只是一个草案。我不确定我理解你的问题。

Flex - 根据屏幕尺寸对齐水平和垂直

1 个答案: