フレックスボックスを使用して左から右に2つの要素を移動しようとしています

Question

左から右に、H3要素を右から左に移動しようとしています。

私は最近、teamtreehouse.com経由でフレックスボックスの学習を終えましたが、自分でそれをやっていると、私は固まってしまったようです。

私はフレックスとやり取りするように書かれているように見えますが、動作していないと思われるので、何か大きな問題があると推測しています！

#about { 
 
    margin-top: 50px; 
 
    margin-left: 30px; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-between; 
 
}

<div id="about"> 
 
    <section> 
 
    <img src="img/meprofile.jpg" alt="Photograph of" class="profile-photo"> 
 
    <h2 class="aboutme">About</h2> 
 
    <p>Hi,.</p> 
 
    <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/leehoward05">@leehoward05</a>.</p> 
 
    </section> 
 
</div>

Answer 1

あなたの意図フレックス親は、DOMツリーに高すぎます。フレックスの親は、子の1つ上のレベルでなければなりません。これを試してみてください：

#about > section { 
    margin-top: 50px; 
    margin-left: 30px; 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-between; 
} 

.aboutme { 
    order: 0; 
} 

.profile-photo { 
    order: 3; 
} 

https://jsfiddle.net/8kcf5snm/