写在前面:本文转自阮一峰的博客。感觉写的非常清晰,就转了。感谢前辈。
转载的地址为:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
作者:阮一峰。
你会看到,不管是什么布局,Flex往往都可以几行命令搞定。
我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。
**的一面,最多可以放置9个点。
下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。
如果不加说明,本节的HTML模板一律如下。
<div class="box">
<span class="item"></span>
</div>
上面代码中,div元素(代表**的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。
首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。
.box {display: flex;}
设置项目的对齐方式,就能实现居中对齐和右对齐。
.box {display: flex;justify-content: center;}
.box {display: flex;justify-content: flex-end;}
设置交叉轴对齐方式,可以垂直移动主轴。
.box {display: flex;align-items: center;}
.box {display: flex;justify-content: center;align-items: center;}
.box {
display: flex;
justify-content: center;
align-items: flex-end;
}
justify-content: flex-end;
justify-content: space-between;
flex-direction: column;
align-items: center;
.item:nth-child(2){
align-self: center;
align-self: flex-end;
.item:nth-child(3){
flex-wrap: wrap;
align-content: space-between;
HTML代码如下。
<div class="column">
CSS代码如下。
.column {
flex-basis:100%;
<div class="row">
.row{
display:flex;
.row:nth-child(2){
.row:nth-child(3){
最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的**布局很像,但是需要设置项目的自动缩放。
<div class="Grid">
<div class="Grid-cell">...</div>
.Grid{
.Grid-cell {
flex:1;
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
<div class="Grid-cell u-1of4">...</div>
<div class="Grid-cell u-1of3">...</div>
.Grid{ display: flex;}.Grid-cell { flex:1;}.Grid-cell.u-full { flex:00100%;}.Grid-cell.u-1of2{ flex:0050%;}.Grid-cell.u-1of3{ flex:0033.3333%;}.Grid-cell.u-1of4{ flex:0025%;}
.Grid-cell.u-full {
flex:00100%;
.Grid-cell.u-1of2{
flex:0050%;
.Grid-cell.u-1of3{
flex:0033.3333%;
.Grid-cell.u-1of4{
flex:0025%;
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
<footer>...</footer>
</body>
.HolyGrail{
min-height:100vh;
header,
footer {
.HolyGrail-body {
.HolyGrail-content {
.HolyGrail-nav,.HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex:0012em;
.HolyGrail-nav {
/* 导航放到最左边 */
order:-1;
如果是小屏幕,躯干的三栏自动变为垂直叠加。
@media(max-width:768px){
.HolyGrail-nav,
.HolyGrail-ads,
flex:auto;
我们常常需要在输入框的前方添加提示,后方添加按钮。
<div class="InputAddOn">
<span class="InputAddOn-item">...</span>
<input class="InputAddOn-field">
<button class="InputAddOn-item">...</button>
.InputAddOn{
.InputAddOn-field {
有时,主栏的左侧或右侧,需要添加一个图片栏。
<div class="Media">
<img class="Media-figure" src='/images/loading.gif' data-original="" >
<p class="Media-body">...</p>
.Media{
align-items: flex-start;
.Media-figure {
margin-right:1em;
.Media-body {
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。
<body class="Site">
<main class="Site-content">...</main>
.Site{
.Site-content {
每行的项目数固定,会自动分行。
CSS的写法。
.parent {
width:200px;
height:150px;
background-color: black;
flex-flow: row wrap;
align-content: flex-start;
.child {
box-sizing: border-box;
background-color: white;
height:50px;
border:1px solid red;
原标题:Flex 布局教程:实例篇
关键词: