布局中,我们经常使用float
+display
+ position
来对页面进行排版布局,但是,在float属性上面,非常的可惜,我们只有right
和left
,在想要做到水平、垂直居中的时候就变得非常尴尬。不仅布局繁琐,局限性,还不能再移动端很好的布局
所以就有了flex布局(弹性布局)。操作方便,布局极其简单,移动端使用比较广泛。
但pc端浏览器支持情况比较差,IE11或更低版本不支持flex或仅支持部分
flex盒模型基本概念
flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。
flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局

flex布局元素划分
外面的叫做,flex
容器
被flex
包裹的子级叫flex
项目
元素的排列依据两条轴:main axis
主轴、cross axis
交叉轴(侧轴)
start
是主轴和交叉轴的起始位置
end
是主轴和交叉轴的结束位置
根据 容器 以及 项目 ,我们分为 容器属性 和 项目属性
容器属性
<div class="flex-container">
<div class="box A">A</div>
<div class="box B">B</div>
<div class="box C">C</div>
<div class="box D">D</div>
<div class="box E">E</div>
</div>
.flex-container{
display: flex;
}

flex-direction 控制主轴的方向
flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有 : 行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向,水平向右。侧轴方向就是 y 轴方向,水平向下
- row:主轴为水平方向,起点为左端 (默认值)
- row-reverse:主轴为水平方向,起点为右端,从右至左
- column:主轴为垂直方向,起点为上端
- column-reverse:主轴为垂直方向,起点为下端
.flex-container{
display: flex;
flex-direction: row-reverse;
}

.flex-container{
display: flex;
flex-direction: column;
}

flex-wrap 决定项目是否换行
默认情况依据主轴一排显示,不换行
nowrap
:不换行(默认)
添加超出父级宽度的内容,内容是不会自动换行的
项目的width/height
根据内容真实占据的空间,宽高会被压缩,在父级空间允许的情况下,遵从width/height
设置
wrap
:换行,第二行在第一行的下面
当前父级宽度不够的情况下,子级内容会换行,子级宽高根据width/height
,默认贴着顶部对齐
wrap-reverse
:换行,第二行在第一行的上面
第二行在第一行的上面(排列从下至上),默认贴着底部对齐
.flex-container{
width: 500px;
height: 330px;
display: flex;
}
.box {
width: 60px;
height: 60px;
}

.flex-container{
display: flex;
flex-wrap:wrap;
}

flex-flow 复合属性
同时控制 主轴方向(flex-direction)和 是否换行(flex-wrap)
.flex-container{
flex-flow: column wrap;
}
不是必填项,可以只写flex-direction
/ 两个值之间以空格
进行间隔 / 主轴不管是 水平 还是 垂直 都会换行
justify-content 设置主轴上的子元素排列方式
flex-start
:子级都左对齐(默认值)
flex-end
:子级都右对齐
center
:子级居中对齐
space-around
:子级平均分配空间分配在元素的左右两边
space-between:先贴左右两边,子级再平均分配剩余空间在元素和元素之间
.flex-container{
flex-flow: row wrap;
justify-content : flex-end;
}

.flex-container{
flex-flow: row wrap;
justify-content : space-around;
}

/* space-between */
.flex-container{
flex-flow: row wrap;
justify-content : space-between;
}

align-items 设置侧轴上的子元素排列方式(单行 )
该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单项(单行)的时候使用
flex-start
:交叉轴上起点对齐
flex-end
:交叉轴上终点对齐
center
:交叉轴居中对齐
stretch
:拉伸,根据交叉轴撑满(默认)设置时注意,子级item的宽高不能固定,可以auto,或者不写
baseline
:基线对齐,根据交叉轴文字基线进行对齐
.flex-container{
flex-flow: row wrap;
align-items: flex-end;
}

.flex-container{
flex-flow: row wrap;
align-items: center;
}

.flex-container{
flex-flow: row wrap;
align-items: stretch;
}
.box {
width: 60px;
/* height: 60px; */
}

align-content 设置侧轴上的子元素的排列方式(多行)
如果只有一根主轴,则设置无效,一根主轴,根据flex-wrap:nowrap
来决定
flex-start
:交叉轴的起点对齐
flex-end
:交叉轴的终点位置
center
:交叉轴的居中位置
space-between
:子元素先分配在上下两边,再平均分配剩余空间
space-around
:平均分配在元素左右/上下
stretch
:占满,注意:这里会根据设定的align-items
.flex-container{
flex-flow: row wrap;
align-content: flex-start;
}

.flex-container{
flex-flow: row wrap;
align-content: space-between;
}

.flex-container{
flex-flow: row wrap;
align-content: space-around;
}

align-content 和align-items区别
align-items
适用于单行情况下, 只有上对齐、下对齐、居中和 拉伸
align-content
适应于换行(多行)的情况下(单行情况下无效), 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
就是单行找align-items
多行找 align-content
来个垂直居中
<div class="flex-container">
<div class="box">A</div>
</div>
.flex-container{
width: 500px;
height: 330px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 60px;
height: 60px;
background-color: #6dd9bf;
}

项目属性
<div class="flex-container">
<div class="box A">A</div>
<div class="box B">B</div>
<div class="box C">C</div>
<div class="box D">D</div>
<div class="box E">E</div>
</div>
.flex-container{
width: 500px;
height: 330px;
background-color: pink;
display: flex;
flex-wrap:wrap;
}
.box {
width: 60px;
height: 60px;
}
order 属性定义项目的排列顺序
数值越小,排列越靠前,默认为0,接受负值
.B{
order: -1;
}

flex-grow:定义项目放大比例,默认为0
如果有剩余空间的话,把剩余内容进行等分,然后按照flex-grow
的份数,进行分配
.A {
background-color: #6dd9bf;
flex-grow: 1;
}
.B {
background-color: #50a18e;
flex-grow: 1;
}
.C {
background-color: #f2d680;
flex-grow: 1;
}
.D {
background-color: #f29160;
flex-grow: 1;
}

上面的计算公式:
div的宽(500px) - 元素已经使用宽度(60px * 5) = 剩余空间 (200px)
flex-grow 一共分为 4 份,把剩余空间分为4份
1份 = 50px
放大数据: 60px * flex-grow
最终的宽度 = width + 放大数据
flex-shrink:定义元素缩放比例
默认为1
,如果空间不足,将缩小该项目
.item {
flex-shrink: <number>; /* default 1 */
}
flex-basis:项目占有固定空间
在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
flex
是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。
建议使用这个flex,因为浏览器会自动推算相关值
align-self:属性允许单个项目 和 其他项目有不一样的对齐方式
默认值为:auto
,可覆盖align-items
所有属性值与align-item
一致
.B {
align-self: center;
}
.D {
align-self: flex-end;
}

display:box 和 display:flex的差别
display:flex
;是css3新出的,盒模型语法,也是未来浏览器支持的趋势,大部分浏览器也开始实现
display:box
;是2009年时候的盒模型写法,兼容很差,使用的时候要加上前缀