弹性布局是现在一种简单方便的布局方式,它是肯定节省大家许多花费在布局上的时间,现在在网上已经有不少大神都发报了关于弹性布局的看法及使用,许多方面都值得借鉴,本人现在写这文章除了想跟大家分享以外,还想借此让自己加深印象,毕竟快赶上鱼的记忆了,不容易啊,直接上图!
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
margin: auto;
border: 1px solid;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.box div{
width: 100px;
height: 100px;
background: orange;
border: 1px solid;
}
</style>
先生成一个大容器,然后里面放8个小div块。
接下来我们将大容器里面的方块横排,这需要用到display属性。
display: flex;
我们可以看下如下的样式,方块实现了横排,但是大家可能发现里面的方块大小发生了改变,因为8个div的宽度已经超过大容器的宽度了,而且display:flex属性默认是不换行的,这里我们就需要用到换行属性来改变它。
/*换行*/
flex-wrap: wrap;
/*不换行*/
/*flex-wrap: nowrap;*/
/*靠底部换行*/
/*flex-wrap: wrap-reverse;*/
如代码所示,默认不换行nowrap,换行wrap,以及靠底部换行wrap-reverse
对于容器的布局需要引入阮大神提到的一个知识点,容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
接下来我们就先延水平主轴方向来实现布局,要用到justify-content属性来实现对齐方式
/*两端对齐,项目之间的间隔都相等。*/
justify-content:space-between;
/*居中*/
/*justify-content: center;*/
/*每个项目两侧的间隔相等*/
/*justify-content: space-around;*/
/*左对齐*/
/*justify-content: flex-start;*/
/*右对齐*/
/*justify-content:flex-end ;*/
如下图就是水平方向两端对齐,项目之间的间隔都相等,其他图片就不一一展示了
接下来我们看下如何在交叉轴上如何对齐。
/*交叉轴的中点对齐。*/
align-items: center;
/*交叉轴的终点对齐。*/
/*align-items:flex-end;*/
/*交叉轴起点对齐*/
/*align-items: flex-start;*/
/*项目的第一行文字的基线对齐*/
/*align-items: baseline;*/
/*如果项目未设置高度或设为auto,将占满整个容器的高度*/
/*align-items: stretch;*/
如下图就是交叉轴中点对齐
然后在看下flex-direction属性,主要是改变主轴方向的属性。
/*水平向左方向*/
/*flex-direction: row;*/
/*水平向右方向*/
/*flex-direction: row-reverse;*/
/*垂直向下方向*/
/*flex-direction: column;*/
/*垂直向上方向*/
flex-direction: column-reverse;
下面就是改变主轴方向变成垂直向上方向的样子。
再看align-content属性是定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
/*与交叉轴起点对齐*/
/*align-content: flex-start;*/
/*与交叉轴终点对齐*/
/*align-content: flex-end;*/
/*与交叉轴中点对齐*/
/*align-content: center;*/
/*与交叉轴两端对齐*/
align-content: space-between;
/*每根轴线两侧的间隔都相等*/
/*align-content: space-around;*/
/*默认值轴线占满整个交叉轴*/
/*align-content: stretch;*/
下图就是与交叉轴两端对齐的的属性样式。
以上就是写了几个常用到的弹性布局属性,如果将这几个属性灵活的组合运用,那么在页面布局上就可以事半功倍。