CSS3 flexbox弹性布局实例

文章目录

我认为当flexbox支持所有的浏览器时,由于它比浮动布局更加的简单和强大性,它将彻底的改变我们的CSS布局方式。例如我们可以很容易的写出一个元素在未知比例下的居中对齐布局。当然css3新增的其它属性,例如grid也可以给前端开发带来更多的布局方式。

下面给出一些例子来证明为什么web开发者应该使用flexbox布局。

在前面的文章里面:flexbox基础教程flexbox完整版教程。我们给出了给出了关于flexbox的许多实际应用:

  1. 简单三栏布局(兼容版)
  2. 居中对齐
  3. 自适应导航
  4. 移动优先三栏布局

今天继续分享更多的弹性布局模型,在新的例子中,我们只使用最新的语法display:flex和flex-*相关语法,如果你需要考虑兼容性,可以查看简单版的例子。

多行布局的表单

<form>
<label for="name">Name:</label>
<input id="name" type="text" />
<label for="email">Email:</label>
<input id="email" type="email" />
…
</form>
form{
display: flex;
flex-flow: row wrap;

width: 408px;
}
label {
display: block;
width: 150px;
}
input, textarea {
width: 250px;
margin-bottom: 7px;
}

form

查看演示:form

图文自动排列

<div>
<div>
<img src="img/news.jpg">
<h2>Article title</h2>
<div>…</div>
</div>
<div>
<img src="img/logo.png">
<h2>Article title</h2>
<div>…</div>
</div>
…
</div>
.latest-items {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;

width: 650px;
}

.latest-item {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column;
flex-flow: column;

padding: 14px;
width: 255px;
}
.latest-item img {
/*margin: 0 auto;*/
-webkit-align-self: center;
align-self: center;
}

latest-items-alignment

查看演示:图文排列

垂直居中对齐

<body>
<div class="content">
<p>It is extremely difficult…</p>
</div>
</body>
body {
display: -webkit-flex;
display: flex;
flex-flow: column;

-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;

width: 100%;
height: 100%;
background: lightgrey;
}

.content {
/* also making content into a flex box so we can also vertically center its content */
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column;
flex-flow: column;

-webkit-justify-content: center;
justify-content: center;
text-align: center;

width: 250px;
height: 250px;
padding: 7px;

background: yellow;
}

vertical-centering

查看演示:垂直水平居中
参考文章:http://helephant.com/2013/03/29/css3-flexbox-examples/

原创文章:CSS3 flexbox弹性布局实例 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/flexbox-example.html)

发表评论

请登录后发表评论: