CSS dispaly: flex—左右两栏式

父级：display: flex

left: flex: 0 0 200px(固定200px，不放大也不缩小)

right: flex: 1(会随父级变化)

（固定+自适应）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 参考阮一峰里面的百分比布局，要实现和上面一样的效果（一侧固定，一侧随父级进行变化） -->
    <!-- flex: 1 =? 1 1 0%
    flex: auto => 1 1 auto
    flex: none => 0 0 auto;
    flex-basis优先级 自身设定 > 0%(flex:1按字体的高度) > auto(采用height) -->
    <style>
      .wrap {
        margin: 0 auto;
        width: 80%;
        display: flex;
      }
      #left {
        flex: 0 0 200px; /* 左侧固定200px */
        height: 500px;
        background: red;
      }
      #right {
        /**
         * flex: 1 1 0%
         * 0%表示此处宽度是按照自身内容宽度来，此处自身内容宽度为0，但是分配剩余的空间，所以可以自适应变化
         */
        flex: 1; /* 随父级变化 */
        height: 500px;
        background: burlywood;
      }
    </style>
</head>
<body>
　　<div class="wrap">
　　　　<aside id="left"></aside>
　　　　<section id="right">5555</section>
　　</div>
</body>
</html>

 

更多方式见

原文链接：https://blog.csdn.net/jiaojsun/article/details/92831614
posted @ 2023-12-21 17:17  打击范围覆盖全球  阅读(162)  评论(0)    收藏  举报