有关flex布局子元素宽度问题

Question

问题：a约等于512px是怎么来的呢？

.flex {
    display: flex;
    width: 1000px;
}

.item {
    height: 100px;
    flex: 1 1 auto;
}

.a {
    width: 400px;
}

<div class="flex">
    <div class="item a">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
    <div class="item">e</div>
</div>

Answer 1

正常应该是 一个520 剩下全是120。但是，不是这个值的原因是div里面有字，具体深刻的原理我不清楚，请高手解惑

Answer 2

Flex 布局教程：语法篇 - 阮一峰的网络日志

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

主轴宽度 ≈ 440;
所以 .a 分配的空间是 560 / 5 + 400 = 512px.