flex布局
3.主轴的排列方向
(1)行模式和列模式
行模式就是子元素(项目)在容器中以行(x轴)方向排列的模式
列模式就是子元素(项目)在容器中以列(y轴)方向排列的模式
(2)主轴和交叉轴
主轴和交叉轴
当使用flex
的时候,首先想到的应该是两个轴,主轴和交叉轴flex-direction
定义,另一条垂直于它的轴就叫做交叉轴
主轴由
4.主轴排序
主轴方向可以取四个值,注意四个值都是要在容器中写的
flex-direction: row; /* 默认行模式: 左(开始)-右(结束) */
flex-direction: row-reverse; /* 行模式: 右(结束)-左(开始) */
flex-direction: column; /* 列模式: 上(开始)-下(结束) */
flex-direction: column-reverse;/* 列模式: 下(结束)-上(开始) */
5.换行模式
flex-wrap
属性来控制flex子项(项目)单行显示换行还是不换行,默认情况不换行。即使容器无法承载所有项目,他们会按照等比例压缩,强制在主轴方向显示。
/* 默认不换行 */
flex-wrap: nowrap;
/* 换行 */
flex-wrap: wrap;
6.简写属性
flex-flow
是将主轴排序和是否换行两个属性组合写在一起,第一个值主轴排序,第二个值是和否换行。
/* 简写 */
flex-flow: row nowrap;
小实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.center{
width: 1000px;
margin: 0 auto;
background-color: #f5f5f5;
display: flex;
}
.item{
width: 250px;
padding: 50px 0;
text-align: center;/* 让内联元素居中 */
}
</style>
</head>
<body>
<div class="center">
<div class="item">
<img src="./img/flexbase/icon1.png" alt="">
<p>品质保障</p>
</div>
<div class="item">
<img src="./img/flexbase/icon2.png" alt="">
<p>私人定制</p>
</div>
<div class="item">
<img src="./img/flexbase/icon3.png" alt="">
<p>学员特供</p>
</div>
<div class="item">
<img src="./img/flexbase/icon4.png" alt="">
<p>专属特权</p>
</div>
</div>
</body>
</html>
效果图如下:
7.主轴上的对齐方式
justify-content
定义了项目在主轴方向上的对齐方式,需要注意的是,要区别行模式和列模式,当然主要可以以行模式为例。
/* 默认起点对齐 */
justify-content: flex-start;
/* 终点对齐 */
justify-content: flex-end;
/* 居中对齐 */
justify-content: center;
/* 两端对齐 */
justify-content: space-between;
/* 周围分布相同空间 */
justify-content: space-around;
/* 均匀分布空间 */
justify-content: space-evenly;
8.交叉轴对齐方式
align-items
指的是交叉轴的对齐方式。如果没有指定交叉轴对齐方式默认是normal
项目无高度,默认撑满容器高度。
/* 交叉轴起点(默认) */
align-items: flex-start;
/* 交叉轴终点 */
align-items: flex-end;
/* 交叉轴居中 */
align-items: center;
9.多轴线对齐
align-content
属性设置浏览器如何沿着弹性布局的横纵项,多轴线分布的空间方式。
/* 多轴线情况下,交叉轴起点 */
align-content: flex-start;
/* 多轴线情况下,交叉轴终点 */
align-content: flex-end;
/* 多轴线,居中 */
align-content: center;
/* 多轴线,两端对齐 */
align-content: space-between;
/* 多轴线,行间距相等 */
align-content: space-around;
/* 多轴线,均分间距 */
align-content: space-evenly;
10.项目属性
(1)项目的排序顺序
order
项目在布局时的顺序,数值越小,排列越靠前。默认值为0,可以为负数,数值没有任何单位。
order: -1;
(2)项目的增长规则*
flex-grow
规定了项目在flex容器中分配剩余空间的比例。负值无效,默认值0,数值不需要单位。
flex-grow
给某项目,前提容器中主轴方向是有剩余空间的- 项目本身是有自己的尺寸的,不放大时使用的是自己的长度尺寸。如:宽度,设置了增长规则之后,原本尺寸失效了,使用增长规则的系数
- 剩余空间的比重分配,是所有项目的
flex-grow
系数相加,之后再按照比例分配
flex-grow:1;
/*分配空间*/
.box .item:nth-child(2){
flex-grow: 1;/* 1/7空间 */
}
.box .item:nth-child(3){
flex-grow: 6;/* 拿到了6/7的空间 */
}
(3)项目的收缩规则
flex-shrink
指定了flex项目的收缩规则,默认值1,不允许负值,没有任何单位
- 收缩前提:容器中无剩余空间,项目才会被压缩
- 设置了收缩比例之后,原尺寸会在压缩时失效,而使用收缩系数
- 收缩数值越大,压缩比列就越大
- 压缩空间的分配权重,缩小的尺寸是所有项目缩小系数之和,再按比例分配
- 强制不缩小:
flex-shrink: 0;
flex-shrink: 1;/* 默认 */
flex-shrink: 2;/* 缩小系数 */
flex-shrink: 0;/* 坚决不缩小 */
(4)项目的初始化尺寸
flex-basis
指定了flex项目元素在主轴方向上的初始化大小(尺寸)。不允许负值,默认auto
。如果指定了该属性,则原本尺寸将失效
(5)项目的flex简写*
flex
属性指的是,增长规则,缩小规则,初始化尺寸的集合写法。
- 默认
flex:0 1 auto
flex:1
指增长规则的系数flex:0 0 200px
指项目在容器中不放大,也不缩小,初始化尺寸200px