CSS Flex Box が正しく整列しない

debugcn 投稿 Dev

ログイン

私は次の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>

だから私の質問:

ニュースボックスの高さが同じでないのはなぜですか。また、ビデオの高さが同じであるのはなぜですか。また、それを修正する方法を教えてください。

ザック・ハリオット

2 つのニュース記事を含むセクションはフレックスボックスではありません。

次のコードを CSS に追加すると、完全に機能するはずです。

.newz {
  display: flex;
}

また、私はプロではありませんが、クラスの命名方法を再考することをお勧めします。コードを見て、2 つのクラス.newsと.newz. クラスに名前を付けるときは、ページ上の位置に関連する名前を使用する傾向があります。したがって、たとえば、そのクラスを.row-2. 繰り返しますが、これは完全に主観的なものです。

これがあなたを少しでも助けてくれることを願っていますか？何か説明が必要な場合はお知らせください。喜んで続けさせていただきます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]