Flex布局
一.什么是flex布局
- flex布局是w3c提出的一种新的布局方法,主要为了解决传统布局的不方便
的缺点,eg:垂直居中在传统布局中就不容易实现。 - flex是flexible box 的缩写形式,意为“弹性布局”,用来为盒状模型提供最大的灵活性。
- 注意:如果是 webkit内核的浏览器,必须加上-webkit 前缀。eg:
<style>
.box{
display:-webkit-flex;
}
</style>
<div class="box">
这是为了解决webkit内核的浏览器的兼容性问题
</div>
二 . flex容器的概况
image- 如上图所示,在容器中有两个默认的轴,分别为:main axis(横轴)和cross axis(纵轴,也称交叉轴),横轴与边框的交叉点分别称为main start和main end,同理纵轴与边框的交点成为 cross start 和 cross end。
三 . 容器的属性
-重点介绍:flex-direction , flex-wrap , flex-flow , justify-content , align-items , align-content 六种属性。
-
flex-direction:该属性决定项目的排列方向,有4个值:
row:默认,从左到右
row-reverse:从右到左
column:从上到下
column-reverse:从下到上
image -
flex-wrap : 该属性定义项目在排不下的情况下是否换行,有3个值:
nowrap:默认,不换行
image
wrap:换行,第一行在上方
image
wrap-reverse:换行,第一行在下方
image - flex-flow:该属性是flex-direction和flex-wrap的简写形式,默认值为
row nowrap。
4 . justify-content : 该属性定义了水平方向上的对齐方式。有5个值:
flex-start:向左对齐
flex-end : 向右对齐
center : 水平居中
space-between:左右对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔都相等,所以项目之间的间隔比项目与边框之间的间隔大一倍。
image
5 . align-items:该属性定义了垂直方向的对齐方式 。 有5个值:
flex-start:向上对齐
flex-end:向下对齐
center: 垂直居中
baseline: 以项目的第一行的文字的基线对齐。
stretch:默认值,如果项目未设置高度或设为auto,将占满整个容器的高度。
image
6 . align-content:该属性定义了多行的对齐方式。注:如果项目只有一行的话,则该属性不起作用。有6个值:
前五个与justify-content的五个值完全相同,在这不再重复讲解
还有一个默认属性stretch:占满整个容器。
image
四 . 项目的属性
以下6个属性设置在项目上:
1.order:该属性用于定义项目的排列顺序。数值越小,排列越靠前,默认为0 。
image
2.flex-grow:该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果所有项目的flex-grow属性都为1,则他们将等分剩余空间,如果其中一个项目的flex-grow为2的话,则空间分配为1:2:1。
image
3.flex-shrink:该属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果为0,则不缩小。
image
4.flex-basis:该属性定义了项目所占的主轴空间,即相当于width和height属性一样。
5.flex:该属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto ,该属性还有两个便携值:auto(1 1 auto),none(0 0 auto)
6.align-self:该属性允许单个项目与其它项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,即继承父元素的align-items属性,如果没有父元素, 则等同于stretch。
可取6个值,除了auto其余和align-items一样,在此不再说明。
(完)
网友评论