1
私のコードは以下の通りです。フレックスボックスコンテナで動作するようにアラインメント自己を得ることができません
/* Global */
* {
\t box-sizing: border-box;
\t font-family: 'Ubuntu', sans-serif;
}
/* Container */
#container {
\t width: 100vw;
\t height: 100vh;
\t display: flex;
\t flex-direction: column;
}
/* About Me */
.about-me {
\t width: 100vw;
\t height: 50vh;
\t background-color: #9b59b6;
}
.my-information {
\t text-align: center;
\t align-self: flex-end;
}
/* Blog Posts */
.blog-posts {
\t width: 100vw;
\t height: 50vh;
\t background-color: #3498db;
}
/* Media Query (Desktop And Bigger) */
@media (min-width: 1100px) {
\t /* Container */
\t #container {
\t \t flex-direction: row;
\t }
\t /* About Me */
\t .about-me {
\t \t height: 100vh;
\t }
\t /* Blog Posts */
\t .blog-posts {
\t \t height: 100vh;
\t }
}<!DOCTYPE html>
<html>
\t <head>
\t \t <!-- Meta -->
\t \t <meta charset="utf-8">
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <!-- Title -->
\t \t <title>Saad Al-Sabbagh</title>
\t \t <!-- CSS -->
\t \t <link rel="stylesheet" href="css/normalize.css">
\t \t <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
\t \t <link rel="stylesheet" href="css/main.css">
\t </head>
\t <body>
\t \t <!-- Container -->
\t \t <div id="container">
\t \t \t <div class="about-me">
\t \t \t \t <div class="my-information">
\t \t \t \t \t <h1>A person</h1>
\t \t \t \t \t <p>Front-End Web Developer, Blogger and an author on
\t \t \t \t \t \t <a href="#">SitePoint</a>.</p>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="blog-posts">
\t \t \t </div>
\t \t </div>
\t </body>
</html>私は完全なサイトレイアウトにフレキシボックスを使用してはならない、悪い話をたくさん聞いたが、私は、レイアウトを信じて、フレキシボックスを使用して簡単な2つの列のウェブサイトを作成しようとしていますこれはフレックスボックスを使用する方が良いでしょう。
私はあなたがクラス.my情報で見ることができるようにdivを持っています。私はそれをフレックスコンテナの.about-meの底に整列しようとしていますが、うまくいかないようです。
一つけれども、質問、ディスプレイを使用して：フレックス。 div要素では、その特定のdivの直接の子要素を作成しません、flexbox "Children"？その場合、＃containerが持っている限り、.about-meの表示タイプをflexに変更する必要があるのはなぜですか？ –
私はそうは思いませんが、直接的な子要素だけが親要素やフレックスコンテナ要素のフレックスチャイルドになります。ここでは、例えば 'child'要素はデフォルトで' block'です。https://jsfiddle.net/Lg0wyt9u/1280/ –
ああ！ニースの新しい情報なので、各コンテナは別のフレックスボックスとして扱う必要があります。意味をなさない助けてくれてありがとう！ –