CSS的Flex框不会正确对齐

我有以下的html代码：CSS的Flex框不会正确对齐

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>

所以我的问题：

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

来源

2017-03-18 Tastro

包含你的两个新闻文章的部分是不是Flexbox的。

将下面的代码添加到您的CSS，它应该完美地工作。

.newz { 
    display: flex; 
}

此外，我不是专业人士，但我会建议重新考虑如何命名你的类。我看到代码并看到两个类.news和.newz有点困惑。当我开始命名我的课程时，我倾向于使用与页面上的定位相关的名称。因此，例如，我会让这个班级沿着.row-2的路线行事。再一次，这完全是主观的。

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

来源

2017-03-18 12:01:28

原因是您用于新闻的标签是文章，并且内置了display: block的样式。

有没有关注flex。尝试在您的新闻中使用display: inline-block;。

小提琴：https://jsfiddle.net/497vm0go/

来源

2017-03-18 11:58:23 Bhawna

CSS的Flex框不会正确对齐

回答

相关问题