Question

我正在尝试使用flexbox创建的布局下面的代码。而不是让圆圈位于第二列的上方，是否可以让它以第一列为中心并在屏幕调整大小时保持居中？我需要采取哪些步骤来实现这样的目标？什么都有帮助，谢谢。这是CodePen

.profile-picture {
  display: flex;
  margin-top: 55px;
  margin-bottom: 35px;
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #f1f1f1;
}

.image {
  background-image: url('');
}

.profile-bio {
  background-color: #f1f1f1;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  height: 150px;
  width: 550px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.profile-bio:before {
  content: '';
  float: left;
  padding-top: 100%;
}

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-post {
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  flex: 1 0 auto;
  height: auto;
  max-width: 275px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.flex-post:before {
  content: '';
  float: left;
  padding-top: 100%;
}

.flex-post:hover {
  background-color: rgba(1, 1, 1, 0.5);
}

<div class="flex-container">
  <div class="profile-picture image">
  </div>
</div>

<div class="flex-container">
  <div class="flex-post"></div>
  <div class="flex-post"></div>
  <div class="flex-post"></div>
</div>
<div class="flex-container">
  <div class="flex-post"></div>
  <div class="flex-post"></div>
  <div class="flex-post"></div>
</div>
<div class="flex-container">
  <div class="flex-post"></div>
  <div class="flex-post"></div>
  <div class="flex-post"></div>
</div>

Answer 1

你去吧

CodePen

使用此处使用的百分比值，您将获得相对于containing block宽度的大小。

您可以使用此css将所有flex-post嵌套在一个flex-container中：

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-post { 
  width: 30%;
  margin-right: 5%;
  margin-bottom: 5%;
  background-color: #f1f1f1;
}

.flex-post:nth-child(3n+3) {
  margin-right: 0;
}

.flex-post:nth-last-child(1),
.flex-post:nth-last-child(2),
.flex-post:nth-last-child(3) {
  margin-bottom: 0;
}

使用flexbox列居中圈

1 个答案: