flex: 1 0
calc(
(100% / min(var(--cx-active-view), var(--cx-max-views))) -
var(--cx-split-gutter)
);
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
主要记住 “容器”、“项目”、“主轴（横轴）”和“交叉轴（纵轴）”的意思和指向就行。
可以理解成x轴和y轴。
flex-direction 决定主轴的方向（即项目的排列方向）。它有4个可能的值 ：
row（默认值）：主轴为水平方向，起点在容器的左端。
row-reverse：主轴为水平方向，起点在容器的右端。
column：主轴为垂直方向，起点在容器的上沿。
column-reverse：主轴为垂直方向，起点在容器的下沿。
flex: 2;
如果只包含一个值，代表flew-grow
/* Three values: flex-grow | flex-shrink | flex-basis */
flex-grow属性定义项目的放大比例，默认为0。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
如果container容器设置的flex-wrap则不存在空间不足的情况，如果超过会自动换行。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
语法：
/* Keyword values */
flex: auto;
flex: initial;
flex: none;
/* One value, unitless number: flex-grow */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Global values */
flex: inherit;
flex: initial;
flex: unset;
一些简写模式
单个数字
- 1：In this case it is interpreted as flex: 1 1 0; the flex-shrink value is assumed to be 1 and the flex-basis value is assumed to be 0.
Two-value syntax:
- 第一个值：必须是数字，被解析成flex-grow
- 第二个值：要么是数字，被解析成flex-shrink, 要么代表width，被解析成flex-basis.
flex: auto - 相当于：
The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "flex: 1 1 auto".
<html>
<style>
#flex-container {
background-color: red;
display: flex;
width: 50px;
flex-direction: row;
}
#flex-container > .flex-item {
flex: 1 4 auto;
background-color: blue;
}
#flex-container > .raw-item {
flex: 1 0 auto;
background-color: green;
}
</style>
<div id="flex-container">
<div class="flex-item" id="flex">Flex box</div>
<div class="raw-item" id="raw">Raw2 box</div>
</div>
</html>
更多Jerry的原创文章，尽在："汪子熙":
网友评论