参考 : 超详细！弹性盒子(display:flex)_css_荧惑-华为云开发者联盟
display:flex 意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}注意:设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
它可以用于以下四个方面：
1、在不同方向排列元素
2、重新排列元素的显示顺序
3、更改元素的对齐方式
4、动态地将元素装入容器概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性
justify-content : justify-content 属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}总结属性值
flex-start：(默认值)起始对齐——左对齐，顶部对齐；
flex-end：结束对齐——右对齐，底部对齐；
center：居中；
space-between：间距相等，两边不留白；
space-around：间距相等，两边留白=间距的一半；
space-evenly：间距相等，两边留白和间距一样；- justify-content X轴对齐方式
1.1 当父级的高不够时
css:
.box {
width: 600px;
height: 250px;
background-color: black;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}1.2 当父级的宽度(width)<2倍子级的宽度(width)时：
css:
.box {
width: 250px;
height: 600px;
background-color: black;
display: flex;
flex-flow: row wrap;
justify-content: space-between
}- align-content Y轴对齐方式
2.1 当父级的高不够时
css:
.box {
width: 600px;
height: 250px;
background-color: black;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: flex-start;
}2.2 当父级的高度(height)<2倍子级的高度(height)时
css:
.box {
width: 600px;
height: 250px;
background-color: black;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-around;
margin-top: 80px;
}align-items : align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。Y轴对齐的另外一种：align-items
css:
.box {
width: 600px;
background-color: black;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
/* align-content: space-evenly; */
align-items: flex-start;
}
html:
align-items: ;
- 1
- 2
- 3
- 4
align-content 和 align-items 的区别
align-content：只能用于父级设有高度的情况下，因为涉及到间距和两边的留白情况，所以当父级无高度的话，这个就没有办法实现，也就是无效设置；
align-items：可以用于父级无高度时，align-items的对齐会将父级盒子撑起来，而且这个没有间距设置，所以上图展示中不存在溢出的情况；
第二个看起来是不是好用一点，但是宝子们，如果父级无高的话那就没有办法设置交叉轴的间距哦！而且！！如果父级设置高的话，第二个就不存在把盒子撑开的情况了，多出来的还是会溢出的。align-self：在弹性子元素上使用。覆盖容器的 align-items 属性。
align-self：flex-start || flex-end || center || baseline || stretch
可选值： flex-start（在该行纵轴上，紧靠最上面）、flex-end（在该行纵轴上，紧靠最下面）、center（在该行纵轴上居中放置）、baseline（基线对齐）、stretch（auto，按照所在行的高度排列）没有添加弹性盒子
css :
html :
flex-flow: column wrap;
- 1
- 2
- 3
- 4
添加了弹性盒子
css :
.box {
width: 600px;
height: 250px;
background-color: black;
display: flex;
}当加入属性： flex-direction 指定了弹性容器中子元素的排列方式。
水平对齐 :
row：主轴对齐，也可以说是水平对齐，也就是从左到右对齐；
row-reverse：主轴对齐，reverse(翻转)，所以这里是从右到左对齐；
css:
.box {
width: 600px;
height: 250px;
background-color: black;
display: flex;
flex-direction: row;
}
css :
.box {
width: 600px;
height: 250px;
background-color: black;
display: flex;
flex-direction: row-reverse;
}垂直对齐 :
column：交叉轴对齐，也可以说是垂直对齐，也就是从上到下对齐；
column-reverse：交叉轴对齐，同理这里是从下到上对齐；flex-wrap 换行
css :
.box {
width: 600px;
height: 250px;
background-color: black;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
在从左到右对齐的条件下：
nowrap ：默认值，不换行；不换行的话，如果所有子元素的宽/高总值大于父元素的宽/高，那么为了子元素不溢出，会把内容挤压变形到自适应的宽高；
warp：对齐方向不溢出的自动换行；
这里只是单纯换不换行，不改变li的顺序哦。flex-flow
flex-direction + flex-wrap = flex-flowflex 项排序——order
弹性盒子可以在不影响到源顺序（即 DOM 树里元素的顺序）的直接改变flex项的布局功能
所有的 flex 项默认的 order 值为 0
order 值相同的按照源顺序显示
order 值越大的位置越靠后，这里可以和z-index联想
order 值可以设置负数
css:
.box {
width: 1000px;
height: 300px;
background-color: black;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-evenly;
}
.a {
order: 1;
}
html:
a{order: 1;}
- 1
- 2
- 3
- 4
flex 放大——flex-grow
flex-grow：将剩下的间距等比例的用被设置的子元素填满，也就是缩放子元素来填满间隙。
默认的flex-grow的值都为0，也就是不允许放大。flex-grow的值为倍数。
css：
.box {
width: 1000px;
height: 300px;
background-color: black;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-evenly;
}
.a {
flex-grow: 0;
}
li {
width: 200px;
height: 200px;
list-style: none;
border: 1px solid #000;
background-color: pink;
}flex 缩小——flex-shrnk
flex-grow：1；默认为1，主轴空间不够时允许项目缩小 。是给所有子级设置的。
css:
.box {
width: 1000px;
height: 300px;
background-color: black;
display: flex;
/* flex-wrap: wrap; */
justify-content: space-evenly;
align-content: space-evenly;
}
li {
width: 300px;
height: 200px;
list-style: none;
border: 1px solid #000;
background-color: pink;
flex-shrink: 1;
}css:
.box {
width: 1000px;
height: 300px;
background-color: black;
display: flex;
/* flex-wrap: wrap; */
/* justify-content: space-evenly; */
align-content: space-evenly;
}
li {
width: 300px;
height: 200px;
list-style: none;
border: 1px solid #000;
background-color: pink;
flex-shrink: 0;
}flex-basis 主轴空间
flex-basis：auto; //项目占主轴空间 默认auto
flex 属性 = flex-grow + flex-shrink + flex-basis
flex属性是 flex-grow、flex-shrink、flex-basis属性的简写属性。默认值是 0 1 auto。
flex-grow：放大比例。默认为0，即使有剩余空间，也不放大。所有子元素的flex-grow：1时，等分剩余空间。
flex-shrink：缩小比例。默认为1，如果空间不足，子元素将缩小。所有子元素flex-shrink：1时，缩小的比例相同。flex-shrink：0，空间不足时，也不会缩小。
flex-basis：内容盒的尺寸。默认为auto。设置后，相当于指定一个初始大小。
设置flex为1时，相当于设置，flex-grow：1，flex-shrink：1，flex-basis：auto。子元素会在父容器内等分布局。flex嵌套
flex存在嵌套关系，在一个盒子中并不是只能存在一个display: flex，可以按照你需要的所使用。
display：grid（网格布局，也叫栅栏布局）
当一个元素将 display 设置为 grid 或者 inline-grid 后，它就变成了一个网格容器，内容内的所有子元素将成为网格元素。
grid-template-columns：指定列的大小，以及网格布局中设置列的数量。
grid-template-rows：指定网格布局中行的大小。
fr 单位：网格布局中引入了 fr 单位，一个 fr 代表网格容器中可用空间的一等份。
grid-column-gap：设置列之间的间距。
grid-row-gap：设置行之间的间距。
grid-gap：表示grid-column-gap 和 grid-row-gap属性的缩写。
grid-column：表示grid-column-start 和 grid-column-end属性的缩写。示例：grid-column：1 / 5；表示从第 1 列开始，第 5 列结束。
grid-row：表示grid-row-start 和 grid-row-end属性的缩写。示例：grid-row：1 / 5；表示从第 1 行开始，第 5 行结束。