锐客网

  1. 首页 > 睿知 > it技术 > >

FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed

IT知识propertyDirection

采得百花成蜜后，为谁辛苦为谁甜。这篇文章主要讲述FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed相关的知识，希望能为你提供帮助。
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.
【FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed】 
 
 
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="http://img.readke.com/220505/0915004J5-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>

 
 
 
FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed

文章图片

 
 
 

    推荐阅读


    上一篇：高德APP全链路源码依赖分析工程

    下一篇：FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed