.parent-box{ /*弹性盒模型*/ display:flex; /*主轴居中对齐*/ justify-content: center; /*侧轴居中对齐*/ align-items: center; } 　　 ...

...

display:flex;justify-content: center;检查侧轴是否居中，比如古代竖着写字，检查字是否在每条竹简的中央。 display:flex;align-items: center;检查横轴是否居中 ...

单独给给子元素添加 flex-shrink属性定义了项目的缩小比例，默认值为1，即如果空间不足，该项目将缩小。 使用综合属性flex 也可以用一个综合属性flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个 ...

给每个子元素添加 flex-shrink: 0; 父元素overflow:auto;实现子元素不压缩，超出宽度展示滚动条 ...

经过验证，需要在父元素（flex-container）设置height=100%;而子元素不可以设置height=100%否则将失效 于是，如上图去除子元素的100%属性。 对应的Css ...

因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。 该属性介绍: 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 根据上述介绍可以理解为默认 1 为开启收缩 所以可以将display:flex;下的子元素的flex属性设置 ...

flex布局中子元素设置以下一种样式即可 .item{ margin-left:auto; } .item{ flex: 1; text-align: right; } ...