Flex項目寬度flex-direction：列和邊距：0 auto

Question

爲什麼不彈性項目A當它設置爲margin: 0 auto時，取整個容器的寬度？

jsfiddle

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.a { 
 
    margin: 0 auto; 
 
    border: 1px solid red; 
 
} 
 
.b { 
 
    border: 1px solid blue; 
 
}

<div class="container"> 
 
    <div class="a">A</div> 
 
    <div class="b">B</div> 
 
</div>

Answer 1

那怎麼Flexbox的佈局算法的作品。在這種情況下，出現以下情況：

Flexible Box Layout Module - 8.1. Aligning with auto margins

在柔性項自動利潤率非常相似，汽車利潤率塊流動的效果：

• 的柔性基地和靈活的計算期間長度，自動餘量被視爲0.

• 在通過justify-content和align-self對齊之前，任何位置可用空間分配給該維度中的自動邊距。

在你的情況，你看到在元件兩側均勻分佈的自由空間。下面是從佈局算法採取的另一點：

9. Flex Layout Algorithm - 9.5. Main-Axis Alignment

分發任何剩餘的可用空間。對於每條彎曲線： 如果剩餘的空閒空間爲正，並且該線上至少有一個主軸邊距爲自動，則在這些邊距之間平均分配空閒空間。否則，將所有自動邊距設置爲零。 沿着主軸對齊每個對齊內容的項目。