css: flex布局和position:absolute/fixed冲突解决

Posted 2023-05-04

参考技术A 刚开始开发css或者小程序布局时, 都会遇到这样的问题, 当我们同时使用 flex布局与position:absolute/fixed的时候, 无论怎么修改都达不到最终效果, 如下图所示:

我想在白色区域横向布局这个四组文字, 虽然我设置display:flex, 方向也指向flex-direction:row, 但是最终显示出来还是如左图所示. 原因是因为白色底图(.shape_box)布局采用的是position:fixed的形式, 这时候文字的弹性盒子布局已经失效了, 导致达不到最终效果;

 那么如何解决这种问题呢?  我们仅需要在白色底图外层在套一个盒子, 然后最外层盒子使用position:fixed方式布局, 里面都是用flex布局, 效果如下图, 就解决了这类问题;

css 笔记：前端开发中的“居中”，绝对定位，transform和flex布局：6。通过flex布局

.box.box_centerByFlex {
 display: flex;
}

.box.box_centerByFlex .content {
 margin: auto;
}