准备工作
在开始学习flexbox之前,你需要以下基础知识:
- HTML基础
- CSS基础,并且知道CSS是如何工作的
为什么要学习使用flexbox(弹性盒子)?
在相当一段长的时间里,唯一具有浏览器兼容性的页面布局方法就是float(浮动) 和 position(绝对定位与相对定位) ,即便他们可以比较好的处理也页面布局,但在一些情况使用他们是十分困难的,如:
- 将一个元素相对于它的父元素垂直居中
- 将一个容器(container)中的所有子项(children)在容器当中具有相同的宽(width)和高(height),无论容器(container)有多少宽高可用
- 使多列排列的元素的所有列具有相同的高度,即便他们具有具有不同的内容
哪些情况下我们使用flexbox?
一项新技术最大的问题是它的兼容性,下面的flexbox的兼容性列表,可以看到较新的浏览器都对flexbox提供了兼容。
因此,如果你的客户大都使用现代的浏览器,那么flexbox就一定适合你
注:即便现代浏览器都对flexbox提供了兼容,但某些语法在不同浏览器之间的兼容性还不如意,因此我们需要带前缀的flexbox语法来解决这些问题。
对元素使用flexbox进行布局的一个简单的例子
代码与原始页面如下
<title>flexbox</title>
<style >
body{
/* body默认有margin设置为0 */
margin: 0;
}
header{
background:#eee;
height: 100px;
}
h1{
/* h1默认有margin,这里我们设置成0 */
margin: 0 auto;
text-align: center;
line-height: 100px;
}
article{
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<header>
<h1>
学习flexbox页面布局
</h1>
</header>
<section>
<article>
有一个小山村,很久很久都没有下雨了,老百姓吃完了粮食,吃草根,吃完了草根,吃树皮,到最后没有任何东西能填饱肚子,无数身边的人离开了,老人死去了,弱小的孩子死去了,村里的年青人不知如何是好。
</article>
<article>
做人,无需去羡慕别人,也无需去花时间去羡慕别人是如何成功的,想的只要是自己如何能战胜自己,如何变得比昨天的自己强大就行。自己的磨练和坚持,加上自己的智慧和勤劳,会成功的。终将变成石佛那样受到大家的尊敬。
</article>
<article>
生活星期天早上和朋友一起聊天,朋友说了一个他们听过的故事:“一尊佛像前有一条铺着石板的路,人们每天都踏着这一阶一阶的石板去膜拜佛像。石阶看着人们踏着自己去膜拜佛像,心里很不舒服。石阶心里想,自己和佛本来就来自同一块石头,为什么自己要成为踏脚石,让人们踩着自去去膜拜它呢!它对佛抱怨说这样太不公平!佛像说:这没有什么不公平,你们成为台阶只需挨了四刀,而我是挨了千刀万剐才成了人们膜拜的佛像
</article>
</section>
将该页面中的三个<article>元素按列排序
使用float完成
如果使用float来进行处理,需要对每个<article>的float属性,与width属性进行设置,现在我们将article标签的CSS样式添加两条语句
article{
margin: 10px;
background-color: lightblue;
/*添加的语句,设置宽度和浮动*/
width:30%;
float:left;
}
页面变为下图所示
使用flexbox完成
使用flexbox,想让<article>元素按列排序,只需要在<article>元素的父元素<section>的样式中添加一条语句即可:
section{
display: flex;
}
页面效果如下
注:这里元素的排法是由flex-direction元素决定的,该元素默认值为 row,也就是排成一行。
这个简单的例子照应了开头我们所讲的内容
float和position做到“使多列排列的元素的所有列具有相同的高度,即便他们具有具有不同的内容”是困难的,而使用flexbox则可以很轻易的完成这项工作