设置两个包裹的 flexbox 元素的百分比尺寸答案

【问题标题】：Set the percentage dimension of two wrapped flexbox elements设置两个包裹的 flexbox 元素的百分比尺寸
【发布时间】：2020-01-03 05:56:52
【问题描述】：

我正在练习 flexbox，我会创建一个简单的布局。但是从代码中可以看出我有一些困难。我想将内容（代码中的两个部分）分成两部分：30% 和 70%，但 flexbox 指令不能做到这一点。为什么？我该如何解决？

Code on JSFiddle

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">
    <title>Flex Layout</title>

    <style type="text/css">

        body,html{
            margin:0px;
            padding:0px;
            box-sizing:border-box;  
        }

        .container{
            display: flex;
            flex-wrap: wrap;

        }

        .mainheader{
            flex:100%;
            padding:35px 0;
            color:white;
            text-align: center;
            background-color: rgb(50,180,200);

        }

        nav{
            background-color: black;
            flex:100%;

        }

        ul.navbar{
            list-style:none;
            overflow: hidden;
            margin:0;
            padding:0;
        }

        ul.navbar > li{

            float:left;
            text-align:center;
        }

        ul.navbar  a:hover{
            color:black;
            background-color:white;
        }

        .navbar a{
            display:block;
            text-decoration:none;
            color:white;
            padding:15px;
            font-size:large;
        }



            .side{
            flex:30%;
            padding:10px;
            border:thin solid black;
        }

        .content{
            flex:70%;
            }
    </style>
</head>

<body>

    <div class="container">

        <header class="mainheader">
            <h1>My Website</h1>
            <p>With a flexible layout</p>
        </header>

        <nav>
            <ul class="navbar">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </nav>


        <section class="side">
            <header>
                <h1>About me</h1>
            </header>
            <h4>
                Photo of me
            </h4>

        </section>

        <section class="content">
        Lorem ipsum
        </section>

    </div>

</body>

</html>

【问题讨论】：

标签： css layout flexbox

【解决方案1】：

关于 margins-paddings-borders 是一个非常愚蠢的错误。当尺寸以百分比为单位时，这些会沉迷于宽度，因此布局的第二部分会换行。为了防止这种情况，您必须使用：

box-sizing:border-box;

但我是一个旋钮，我把这个属性放在 html,body 标签中，而不是 "*" 选择器：

这是解决方法：

*{
      box-sizing:border-box;

 }

【讨论】：