CSS Flex改變文本元素的順序定位

在一個簡單的例子

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
</head> 

<body> 
    <header> 
    <h1>My Site Name</h1> 
    <br> 
    <p>Welcome to the website</p> 
    </header> 
    <h1>Hello Plunker!</h1> 
</body> 

</html> 

header { 
    display: flex; 
    width: 100%; 
    height: 100px; 
    background-color: green; 

} 

h1, p { 
    display: inline; 
    text-align: justify; 
    color: white; 
}

如果我註釋掉撓我得到的文本的預期顯示順序

My Site Name 
Welcome to the website

然而，隨着柔性使我得到

      Welcome to the website 
My Site Name

plnkr flex

編輯基於以下這顯示問題的答案是一個解決方案

header h1, p { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    height: 40px; 
    background-color: green; 
    justify-content: center; 
    color: white; 
    padding: 0; 
    margin: 0; 
}

來源

2015-06-27 sayth