關(guān)于flex布局的問題

求問大神
<div class="box">

<span class="item"></span>
<span class="item"></span>

</div>

.box {

        display: flex;
        justify-content: space-between;
    }

這樣設(shè)置，兩個span都在box兩邊

<div class="column">
    <span class="item"></span>
    <span class="item"></span>
</div>

</div>

.column {

        display: flex;
        flex-basis: 100%;
        justify-content: space-between;
    }

同樣都是設(shè)置容器里項目的對齊方式，但是第二種兩個容器嵌套在一起，內(nèi)部的容器的項目為什么要設(shè)置flex-basis，兩個span才能在容器兩邊

回答

編輯回答

安淺陌

首先說下這不是加不加flex-basis的問題，至于原因，看我的說明。

我按照你說的寫了個不加flex-basis的版本，為了便于查看，加了背景色和字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>關(guān)于flex的問題</title>
</head>
<style>
    span {
        background: #e94258;
    }

    .box {

        display: flex;
        justify-content: space-between;
    }
    .column {
        background: #000;

        display: flex;
        justify-content: space-between;
    }
</style>
<body>
<div class="box">

    <span class="item">c</span>
    <span class="item">c</span>
</div>
<div class="box">

    <div class="column">
        <span class="item">c</span>
        <span class="item">c</span>
    </div>
</div>
</body>
</html>

顯示的結(jié)果：