一、flex弹性概念
弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
(一)主轴与交叉轴
主轴与交叉轴示意.png
二、属性详解
（一）容器属性详解
-
1、flex容器与flex子项
flex容器与子项.png
容器的属性与子项的属性不要互相乱设置。 -
2、
flex-direction属性: 改变轴方向,包含四个属性
flex-direction:row|row-reverse|column|column-reverse
row：默认属性 ,主轴为水平方向，从左到右 。
row-reverse：主轴水平从右到左。
column：主轴为垂直方向，从上到下。
column-reverse：主轴为垂直方向，从下到上。 -
3、
flex-wrap：换行与缩写属性
flex-wrap：nowrap|wrap|wrap-reverse
nowrap:默认，不进行换行处理
wrap: 根据父容器高度均分自动换行，从上自下,
wrap-reverse:自动换行，水平从左到右，从自下而上用得比较少。
该属性可以同flex-direction属性组合使用。灵活布局。 -
4、
flex-flow: 是 flex-direction 和 flex-wrap 属性的简写方式
语法如下：
flex-flow:<flex-direction>||<flex-wrap>
flex-direction:row（初始值） |row-reverse|column|column-reverse
flex-wrap:nowrap（初始值） |wrap|wrap-reverse
- flex-flow 属性是 flex-direction 和 flex-wrap 属性的速记属性。
- flex-direction 属性规定灵活项目的方向。
- flex-wrap 属性规定灵活项目是否拆行或拆列。
- IE10 以下和 Safari 不支持此属性
flex-direction 定义了弹性项目在弹性容器中的放置方向，默认是 row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。
flex-wrap 定义是否需要拆行以使得弹性项目能被容器包含。*-reverse 代表相反的方向。示例如下
display:flex;
flex-flow:row-reverse wrap;
-
5、
justify-content: 主轴对齐
justify-content:flex-start（默认值） |flex-end|center|space-around|space-between|space-evenly;
flex-start沿着主轴方向起点对齐（默认值）。从行首起始位置开始排列。
2.flex-end沿着主轴方向结尾对齐。从行尾位置开始排列。
3.center沿着主轴方向 居中 对齐。居中排列。
4.space-around沿着主轴方向 间隔对齐，头尾有间距。space-between沿着主轴方向 间隔对齐，头尾没有间距。
6.space-between均匀排列每个元素，每个元素之间的间隔相等。
<style>
.main {
width: 500px;
height: 500px;
background-color: aqua;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.main div{
width: 100px;
height: 100px;
background-color: pink;
font-size: 20px;
}
</style>
<div class="main">
<!--子项-->
<div>1</div>
<div>2</div>
<div>3</div>
</div>
属性演示.png
-
6、
align-content: 定义了多根轴线的对齐方式
align-content:stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
align-content属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时（垂直）对齐容器内的各项。
提示：使用 justify-content 属性对齐主轴上的各项（水平）。
注意：容器内必须有多行的项目，该属性才能渲染出效果。没有折行，不生效
stretch（默认值）：轴线占满整个交叉轴。
center：与交叉轴的中点对齐。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
如果布局方向为横向主轴：flex-direction: row;
1、此时 align-content 的变化体现在竖直方向；
2、如果要让 align-content: stretch；生效，这个时候应该去掉子项的高度或者设置子项的高度为 auto
如果布局方向为纵向交叉轴：flex-direction: column;
1、此时 align-content 的变化体现在水平方向
2、如果要让 align-content: stretch；生效，这个时候应该去掉子项的宽度或者设置子项的宽度为 auto
-
7、
align-items属性: 居中对齐弹性盒的各项 <div> 元素, 用来设置项目在交叉轴方向上的对齐方式
align-items:flex-start|flex-end|center|baseline|stretch(默认值);
flex-start沿着交叉轴方向 起点 对齐（默认值）。
flex-end沿着交叉轴方向 结尾 对齐。
center沿着交叉轴方向 居中 对齐。
baseline沿着交叉轴方向，按照项目内的文字对齐。
stretch沿着交叉轴方向自动进行拉升到最大。
align-items 属性用来设置项目在交叉轴方向上的对齐方式。
align-items 常用在垂直居中效果实现。
（二）flex子项属性
-
1、
flex-grow属性: 用于设置或检索弹性盒子的扩展比率。
❗注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用
flex-grow:number|initial|inherit;
number一个数字，规定项目相对于其他灵活的项目进行扩展的量。
默认值是 0，表示不占用剩的空白间隙扩展自己的宽度。如果比例值为1，就沾满剩余的所有空间。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。
<style>
.box{
width: 300px;
height: 300px;
background-color:blueviolet;
display: flex;
justify-content: center;
align-items: center;
}
.box div{
height:100px;
background: pink;
flex-grow: 1;
}
</style>
<!--容器-->
<div class="box">
<!--子项-->
<div>
测试文字
</div>
</div>
-
2、
flex-shirk属性: 定义了项目的收缩规则
flex-shrink主要处理当 flex 容器空间不足时候，单个元素的收缩比例。当父元素的宽度小于子元素宽度之和并且超出了父元素的宽度时，flex-shrink就会按照一定的比例进行收缩：将子元素宽度之和与父元素宽度的差值按照子元素flex-shrink的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。
flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。
注意：如果元素不是弹性盒对象的元素，则flex-shrink属性不起作用。
默认为1，即如果空间不足，该项目将缩小。
：
flex-shrink: number|initial|inherit;
number ：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1
initial：设置该属性为它的默认值。
inherit：从父元素继承该属性。
如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。
网友评论