не может получить выравнивание для работы в контейнере flexbox

Мой код ниже.не может получить выравнивание для работы в контейнере flexbox

/* 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>

Я пытаюсь создать простой веб-сайт два столбца с помощью Flexbox, я слышал много плохих историй, где я не должен использовать Flexbox для полных макетов сайта, но я считаю, расположение так же просто, как это было бы лучше использовать flexbox.

У меня есть div, как вы можете видеть с помощью класса .my-information, и я пытаюсь выровнять его по низу контейнера flex, но он, похоже, не работает.

источник

2016-10-25 Saad Al-Sabbagh

Вы также должны добавить display: flex на о div и в элементы центра, вы можете использовать justify-content: center.

#container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.about-me { 
 
    width: 100vw; 
 
    height: 50vh; 
 
    display: flex;    /*Added*/ 
 
    justify-content: center;  /*Added*/ 
 
    background-color: #9b59b6; 
 
} 
 
.my-information { 
 
    text-align: center; 
 
    align-self: flex-end; 
 
} 
 
.blog-posts { 
 
    width: 100vw; 
 
    height: 50vh; 
 
    background-color: #3498db; 
 
}

<div id="container"> 
 
    <div class="about-me"> 
 
    <div class="my-information"> 
 
     <h1>A person</h1> 
 
     <p>Front-End Web Developer, Blogger and an author on 
 
     <a href="#">SitePoint</a>.</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="blog-posts"></div> 
 
</div>

источник

2016-10-25 21:02:11

Один вопрос, хотя, при использовании дисплея: сгибать; на элементе div не будет делать каких-либо прямых детей этого конкретного div, flexbox «Children»? Если это так, почему мне нужно изменить тип отображения .about-me в flex, если у него есть #container? –

Я так не думаю, что только прямые дочерние элементы становятся гибкими родителями или элементами гибкого контейнера, как вы можете видеть здесь, например, элементы 'child' по-прежнему являются' block' по умолчанию https://jsfiddle.net/Lg0wyt9u/1280/ –

О! Хорошая новая информация, поэтому каждый контейнер должен рассматриваться как другой flexbox. Имеет смысл. Спасибо за помощь! –

не может получить выравнивание для работы в контейнере flexbox

ответ

Смежные вопросы