Я не понимаю, почему первая кнопка здесь не заполняет всю ширину:
<div style = "display:flex;">
<button style = "width:100%;"> </button>
<button style = "flex-shrink: 0;"> </button>
<button> </button>
</div>Почему flexbox прерывает ширину?
🤔 А знаете ли вы, что...
HTML5 внедрил множество новых семантических элементов, таких как <header>, <footer>, <nav> и другие.
первая кнопка не заполняет всю ширину из-за того, как flexbox распределяет пространство. По умолчанию гибкие элементы имеют flex-shrink: 1, что позволяет им сжиматься. Когда вы устанавливаете width: 100% на первой кнопке, она изначально занимает все пространство, но затем flexbox перераспределяет пространство для размещения других кнопок.
Он заполняет всю ширину, доступную ему гибкого контейнера, который должен оставлять место для остальных элементов в контейнере.
Если вы ожидаете, что элементы будут перенесены, значением по умолчанию для flex-wrap, если оно не указано, является nowrap. Вы можете установить собственное значение, чтобы разрешить перенос элементов:
<div style = "display:flex;flex-wrap:wrap;">
<button style = "width:100%;"> </button>
<button style = "flex-shrink: 0;"> </button>
<button> </button>
</div>Оно делает. Как отражено в вашем фрагменте кода.
<div style = "display:flex; height: 50px;">
<button style = "width:100%;"> </button>
<button style = "flex-shrink: 0;"> </button>
<button> </button>
</div>Однако, если вы ожидаете, что две родственные кнопки уменьшатся до нуля, вам придется удалить отступы и границы по умолчанию для элементов кнопок.
<div style = "display:flex; height: 50px">
<button style = "width:100%;"> </button>
<button style = "padding: 0; border: 0;"> </button>
<button style = "padding: 0; border: 0;"> </button>
</div>