最近有点小偷懒,已经好久没有写博客啦!为了消除我的惰性,今天就算天塌下来我也要。。。。。写博客!!!
由于最近刚把flex从头到尾复习一遍,所以今天就来谈一谈flex弹性布局好了。相信道友们在面试的时候,肯定已经被垂直水平居中这个千古大题所折磨,虽然纯css可以解决垂直水平居中的问题,但是和flex一比较就显得有点复杂了,所以在写样式时,我们要多用flex弹性布局。
flex布局可以简便、完整、响应式地实现各种页面布局,任何一个容器都可以指定为flex布局,但是要注意的是:设为flex布局以后,子元素的float、clear 和 vertical-align属性会失效。
(一) 容器(父元素)的属性
flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content这六个属性设置在容器(父元素)上。
下面我就分别来分析这六个属性是怎么用的,这六个属性中常用的当然是水平垂直居中了,所以就先分析水平居中和垂直居中怎么实现。
1、justify-content属性 设置主轴对齐方式
它有5个值:
flex-start(默认值):左对齐
flex-end:右对齐
center:居中
![](/qrcode.jpg)
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目每侧的间隔相等,所以,项目之间的间隔比项目与边框的间隔大一倍
实践出真知,下面就上代码和运行结果来看一下效果吧~~~
(1)center 水平居中
代码:
//html代码
<div class="parent"> <div class="children"></div> </div>
//css代
.parent { width: 500px; height: 500px; border: 1px solid red; display: flex; justify-content: center; /*水平居中*/ } .children { width: 200px; height: 200px; border: 1px solid blue; }
运行效果:
从运行效果图片上可以看到已经水平居中啦!
(2)flex-start 左对齐
由于代码差不多,下面就不重复上代码了,但是运行效果还是要滴~~~
(3)flex-end 右对齐
(4)space-between 两端对齐
代码:
<div class="parent"> <div class="children"></div> <div class="children"></div> <div class="children"></div> </div>
.parent{ width: 500px; height: 200px; background: red; display: flex; justify-content: space-between; } .children{ width: 100px; height: 100px; background: blue; }
(5)space-around 每侧的间隔相等
代码同上,将space-between改成space-around即可
下面是运行效果:
至此,flex弹性布局的主轴对齐方式就讲完了!由于时间有限,flex的其他属性就下次再更新喽~