FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed
程序员文章站
2022-04-14 20:01:46
The tweet embed header and footer used the flex-direction property earlier with a row value. Similarly, the items inside the .profile-name element wou ......
the tweet embed header
and footer
used the flex-direction
property earlier with a row value.
similarly, the items inside the .profile-name
element would work well stacked as a column.
add the css property flex-direction
to the header's .profile-name
element and set the value to column.
<style> body { font-family: arial, sans-serif; } header, footer { display: flex; flex-direction: row; } header .profile-thumbnail { width: 50px; height: 50px; border-radius: 4px; } header .profile-name { display: flex; flex-direction: column; 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 .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>
上一篇: JS简单数据类型
推荐阅读
-
FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed
-
FCC---CSS Flexbox: Use the flex-direction Property to Make a Column
-
FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed
-
FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed
-
FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed
-
FCC---CSS Flexbox: Use the flex-direction Property to Make a Column