flexbox 컨테이너에서 작동하도록 align-self를 얻을 수 없습니다.

내 코드는 다음과 같습니다.flexbox 컨테이너에서 작동하도록 align-self를 얻을 수 없습니다.

/* 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를 사용하는 것이 더 낫습니다.

클래스 .my 정보에서 볼 수있는 div가 있으며 flex 컨테이너의 맨 아래에 맞춰 주려고합니다.하지만 작동하지 않는 것 같습니다.

출처

2016-10-25 Saad Al-Sabbagh

div와 센터 요소에 display: flex을 추가해야 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"의 직접 자식을 만들지 않습니까? 그렇다면 #container에있는 동안 .about-me의 디스플레이 유형을 flex로 변경해야하는 이유는 무엇입니까? –

여기서는 볼 수 있듯이 직접 자식 요소 만 부모 요소 나 플렉스 컨테이너 요소의 플렉스 자식이 될 것이라고 생각하지 않습니다. 예를 들어'child' 요소는 여전히 기본값으로'block'입니다. https://jsfiddle.net/Lg0wyt9u/1280/ –

오! 좋은 정보이므로 각 컨테이너는 다른 플렉스 박스로 취급되어야합니다. 말이된다. 도와 주셔서 감사합니다! –

flexbox 컨테이너에서 작동하도록 align-self를 얻을 수 없습니다.

답변

관련 문제