flex中justify-content: center导致的子元素显示不完全解决

Posted 2023-06-09 瘪哥

多嵌入一层标签

.content 
    display: flex;
    height: 200px;
    


.parent 
    display: flex;
    justify-content: center;
    width: 800px;
    margin-left: 100px;
    border: 1px solid green;
    overflow: auto;


.flex-item 
    flex: 0 0 200px;
    width: 200px;
    height: 180px;
    border: 1px solid red;


<div class="parent">
    <div class="content">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</div>

 

岁月无情催人老，请珍爱生命，远离代码！！！

flex常见属性

参考技术A 1：flex常见属性总结

justify-content属性：定义项目在主轴上的对齐方式

justify-content: center;   //居中排列

justify-content: flex-start;  // 左对齐

justify-content: flex-end;  //右对齐

justify-content: space-between;  //中间均分，两端对齐

2：flex-direction属性：决定主轴的方向（即项目的排列方向）

flex-direction: row  //从左到右

flex-direction: row-reverse  //从右到左

flex-direction: column  //从上到下

flex-direction: column-reverse  //从下到上

2.   .icondisplay:flex   

      .icondisplay:inline-flex