Flex网格未对齐

时间：2017-08-15 15:07:15

标签： html css flexbox

我有一个用柔性盒子制作的网格。一些网格由正方形组成，有两个矩形。我似乎无法正确对齐盒子，使用flexbox生长flexbox，或手动设置盒子高度。目标是让它们在整个网格之间以相等的边距排列。这是网格代码：

.project-grid { height: 1400px; padding: 80px 20px;  }
.project-grid .column  { width:33.33%; margin-left:10px; flex-direction:column; margin-top:-10px; }
.project-grid .column:first-child { margin-left:0; }
.project-grid .column .box  {
margin-top:10px;
background-color:blue;
height: 400px;
background-size:cover;
background-repeat: no-repeat;}
.project-grid .column .box.tall  { height:800px; }

.project-grid .column a .box > p {
font-family: $lato;
color: $white;
font-size: 24px;}
.flex  { display:flex;}
<div class="project-grid flex">
                <div class="flex column">
                    <a href="/hospitality">
                        <div class="box" style="background-image: url('');" <a href="/projects">
                            <p>Hospitality</p>
                        </div>
                    </a>
                    <a href="/rennovation-repurpose">
                        <div class="box tall" style="background-image: url('');">
                            <p>Rennovation/ Repurpose</p>
                        </div>
                    </a>
                </div>
                <div class="flex column">
                    <a href="/automotive">
                        <div class="box" style="background-image: url('');">
                            <p>Automotive</p>
                        </div>
                    </a>
                    <a href="/serenbe">
                        <div class="box" style="background-image: url('');">
                            <p>Serenbe</p>
                        </div>
                    </a>
                    <a href="/retail-office">
                        <div class="box" style="background-image: url('')    ;">
                            <p>Retail/ Office</p>
                        </div>
                    </a>
                </div>
                <div class="flex column">
                    <a href="/multi-family-mixed-use">
                        <div class="box tall" style="background-image: url('');">
                            <p>Multi-Family/ Mixed Use</p>
                        </div>
                    </a>
                    <a href="/education-places-of-worship">
                        <div class="box" style="background-image: url('');">
                            <p>Education/ Places of Worship</p>
                        </div>
                    </a>
                </div>
            </div>
CSS

为了便于查看，这里有一个我已经制作的codepen：https://codepen.io/bsquared/pen/zdPqPJ

2 个答案:

答案 0 :(得分：1)

如评论所述，如果您在<a>版面中加入flex并绘制background，则可以实现您所寻找的视觉效果。

＆＃13;
＆＃13; 
a {
  /*with no fix height so it can be spread evenly if needed*/
  background: blue;
  /* draw bg here it will include children area and further if needed to even the visual */
  margin: 10px;
  /* set margins here */
  color: white;
}


/* flex layout and sizing */

.flex,
a {
  display: flex;
}

.column,
a {
  flex-direction: column;
  flex: 1;/* make fill entire space left if any */
}

.box {
  height: 400px;
}

.tall {
  height: 800px;
}
＆＃13; 
<div class="project-grid flex">
  <div class="flex column">
    <a href="/hospitality">
      <div class="box" style="background-image: url('');"><!-- background-image is to be send & set to the parent A -->
        <p>Hospitality</p>
      </div>
    </a>
    <a href="/rennovation-repurpose">
      <div class="box tall" style="background-image: url('');">
        <p>Rennovation/ Repurpose</p>
      </div>
    </a>
  </div>
  <div class="flex column">
    <a href="/automotive">
      <div class="box" style="background-image: url('');">
        <p>Automotive</p>
      </div>
    </a>
    <a href="/serenbe">
      <div class="box" style="background-image: url('');">
        <p>Serenbe</p>
      </div>
    </a>
    <a href="/retail-office">
      <div class="box" style="background-image: url('')    ;">
        <p>Retail/ Office</p>
      </div>
    </a>
  </div>
  <div class="flex column">
    <a href="/multi-family-mixed-use">
      <div class="box tall" style="background-image: url('');">
        <p>Multi-Family/ Mixed Use</p>
      </div>
    </a>
    <a href="/education-places-of-worship">
      <div class="box" style="background-image: url('');">
        <p>Education/ Places of Worship</p>
      </div>
    </a>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

如果你想保持高度，那么你需要记住每个列中元素的数量和边距的数量：

示例

＆＃13;
＆＃13; 
.project-grid { height: 1400px; padding: 80px 20px;  }
.project-grid .column  { width:33.33%; margin-left:10px; flex-direction:column; margin-top:-10px; }
.project-grid .column:first-child { margin-left:0; }
.project-grid .column .box  {
margin-top:10px;
background-color:blue;
height: 400px;
background-size:cover;
background-repeat: no-repeat;}
.project-grid .column .box.tall  { height:824px; }

.project-grid .column a .box > p {
font-family: $lato;
color: $white;
font-size: 24px;}
.flex  { display:flex;}
＆＃13; 
<div class="project-grid flex">
                <div class="flex column">
                    <a href="/hospitality">
                        <div class="box" style="background-image: url('');" >
                            <p>Hospitality</p>
                        </div>
                    </a>
                    <a href="/rennovation-repurpose">
                        <div class="box tall" style="background-image: url('');">
                            <p>Rennovation/ Repurpose</p>
                        </div>
                    </a>
                </div>
                <div class="flex column">
                    <a href="/automotive">
                        <div class="box" style="background-image: url('');">
                            <p>Automotive</p>
                        </div>
                    </a>
                    <a href="/serenbe">
                        <div class="box" style="background-image: url('');">
                            <p>Serenbe</p>
                        </div>
                    </a>
                    <a href="/retail-office">
                        <div class="box" style="background-image: url('')    ;">
                            <p>Retail/ Office</p>
                        </div>
                    </a>
                </div>
                <div class="flex column">
                    <a href="/multi-family-mixed-use">
                        <div class="box tall" style="background-image: url('');">
                            <p>Multi-Family/ Mixed Use</p>
                        </div>
                    </a>
                    <a href="/education-places-of-worship">
                        <div class="box" style="background-image: url('');">
                            <p>Education/ Places of Worship</p>
                        </div>
                    </a>
                </div>
            </div>
CSS
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

默认情况下，p标签的上下边距正在向上推。您必须在父overflow: auto;上使用div来阻止它发生。

.project-grid .column .box {
  // ...
  overflow: auto;
}

完整的工作代码：

＆＃13;
＆＃13; 
.project-grid {
  height: 1400px;
  padding: 80px 20px;
}

.project-grid .column {
  width: 33.33%;
  margin-left: 10px;
  flex-direction: column;
  margin-top: -10px;
}

.project-grid .column:first-child {
  margin-left: 0;
}

.project-grid .column .box {
  margin-top: 10px;
  background-color: blue;
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: auto;
}

.project-grid .column .box.tall {
  height: 800px;
}

.project-grid .column a .box>p {
  font-family: $lato;
  color: $white;
  font-size: 24px;
}

.flex {
  display: flex;
}
＆＃13; 
<div class="project-grid flex">
  <div class="flex column">
    <a href="/hospitality">
      <div class="box" style="background-image: url('');" <a href="/projects">
        <p>Hospitality</p>
      </div>
    </a>
    <a href="/rennovation-repurpose">
      <div class="box tall" style="background-image: url('');">
        <p>Rennovation/ Repurpose</p>
      </div>
    </a>
  </div>
  <div class="flex column">
    <a href="/automotive">
      <div class="box" style="background-image: url('');">
        <p>Automotive</p>
      </div>
    </a>
    <a href="/serenbe">
      <div class="box" style="background-image: url('');">
        <p>Serenbe</p>
      </div>
    </a>
    <a href="/retail-office">
      <div class="box" style="background-image: url('')    ;">
        <p>Retail/ Office</p>
      </div>
    </a>
  </div>
  <div class="flex column">
    <a href="/multi-family-mixed-use">
      <div class="box tall" style="background-image: url('');">
        <p>Multi-Family/ Mixed Use</p>
      </div>
    </a>
    <a href="/education-places-of-worship">
      <div class="box" style="background-image: url('');">
        <p>Education/ Places of Worship</p>
      </div>
    </a>
  </div>
</div>
CSS
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题