flex布局详解
flex布局详解
说明
flex 布局是CSS3中新增加的⼀套布局⽅案，属于⼀维布局模型。flex提供了强⼤的空间分布和对齐能⼒。
想要理解和使⽤flex进⾏⽹页布局，需要先来学习和理解下⾯的⼏个概念：
flex的两根轴线: 主轴和交叉轴
flex容器和flex⼦元素
基本概念的解释
flex的两根轴线
当使⽤flex进⾏布局的时候，⾸先需要了解的，就是flex的两根轴线：主轴和交叉轴。
为什么⼀定要理解这两个轴线呢，因为所有的flex属性都和这两根轴线有关系。
⼀般来说，元素在容器内部排列的顺序都是按照从左向右的顺序来进⾏排列的，⽽在flex中，决定元素排列的是主轴。
默认情况下flex中主轴上的元素排列⽅式和⾮flex情况下是⼀样的。
flex的特性，就是元素沿着主轴或者交叉轴进⾏排列。
flex容器和flex⼦元素
想要使⽤flex布局⽅案，需要在容器属性上使⽤display:flex或者display:inline-flex。
⽽⼀旦设置了任意⼀个属性，那么这个标签就变成了flex容器，也可以称之为是弹性容器。
⽽相对应的，容器当中的⼦元素就变成了flex⼦元素也就是弹性⼦元素。
flex 的相应属性分类
想要更⾼的学习和使⽤flex布局，需要了解flex中包含的属性。⼀般来说，flex的属性可以分成两类:
flex容器属性(flex-container)
flex⼦元素属性(flex-item)
所谓的flex容器属性就是将属性设置在flex容器上，⽽flex⼦元素则是将属性设置在⼦元素的⾝上。
flex容器属性
flex-direction
通过flex-direction属性，可以设置主轴的⽅向，它包括下⾯的⼏个值:
row(默认值): 主轴为⽔平⽅向，项⽬排列起点在左端。
row-reverse: 主轴为⽔平⽅向，起点在右端。
column: 主轴为垂直⽅向，起点在上沿。
column-reverse: 主轴为垂直⽅向，起点在下沿。
实际的效果：
flex-wrap
默认情况下，flex⼦元素全部排列在主轴线上，如果容器的宽度⽆法完全放置flex⼦元素，那么⼦元素
就会⾃动进⾏收缩。如果不希望⼦元素在容器宽度不够时收缩，就可以通过flex-wrap来让元素⾃动换⾏。
该属性的属性值如下:
nowrap:(默认)，不发⽣换⾏。
wrap: 换⾏，第⼀⾏在上⽅。
wrap-reverse: 换⾏，第⼀⾏在下⽅。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
justify-content 属性可以⽤来定义⼦元素在主轴上的对齐⽅式。
相应的属性值如下:
flex-start: (默认)，左对齐
flex-end: 右对齐
center: 居中
space-between: 两端对齐，⼦元素之间的间隔相等
space-around: ⼦元素之间的间隔相等。两端间隔相等。
align-items
align-items属性定义⼦元素在交叉轴上如何对齐。
该属性的属性值如下:
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline ⼦元素的第⼀⾏⽂字的基线对齐
stretch(默认值) ，如果⼦元素未设置⾼度或者设为auto，将占满整个容器的⾼度。
align-content
align-content属性定义了多根轴线的对齐⽅式，如果项⽬只有⼀根轴线，则该属性不起作⽤。
该属性的属性值如下：
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔⽐轴线与边框的间隔⼤⼀倍。
stretch(默认值)，轴线占满整个交叉轴。
flex⼦元素属性
order
flex布局对齐方式
order属性可以定义元素的排列顺序。元素的默认数值为0，⼀般来说，数值越⼩，排列越靠前。
.item {
order: <integer>;
}
flex-grow
flex-grow属性定义项⽬的放⼤⽐例，默认为0。即使存在剩余空间，也不会放⼤。
.item {
flex-grow: <number>; /* default 0 */
}
如果上述的四个⼦元素的flex-grow值都为1，那么四个⼦元素会平均分配剩余空间。
如果其中某个⼦元素的flex-grow属性为2，那么和其他三个分配剩余空间的⽐例关系就是2:1:1:1。
flex-shrink
flex-shrink属性定义了元素的缩⼩⽐例，默认为1，即如果空间不⾜，该项⽬将缩⼩。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有的⼦元素的flex-shrink属性都为1，当空间不⾜时，都将等⽐例缩⼩。如果⼀个⼦元素的flex-shrink属性为0，当空间不⾜时，这个⼦元素不会缩⼩。
负值对该属性⽆效。
flex-shrink缩⼩值计算⽅式
假设: ⽗元素宽度400px。 item1的宽度是200px，item2的宽度是300px，此时对于⽗元素来说，两个⼦元素的和共溢出100px。如果此时两个item的flex-shrink的值都为0，那么多于的100px的值就会发⽣溢出。
如果此时item1的值设置为flex-shrink为0。那么item1将不会减⼩，但是item2会减少。最终item2的⼤⼩为: item2 width[300] - 溢出的宽度[200 + 300 - 400] = 200。
如果item1和item2都发⽣减少操作，例如item1的flex-shrink的值为3，item2的flex-shrink值为2。
那么最终item1的宽度为: item1宽度[200px] - item1 减少的宽度。
item1 减少的宽度 = 溢出的宽度 * ( item1 宽度 * item1 的flex-shrink / (item1 宽度 * item1的 flex-shrink + item2 宽度 * item2的 flex-shrink ) )
上⾯的内容全部转为为数值： 100 * (200*3/(200 * 3 + 300 * 2)) = 50。
此时经过计算最终item1的宽度为200-50=150px。
通过相同的计算，item2的宽度为: 300-50=250px。
flex-basis
flex-basis属性定义了在分配多余空间之前，⼦元素占据的主轴空间。浏览器会根据这个属性，来计算主轴的空间使⽤。默认值为auto。即为⼦元素本来的⼤⼩。
.item {
flex-basis: <length> | auto; /* default auto */
}
可以将其设为和width和height⼀样的⼤⼩，这样的话⼦元素将占据固定的空间。
flex
flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
常⽤情况:
flex等于数值的情况如下:
flex: 1
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
flex: 2
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
flex: n
flex-grow: n;
flex-shrink: 1;
flex-basis: 0%;
flex等于带有单位的值情况如下：
flex: 100px
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
flex: 200px
flex-grow:1;
flex-shrink: 1;
flex-basis: 200px;
flex: length
flex-grow:1;
flex-shrink:1;
flex-basis: length;
如果容器⾥⾯的主轴空间全部被⼦元素占据，那么某⼀个⼦元素的flex-basis值⼤于元素现在在主轴空间占据的最⼤宽度时，那么该⼦元素就会放⼤，相应的，其他的⼦元素就会缩⼩。
flex的值为两个值并且没有单位的时候:
flex: 1 2;
flex-grow:1;
flex-shrink: 2;
flex-basis:0%;
flex: 2 3;
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
flex: num1 num2;
flex-grow: num1;
flex-shrink: num2;
flex-basis: 0%;
flex的值为两个值并且第⼆个值具有单位的时候:
flex: 1 200px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
flex: 2 200px;
flex-grow: 2;
flex-shrink: 1;
flex-basis: 200px;
flex: num length;
flex-grow: num;
flex-shrink: 1;
flex-basis: length;
flex的值为三个值的时候，分别为flex-grow、flex-shrink、flex-basis。
flex的值为none的时候，flex-grow的值为0，flex-shrink的值为0，flex-basis的值为auto。
flex的值为auto的时候，flex-grow的值为1，flex-shrink的值为1，flex-basis的值为auto。
align-self
align-self 属性允许单个⼦元素与其他项⽬采⽤不⼀样的对齐⽅式，可以覆盖flex容器属性中的align-items属性值。默认为auto，表⽰继承⾃⽗元素的align-items属性，如果没有⽗元素属性，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。