参考 : 超详细
弹性盒子(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 }因为宽度不够，X轴没有间距所以按顺序实现每行第一个左边不留白由于父级宽度的限制 space-around 和 space-evenly 会一样：由于父级宽度的限制 space-around 和 space-evenly 会一样：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; }因为高度不够，Y轴没有间距所以按顺序实现每排第一个上面不留白由于父级高度的限制 space-around 和 space-evenly 会一样（这里的上面也是用margin撑起来的）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-itemscss:.box { width: 600px; background-color: black; display: flex; flex-wrap: wrap; justify-content: space-evenly; / align-content: space-evenly; / align-items: flex-start; }html:<div>align-items: ;</div> <ul class="box"> <li>1</li> <li style="height:80px;">2</li> <li style="height:120px;">3</li> <li>4</li> </ul>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 :<style> { margin: 0; padding: 0; } div { height: 40px; font-size: 30px; line-height: 55px; } .box { width: 600px; height: 250px; background-color: black; } li { width: 200px; height: 200px; list-style: none; border: 1px solid #000; background-color: pink; }</style>html :<div>flex-flow: column wrap;</div><ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul>添加了弹性盒子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-flowflex-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:<div>a{order: 1;}</div> <ul class="box"> <li class="a">1</li> <li class="b" style="height:80px;">2</li> <li class="c" style="height:120px;">3</li> <li class="d">4</li> </ul>flex 放大——flex-growflex-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-shrnkflex-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; //项目占主轴空间 默认autoflex 属性 = flex-grow + flex-shrink + flex-basisflex属性是 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 行结束

（图片来源网络，侵删）