1 Basic knowledge
[Basic knowledge 1]
[Basic knowledge 2]
[Teacher Ruan Yifeng_Grammar]
[Teacher Ruan Yifeng_Strength]
2 Brief summary
Properties set on the flex container
* flex-direction:row | row-reverse | column | column-reverse;
* flex-wrap: nowrap | wrap | wrap-reverse;
* flex-flow: <flex-direction> || <flex-wrap>;
//主轴对齐方式
* justify-content: flex-start | flex-end | center | space-between | space-around;
//交叉轴对齐方式
* align-items: flex-start | flex-end | center | baseline(第一行文字) | stretch(c撑开);
//多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。()
* align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Properties set on flex item
//定义项目的排列顺序，数值越小排列越靠前，默认为0
* order
//定义项目在空间剩余时的放大比例，默认为0不放大，如果所有项目放大比例都为1，则平分剩余空间；若有一个为2，则该项目比其他项目占据的剩余空间大一倍
* flex-grow
//项目缩小比例，如果一个为0，其他为1，则空间不足时，该为0的项目不缩小
* flex-shrink
//flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。优先级：flex-basis > width(height)
* flex-basis
//flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，auto(1 1 auto),none(0 0 auto)
* flex
* align-selfNote: When an element is set with both flex-basis (except for auto) and width (or height is set in the case of flex-direction: column), flex-basis has a higher priority.
For the values of the three default properties of flex, please refer to https://segmentfault.com/q/1010000004080910
Simple and small eg:
.box{
width:200px;
height:200px;
background: red;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.item{
display:inline-block;
width:50px;
height:50px;
margin:10px;
background:green;
}Default flex
.item {flex: none;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
.item {flex: auto;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item{
flex-grow: 1;
flex-shrink: 1;
flex-basis: 800px;
}
.item {flex: 0%;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0
.item {flex: 24px;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24
}
When flex sets two non-negative numbers, the first two zoom values are set by default, and the third value defaults to 0%
When the value of flex is a non-negative number and a length or percentage, it is regarded as the value of flex-grow and flex-basis respectively, and flex-shrink takes 1
3 Use a small tip (continuous update)
When all the child elements on a row in the flexbox cannot scale or have reached their maximum value, this attribute can assist in the allocation of excess space. When the element overflows a certain line, this attribute will also be controlled in alignment.
justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。When using space-between, it will be aligned according to the starting position on both sides, but if the elements of the last line cannot fill the entire line, the following situation will occur
Solution:
1. Add a few empty boxes with the same width as the existing item and a height of 0. Generally, the number of items added is the maximum number of items per line -1
for(let i = 0;i < 6;i++){
result.push(<i className="item-empty" style={
{width:'235px'}}></i>);
}
2. In a scenario with a fixed number of rows and columns, you can add a ::after pseudo-class to the parent element and set content as follows: (the specific implementation needs to be considered)
.box:after { content: ""; flex: auto; }See the link for more detailed methods
https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/