FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed
Posted jane_panyiyun
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.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>
以上是关于FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed的主要内容,如果未能解决你的问题,请参考以下文章
FlexBox游乐园 flexbox.tech - 帮你熟悉FlexBox
FlexBox游乐园 flexbox.tech - 帮你熟悉FlexBox
父 flexbox 容器忽略孩子的 flexbox 最小宽度