在讲Flex布局之前,先告诉大家几种常用的布局。
在PC端常用的布局有三种布局:流式布局,浮动布局,以及层布局。
但在移动端最常见的布局就是flex布局。
那么什么是flex布局呢?
flex布局就是css中提出的一种布局方案。
flex布局中有几个概念:
(1)容器:如果给一个盒子添加了一个display:flex; 那么这个盒子就是一个容器。
<!-- 容器 -->
<div class="box">
</div>
(2)项目:容器中的直接子元素就是项目 项目默认都是在主轴上进行排列的
<div class="box">
<!-- 项目1 -->
<div class="son1"></div>
</div>
(3)主轴:默认情况下,项目是按照水平方向从左到右进行排列,这个排列方向就是主轴的方式
(4)交叉轴:和主轴垂直的那个轴就是交叉轴
了解完这几个概念之后,我们就要来学习一下这些概念的属性。
容器:
对于容器来叔,它有6个属性,下面是对六个属性的说明:
flex-direction: direction本意是方向的意思 作用:用来设置主轴的方向
row:默认值 水平面右 默认情况下,如果你不设置主轴的方向,那么默认就是水平向右的
row-reverse reverse本意是反转的意思 水平向左
column column本意是列的意思 让主轴垂直向下
column-reverse 让主轴垂直向上
注意:项目是从主轴的起点开始排列。
flex-wrap:
如果说容器的宽度比较小,项目的总宽度大于容器的宽度,此时项目在容器中会进行压缩,默认是不换行的。
如果想你让它换行,通过flex-wrap属性来设置。
nowrap:不换行 默认值
wrap : 换行
flex-flow:不是一个新的属性,是上面两个属性的复合属性
flex-flow是flex-direction属性和flex-wrap属性的简写形式
如:row nowrap 表示:主轴的水平向右的 不换行
justify-content:用来处理主轴上的富余空间的
flex-start:表示项目在主轴的开始点排列,富余空间在主轴的结束位置
flex-end:表示项目在主轴的结束点排列,富余空间在主轴的开始位置
center: 表示项目在主轴的中间位置,富余空间在主轴的两侧
space-between: 表示富余空间在项目和项目之间
space-around:around表示环绕的意思 表示富余空间环绕项目
注意:什么时候使用justify-content,只有有富余空间时才会使用
align-items: 理解1:项目在交叉轴上的摆放位置 理解2:处理项目在交叉轴的富余空间
flex-start:项目在交叉轴的起来开始排列,富余空间在后面
flex-end::项目在交叉轴的起来结束位置排列,富余空间在前面
center: 项目在交叉轴的起来中间位置排列,富余空间在两侧
align-content: 多行项目,形成多根主轴,此属性是用来设置多根主轴的位置关系
使用前提:多行项目 flex-start: 两根主轴都从开始位置开始排列
flex-end : 两根主轴都从结束位置开始排列
center:两根主轴从中间位置开始排列
接下来介绍一些项目的相关属性:
order:设置单个项目在主轴的排列顺序 order的默认值是0
如果数字越小,越靠近主轴的起始点
flex-grow: grow表示生长因子 属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
如果说有富余空间,你想让哪个项目生长。就可以设置flex-grow。
把富余空间分成了三份,每个项目占一份
.son1{ flex-grow:1; }
.son2{ flex-grow:1; }
.son3{ flex-grow:1; }
把富余空间分成了6分,第一个占1份,第二个占2份,第三个占3份
.son1{ flex-grow:1; }
.son2{ flex-grow:2; }
.son3{ flex-grow:3; }
flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
flex:flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}