Question

使用此主题中讨论的布局我正在尝试创建一个博客HTML。 Live is here.

the CSS of this portion is written like this →

border: 1px solid #CCCCCC;
    display:flex;
    flex-wrap: wrap;
    width: calc(33% - 10px);
    margin-right: 10px;
    align-items: center;

但我认为有更好的方法可以通过使用flex中的这么多属性来实现这一点。

缺少什么→

目前，我正在使用此属性margin-right：10px;我认为我们可以有效地使用一些属性，如空间或空间，以给出项目之间的差距。我试过了，但那没用。
其次，我想要连续3个项目。 flex中应该有一些属性来实现这一点。

Answer 1

只需这样做

＆＃13;

.flexcontainer {
  display: flex;
  flex-wrap: wrap;                   /* wrap items when not fit on a line */
  justify-content: space-between;    /* a gutter between if item is less than 33% wide */
}
.flexcontainer::before,
.flexcontainer::after {              /* fill out last row when odd amount of items */
  content: '';
  flex-basis: calc(33.333% - 10px);  /* make them 33% - 10px wide  */
  order: 1;                          /* move them last */
}
.flexcontainer > div {
  flex-basis: calc(33.333% - 10px);  /* make them 33% - 10px wide  */
  border: 1px solid #CCCCCC;
  box-sizing: border-box;            /* make border/padding be included in its set width */
}
.flexcontainer > div > div {
  padding: 10px;
}
.flexcontainer > div:nth-child(n+4) {
  margin-top: 10px;                  /* element not on first line moves down a little */
}
.flexcontainer > div img {
  width: 100%;
}

＆＃13;

<div class="flexcontainer">
  <div>
    <img src="http://placehold.it/100/f00" alt="">
    <div>Some text</div>    
  </div>
  <div>
    <img src="http://placehold.it/100/f00" alt="">
    <div>Some text</div>    
  </div>
  <div>
    <img src="http://placehold.it/100/f00" alt="">
    <div>Some text</div>    
  </div>
  <div>
    <img src="http://placehold.it/100/f00" alt="">
    <div>Some text</div>    
  </div>
  <div>
    <img src="http://placehold.it/100/f00" alt="">
    <div>Some text</div>    
  </div>
  <div>
    <img src="http://placehold.it/100/f00" alt="">
    <div>Some text</div>    
  </div>
  <div>
    <img src="http://placehold.it/100/f00" alt="">
    <div>Some text</div>    
  </div>
</div>

＆＃13;

Flow 3项目连续排列，最后一行项目左对齐

1 个答案: