container
布局方向 flex: flex-direction
.container{
display: flex;
flex-direction:row
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row-reverse
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
.container{
display: inline-flex;
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
.container{
flex-direction: column;
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
.container{
flex-direction: column;
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
换行 flex-wrap
.container{
display: flex;
flex-direction:row
flex-wrap:wrap ; //nowrap、wrap 、wrap-reverse
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
item 5
width: 100px; height: 100px;
item 6
width: 100px; height: 100px;
item 7
width: 100px; height: 100px;
item 8
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row
flex-wrap:wrap-reverse ; //nowrap、wrap 、wrap-reverse
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
item 5
width: 100px; height: 100px;
item 6
width: 100px; height: 100px;
item 7
width: 100px; height: 100px;
item 8
width: 100px; height: 100px;
justify-content：定义了项目在主轴的对齐方式
.container{
display: flex;
flex-direction:row
justify-content:flex-start; //左对齐
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row
justify-content:flex-end; //右对齐
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row
justify-content:center; //中间对齐
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row
justify-content:space-between; //两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row
justify-content:space-around; //每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
align-items: 定义了项目在交叉轴上的对齐方式
建立在主轴为水平方向时测试，即 flex-direction: row
align-items: flex-start | flex-end | center | baseline | stretch;
.container{
display: flex;
flex-direction:row
align-items:stretch; //默认值为 stretch
即如item未设置高度或者设为 auto，将占满整个容器的高度
}
item 1
width: 100px; height: auto;
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
item 2
width: 100px; height: auto;
item 3
width: 100px; height: auto;
item 4
width: 100px; height: auto;
.container{
display: flex;
flex-direction:row
align-items:stretch;
height:120px; //假设container高度设置为 120px，而item都没有设置高度的情况下，则项目的高度也为 120px。
}
item 1
width: 100px; height: auto;
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
item 2
width: 100px; height: auto;
item 3
width: 100px; height: auto;
item 4
width: 100px; height: auto;
.container{
display: flex;
flex-direction:row
align-items:flex-start; //flex-start:交叉轴的起点对齐
}
item 1
width: 100px; height: auto;
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
item 2
width: 100px; height: auto;
测试测试测试测试测试测试测
item 3
width: 100px; height: auto;
item 4
width: 100px; height: auto;
.container{
display: flex;
flex-direction:row
align-items:flex-end;
}
item 1
width: 100px; height: auto;
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
item 2
width: 100px; height: auto;
测试测试测试测试测试测试测
item 3
width: 100px; height: auto;
item 4
width: 100px; height: auto;
.container{
display: flex;
flex-direction:row
align-items:center;
}
item 1
width: 100px; height: auto;
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
item 2
width: 100px; height: auto;
测试测试测试测试测试测试测
item 3
width: 100px; height: auto;
item 4
width: 100px; height: auto;
.container{
display: flex;
flex-direction:row
align-items:baseline; //item的第一行文字的基线对齐
}
item 1
width: 100px; height: auto;
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
item 2
width: 100px; height: auto;
测试测试测试测试测试测试测
item 3
width: 100px; height: auto;
item 4
width: 100px; height: auto;
align-content:定义了多根轴线的对齐方式
如果项目只有一根轴线，那么该属性将不起作用。当容器设置 flex-wrap 时,超过显示范围会换行，就有多个轴线。
.container{
display: flex;
flex-direction:row;
height: 600px;
width: 600px;
flex-wrap:wrap ;
align-content:wrap; 默认为wrap
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
item 5
width: 100px; height: 100px;
item 6
width: 100px; height: 100px;
item 7
width: 100px; height: 100px;
item 8
width: 100px; height: 100px;
height: auto; 会将容器高度等分
.container{
display: flex;
flex-direction:row;
height: 600px;
width: 600px;
flex-wrap:wrap ;
align-content:wrap; 默认为wrap
}
item 1
width: 100px; height: auto;
item 2
width: 100px; height: auto;
item 3
width: 100px; height: auto;
item 4
width: 100px; height: auto;
item 5
width: 100px; height: auto;
item 6
width: 100px; height: auto;
item 7
width: 100px; height: auto;
item 8
width: 100px; height: auto;
.container{
display: flex;
flex-direction:row;
height: 400px;
width: 600px;
flex-wrap:wrap ;
align-content:flex-start; //轴线全部在交叉轴上的起点对齐
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
item 5
width: 100px; height: 100px;
item 6
width: 100px; height: 100px;
item 7
width: 100px; height: 100px;
item 8
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row;
height: 400px;
width: 600px;
flex-wrap:wrap ;
align-content:flex-end; //轴线全部在交叉轴上的终点对齐
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
item 5
width: 100px; height: 100px;
item 6
width: 100px; height: 100px;
item 7
width: 100px; height: 100px;
item 8
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row;
height: 400px;
width: 600px;
flex-wrap:wrap ;
align-content:flex-end; //轴线全部在交叉轴上的终点对齐
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
item 5
width: 100px; height: 100px;
item 6
width: 100px; height: 100px;
item 7
width: 100px; height: 100px;
item 8
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row;
height: 400px;
width: 600px;
flex-wrap:wrap ;
align-content:center;
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
item 5
width: 100px; height: 100px;
item 6
width: 100px; height: 100px;
item 7
width: 100px; height: 100px;
item 8
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row;
height: 700px;
width: 600px;
flex-wrap:wrap ;
align-content:space-between; //轴线两端对齐，之间的间隔相等，
即剩余空间等分成间隙。
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
item 5
width: 100px; height: 100px;
item 6
width: 100px; height: 100px;
item 7
width: 100px; height: 100px;
item 8
width: 100px; height: 100px;
item 9
width: 100px; height: 100px;
item 10
width: 100px; height: 100px;
item 11
width: 100px; height: 100px;
item 12
width: 100px; height: 100px;
.container{
display: flex;
flex-direction:row;
height: 700px;
width: 600px;
flex-wrap:wrap ;
align-content:space-around; //每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
width: 100px; height: 100px;
item 4
width: 100px; height: 100px;
item 5
width: 100px; height: 100px;
item 6
width: 100px; height: 100px;
item 7
width: 100px; height: 100px;
item 8
width: 100px; height: 100px;
item 9
width: 100px; height: 100px;
item 10
width: 100px; height: 100px;
item 11
width: 100px; height: 100px;
item 12
width: 100px; height: 100px;
item
flex item : Order
.item{
order: 0; //项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
}
item 1
order: 4;
item 2
order: 2;
item 3
order: 1;
item 4
order: -1;
flex-basis
定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。
当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果.
item 1
flex-basis:50%;
item 2
flex-basis:10%;
item 3
flex-basis:10%;
item 4 Description
flex-basis:auto; width: auto;
flex-grow: 定义项目的放大比例
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
比如横向两个item,想要一个item A宽度固定(或max-width),另一个item B填充剩余宽度, 则设置item B的flex-grow:1, item 设置为0或者不设置。
当所有的项目都以 flex-basis 的值进行排列后，仍有剩余空间，那么这时候 flex-grow 就会发挥作用了
如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间。(如果有的话) 如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
当然如果当所有项目以 flex-basis 的值排列完后发现空间不够了，且 flex-wrap：nowrap 时，此时 flex-grow 则不起作用了，这时候就需要接下来的这个属性。
item 1
flex-grow:2;
item 2
flex-grow:1;
item 3
flex-grow:1;
flex-shrink: 定义了项目的缩小比例
如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。 如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。
.container{
flex-wrap: nowrap;
width: 600px;
}
item 1
width:200px;flex-shrink:0;
item 1
width:200px;flex-shrink:1;
item 1
width:200px;flex-shrink:1;
item 1
width:200px;flex-shrink:1;
item 1
width:200px;flex-shrink:1;
align-self 允许单个项目有与其他项目不一样的对齐方式
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
.container{
display: flex;
flex-direction:row
}
item 1
width: 100px; height: 100px;
item 2
width: 100px; height: 100px;
item 3
align-self:flex-end;
item 4
width: 100px; height: 100px;
参考链接
https://zhuanlan.zhihu.com/p/25303493?refer=learncoding