如何对齐这些项目和边栏看起来像这样？

Question

我试图将 css 中的一些项目对齐成这样，最好使用 flexbox。谢谢。

|文字A |文本 B |文本 C |视频 | |文字d |文字 E |文本 F |视频 |

视频在两行是同一个视频，试图让它沿着边延伸作为侧边栏

HTML

        <section id="s2">
            <h2>What do we do here?</h2>
            <br>
            <div id="list">
                <div class="services">

                    <div><a href="" id="item1" class="serviceclasses">1 </a></div>
                    <div><a href="" id="item2" class="serviceclasses">2</a></div>
                    <div><a href="" id="item3" class="serviceclasses">3</a></div>
                    <div><a href="" id="item4" class="serviceclasses">4</a></div>
                    <div><a href="" id="item5" class="serviceclasses">5</a></div>
                    <div><a href="" id="item6" class="serviceclasses">6</a></div>
                </div>
                    <div class="side">
                    <aside class="video-sidebar">
                        <figure>
                            <figcaption>VIDEO</figcaption>
                            <div class="video">
                        <video controls>
                            
                            <source src = "felixynwa.mp4" width="20px" height="20px">
                        
                        </video>
                    </div>
                        <figcaption>VIDEO BOTTOM TEXT</figcaption>
                    </figure>
                    </aside>
                </div>
            </div>
            <br>
        </section>

CSS

.services{
  display: flex;
  flex-wrap:wrap;
  flex-direction: row;
  flex: 1 1 500px;
}
.serviceclasses{

  box-sizing: content-box;
  text-align: center;
    background-color: #f5f5f5;
    color:#000;
    text-align:center;
    padding:30px;
    margin:1px;
    color: #fff;
    border-radius: 10px;
     margin: 40px 20px; 
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6); 
} 

Answer 1

如果您不想更改当前的 HTML：

#list {
  display: flex;
}

.services {
  display: grid;
  /* 2 rows of same height, 3 columns of same width */
  grid-template: 1fr 1fr / repeat(3, 1fr);
}

试试看：

#list {
  display: flex;
}

.services {
  display: grid;
  grid-template: 1fr 1fr / repeat(3, 1fr);
}


/* Demo only */

#list, .services {
  gap: 1em;
}

.services div, .side {
  outline: 2px solid black;
}

.services a {
  display: block;
  border-radius: 10px;
  margin: 40px 20px;
  box-sizing: content-box;
  background-color: #f5f5f5;
  padding: 30px;
  text-align: center;
  color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

<div id="list">
  <div class="services">
    <div><a href="">1</a></div>
    <div><a href="">2</a></div>
    <div><a href="">3</a></div>
    <div><a href="">4</a></div>
    <div><a href="">5</a></div>
    <div><a href="">6</a></div>
  </div>
  <div class="side">
    <aside>
      <figure>
        <figcaption>VIDEO</figcaption>
        <div class="video">
          <video controls>
              <source width="20px" height="20px">
            </video>
        </div>
        <figcaption>VIDEO BOTTOM TEXT</figcaption>
      </figure>
    </aside>
  </div>
</div>

...或者，与

display: contents

：

#list {
  display: grid;
  /* 2 rows of same height, 3 columns of same width plus 1 of auto width */
  grid-template: 1fr 1fr / repeat(3, 1fr) auto;
}
#list {
  display: grid;
}
.services {
  /* Ignore the element itself, as if its children were #list's direct children */
  display: contents;
}

.side {
  /* Spans all rows, starts and ends at the last column */
  grid-row: 1 / -1;
  grid-column: -2; /* -2 means second last vertical grid line */
}

试试看：

#list {
  display: grid;
  grid-template: 1fr 1fr / repeat(3, 1fr) auto;
}

.services {
  display: contents;
}

.side {
  grid-row: 1 / -1;
  grid-column: -2;
}


/* Demo only */

#list {
  gap: 1em;
}

.services div, .side {
  outline: 2px solid black;
}

.services a {
  display: block;
  border-radius: 10px;
  margin: 40px 20px;
  box-sizing: content-box;
  background-color: #f5f5f5;
  padding: 30px;
  text-align: center;
  color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
}

<div id="list">
  <div class="services">
    <div><a href="">1</a></div>
    <div><a href="">2</a></div>
    <div><a href="">3</a></div>
    <div><a href="">4</a></div>
    <div><a href="">5</a></div>
    <div><a href="">6</a></div>
  </div>
  <div class="side">
    <aside>
      <figure>
        <figcaption>VIDEO</figcaption>
        <div class="video">
          <video controls>
              <source width="20px" height="20px">
            </video>
        </div>
        <figcaption>VIDEO BOTTOM TEXT</figcaption>
      </figure>
    </aside>
  </div>
</div>

参考资料：

• grid-template

• display: contents

• grid-row

  和

  grid-column