使用 flexbox 未正確設置容器的寬度

Question

我希望我的 flexbox 容器與上述容器具有相同的寬度，但是每當我向容器添加左/右填充時，它都會增加寬度。 讓我知道如何處理 flexbox 中的填充。

 * { margin: 0; padding: 0; } html, body{ box-sizing: border: box; width: 100%; }.container { padding: 20px; }.container.flex { display: flex; width: 100%; border: 1px solid red; padding: 20px 0; /* Adding Padding left and right 20px is adding a scroller */ gap: 20px; }.container.flex.box { flex-basis: 100%; }.one { background: #80558C; }.two { background: #AF7AB3; }.three { background: #CBA0AE; }.four { background: #E4D192; }.five { background: #576F72; }

 <div class="container"> <div class="box one">Box 1</div> <div class="box two">Box 2</div> <div class="box three">Box 3</div> <div class="box four">Box 4</div> <div class="box five">Box 5</div> </div> <div class="container flex"> <div class="box one">Box 1</div> <div class="box two">Box 2</div> <div class="box three">Box 3</div> <div class="box four">Box 4</div> <div class="box five">Box 5</div> </div>

Answer 1

您可以通過添加的填充量或添加box-sizing: border-box; 到那個 flexbox。

 * { margin: 0; padding: 0; } html, body{ box-sizing: border-box; width: 100%; }.container { padding: 20px; }.container.flex { display: flex; width: 100%; border: 1px solid red; padding: 20px 0; box-sizing: border-box; /* Adding Padding left and right 20px is adding a scroller */ gap: 20px; }.container.flex.box { flex-basis: 100%; }.one { background: #80558C; }.two { background: #AF7AB3; }.three { background: #CBA0AE; }.four { background: #E4D192; }.five { background: #576F72; }

 <div class="container"> <div class="box one">Box 1</div> <div class="box two">Box 2</div> <div class="box three">Box 3</div> <div class="box four">Box 4</div> <div class="box five">Box 5</div> </div> <div class="container flex"> <div class="box one">Box 1</div> <div class="box two">Box 2</div> <div class="box three">Box 3</div> <div class="box four">Box 4</div> <div class="box five">Box 5</div> </div>

Answer 2

添加 box-sizing 將解決此問題。

* { margin: 0; padding: 0; box-sizing: border-box;}

 * { margin: 0; padding: 0; box-sizing: border-box;} html, body{ }.container { padding: 20px; }.container.flex { display: flex; width: 100%; border: 1px solid red; padding: 20px 0; /* Adding Padding left and right 20px is adding a scroller */ gap: 20px; }.container.flex.box { flex-basis: 100%; }.one { background: #80558C; }.two { background: #AF7AB3; }.three { background: #CBA0AE; }.four { background: #E4D192; }.five { background: #576F72; }

 <div class="container"> <div class="box one">Box 1</div> <div class="box two">Box 2</div> <div class="box three">Box 3</div> <div class="box four">Box 4</div> <div class="box five">Box 5</div> </div> <div class="container flex"> <div class="box one">Box 1</div> <div class="box two">Box 2</div> <div class="box three">Box 3</div> <div class="box four">Box 4</div> <div class="box five">Box 5</div> </div>

Answer 3

為了匹配容器寬度和我的 flex 容器的起始 position，我添加了一個margin-left: 20px ，它將容器向左移動 20px。

現在從右邊有一個空間，我調整了容器的寬度，比如 - width: calc(100% - 40px); .

工作代碼 -

 * { margin: 0; padding: 0; box-sizing: border: box; } html, body{ width: 100%; }.container { padding: 20px; }.container.flex { display: flex; width: calc(100% - 40px); border: 1px solid red; padding: 20px 0; margin-left: 20px; gap: 20px; }.container.flex.box { flex-basis: 100%; text-align: center; }.one { background: #80558C; }.two { background: #AF7AB3; }.three { background: #CBA0AE; }.four { background: #E4D192; }.five { background: #576F72; }

 <div class="container"> <div class="box one">Box 1</div> <div class="box two">Box 2</div> <div class="box three">Box 3</div> <div class="box four">Box 4</div> <div class="box five">Box 5</div> </div> <div class="container flex"> <div class="box one">Box 1</div> <div class="box two">Box 2</div> <div class="box three">Box 3</div> <div class="box four">Box 4</div> <div class="box five">Box 5</div> </div>