Question

我有以下HTML代码：

body{
    background-color: #ddd;
}
.container{
    /*width: 100%;
    height: 1100;
    background-color: #666;*/
    display: -webkit-flex;
    display: flex;
    /*flex-direction:column;
    flex-wrap: column nowrap;
    flex-flow:column wrap;*/
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.news{
    width: 453px;
    height: 168px;
    background-color: #fff;
    border: 1px solid #999;
    padding: 15px;
    margin-bottom: 10px;
}
.video{
    width: 288px;
    height: 168px;
    background-color: #fff;
    border: 1px solid #999;
    padding: 15px;
    margin-bottom: 10px;
}
#news1{
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 10px;
}
#news2{
    margin-left: 5px;
    margin-right: 10px;
    margin-top: 10px;
}
#video1{
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 10px;
}
#video2{
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
}
#video3{
    margin-left: 5px;
    margin-right: 10px;
    margin-top: 10px;
}
.test,header {
    background-color: red;
    background-repeat: no-repeat;
    color: #fff;
    background-color: #fff;
    width: 968px;
    height: 68px;
    border: 1px solid #999;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

<html>
<head>
  <title>Brand</title>
  <link rel="stylesheet" type="text/css" href="css/flex_styles.css">
</head>
<body>
  <div class="container" id="maincontain">
      <header>
          <h1>Brand</h1>
          <img src="img/logo.png" alt="Brand-logo">

          <!--<nav>
              <ul>
                  <li><a class="navlinks" href="https://facebook.com">Facebook</a></li>
              <li><a class="navlinks" href="https://twitter.com">Twitter</a></li>
              <li><a class="navlinks" href="https://instagram.com">Instagram</a></li>


              </ul>
          </nav>-->
      </header>

      <!-- News -->
      <section class="newz" id="newsid">

          <article class="news" id="news1">
              <!--<img class="newspics" src="img/news1.png">
              <p class="newstext">This is some random text.</p>
              <a class="newslinks" href="htpps://facebook.com">Link to     facebook article.</a>
          -->
          </article>

          <article class="news" id="news2">
              <!--<img class="newspics" src="img/news2.png">
              <p class="newstext">This is some random text.</p>
              <a class="newslinks" href="htpps://facebook.com">Link to     facebook article.</a>
              -->
          </article> 
      </section>

      <!-- Videos -->
      <section class="videos" id="videosid">

          <video class="video" id="video1">
              <source src="tst.mp4" type="video/mp4">
          </video>    

          <video class="video" id="video2">
              <source src="tst.mp4" type="video/mp4">
          </video>    

          <video class="video" id="video3">
              <source src="tst.mp4" type="video/mp4">
          </video> 
      </section>

      <!-- Footer -->
      <footer class="footer" id="footerid">
          <div class="test">
              <a class="footlinks" href="https://www.facebook.com">facebook</a>
          <a class="footlinks" href="https://www.facebook.com">facebook</a>
          <a class="footlinks"href="https://www.facebook.com">facebook</a>
          </div>
      </footer>
  </div>
</body>
</html>

所以我的问题：

为什么我的新闻栏不在同一高度，或为什么我的视频在同一高度，以及如何解决？

Answer 1

原因是您用于新闻的标签是文章，其内置样式为self.socialsource.text = projdict[0]['PRJSocsrc:'] self.socialsource.cursor = (0, 0)。

不用担心弯曲它。尝试在新闻中使用display: block。

小提琴：check this

Answer 2

包含两篇新闻文章的部分不是flexbox。

将以下代码添加到CSS中，它应该可以正常运行。

.newz {
  display: flex;
}

另外，我不是专业人士，但我建议你重新考虑如何命名你的课程。我看到代码并看到两个类.news和.newz时有点困惑。当我开始命名我的类时，我倾向于使用与页面上的定位相关的名称。因此，例如，我会按照.row-2的方式创建该类。同样，这完全是主观的。

希望这对你有帮助吗？如果我需要解释任何问题，请告诉我，我很乐意继续。

CSS Flex Box无法正确对齐

2 个答案: