FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed _property

少年辛苦终身事，莫向光阴惰寸功。这篇文章主要讲述FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed相关的知识，希望能为你提供帮助。
The header and footer in the tweet embed example have child items that could be arranged as rows using the flex-direction property.
This tells CSS to align the children horizontally.

Add the CSS property flex-direction to both the header and footer and set the value to row.

< style> body { font-family: Arial, sans-serif; } header { display: flex; flex-direction: row; } header .profile-thumbnail { width: 50px; height: 50px; border-radius: 4px; } header .profile-name { display: flex; margin-left: 10px; } header .follow-btn { display: flex; margin: 0 0 0 auto; } header .follow-btn button { border: 0; border-radius: 3px; padding: 5px; } header h3, header h4 { display: flex; margin: 0; } #inner p { margin-bottom: 10px; font-size: 20px; } #inner hr { margin: 20px 0; border-style: solid; opacity: 0.1; } footer { display: flex; flex-direction: row; } footer .stats { display: flex; font-size: 15px; } footer .stats strong { font-size: 18px; } footer .stats .likes { margin-left: 10px; } footer .cta { margin-left: auto; } footer .cta button { border: 0; background: transparent; } < /style> < header> < img src="http://img.readke.com/220505/0915136111-0.jpg" alt="Quincy Larson\'s profile picture" class="profile-thumbnail"> < div class="profile-name"> < h3> Quincy Larson< /h3> < h4> @ossia< /h4> < /div> < div class="follow-btn"> < button> Follow< /button> < /div> < /header> < div id="inner"> < p> I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.< /p> < span class="date"> 1:32 PM - 12 Jan 2018< /span> < hr> < /div> < footer> < div class="stats"> < div class="Retweets"> < strong> 107< /strong> Retweets < /div> < div class="likes"> < strong> 431< /strong> Likes < /div> < /div> < div class="cta"> < button class="share-btn"> Share< /button> < button class="retweet-btn"> Retweet< /button> < button class="like-btn"> Like< /button> < /div> < /footer>