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框不會正確對齊

回答

相關問題