FCC---CSS Flexbox: Add Flex Superpowers to the Tweet Embed
To the right is the tweet embed that will be used as the practical example.
Some of the elements would look better with a different layout.
The last challenge demonstrated display: flex
.
Here you'll add it to several components in the tweet embed to start adjusting their positioning.
Add the CSS property display: flex
to all of the following items - note that the selectors are already set up in the CSS:
header
, the header's .profile-name
, the header's .follow-btn
, the header's h3
and h4
, the footer
, and the footer's .stats
.
<style>
body {
font-family: Arial, sans-serif;
}
header {
display: flex;
}
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;
}
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: Add Flex Superpowers to the Tweet Embed的更多相关文章
- CSS Flexbox 学习指南、工具与框架
Flexbox 是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐.虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它. 在本文中,我们整合了一些最佳的 F ...
- css flexbox 弹性布局
flexbox 即css flexible box layout. ie9及以下不支持flexbox. flex详细规范(https://www.w3.org/TR/css-flexbox/) 为什么 ...
- CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
- CSS3 flexbox 布局 ---- flex项目属性介绍
现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设display:flex 变成flex 容器,默认主轴的方向为水平 ...
- 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. Similar ...
- 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 usi ...
- Flex布局(CSS Flexbox)
参考:Flex 布局语法教程 Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 注意:设为Fle ...
- CSS3 flexbox 布局 ---- flex 容器属性介绍
flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...
- CSS#Flex-box, border-size, onresize() event, Media Queries
Flexbox Pseudo-classes box-sizing: border-box HTML DOM event resize() @media Queries: 根据一些css条件,触发一 ...
随机推荐
- java基础文件,File类
此文参考自"Java SE程序设计" 编著: 青岛东合信息技术有限公司 算是做笔记,以后想看可以翻阅,顺便分享出来大家可以参照.如有侵权,请联系本人删除 文件 文件是相关记录或放在 ...
- docker tomcat镜像部署springbootwar包
springboot打war包 1.在pom文件中增加插件 <build> <finalName>xx</finalName> <plugins> &l ...
- ios 测试网络是否连接
转自:http://blog.csdn.net/lwq421336220/article/details/16982857 - (BOOL) connectedToNetwork { //创建零地址, ...
- python scapy的使用总结
基本命令 ls() List all available protocols and protocol options lsc() List all available scapy command f ...
- CoderForces 163E e-Government(AC自动机+树状数组维护fail树的dfs序)
E. e-Government time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
- AtCoder-3856
An adult game master and N children are playing a game on an ice rink. The game consists of K rounds ...
- JPEG文件编/解码详解
JPEG文件编/解码详解(1) JPEG(Joint Photographic Experts Group)是联合图像专家小组的英文缩写.它由国际电话与电报咨询委员会CCITT(The Interna ...
- 第三方OAuth授权登录,QQ、微信(WeChat)、微博、GitHub、码云(Gitee)、淘宝(天猫)、微软(Microsoft )、钉钉、谷歌(Google)、支付宝(AliPay)、StackOverflow
Netnr.Login 第三方OAuth授权登录 支持第三方登录 三方 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 安装 ( ...
- 【HttpClient】使用学习
HttpClient使用学习 HttpClient Tutorial:http://hc.apache.org/httpcomponents-client-4.5.x/tutorial/html/in ...
- springboot 集成jsp
建立好springboot项目,确定能成功运行 在application.properties文件中添加 server.context-path=/bootserver.port=8080spring ...