Почему этот компонент не заполняет всю ширину?
Я не понимаю, почему первая кнопка здесь не заполняет всю ширину:
<div style = "display:flex;">
<button style = "width:100%;"> </button>
<button style = "flex-shrink: 0;"> </button>
<button> </button>
</div>Почему flexbox прерывает ширину?
@MisterJojo Нет, это не так. Разве вы не видите две кнопки в одной строке?
Конечно, я их вижу! Они находятся за пределами отведенного для первой кнопки места! Когда вы используете display:flex для родительского элемента, его размер не используется в качестве ссылки. каждый дочерний элемент имеет свое собственное распределенное пространство, где целостность его содержимого имеет приоритет. Таким образом, результат, который вы получаете, располагая кнопки на одной строке, является нормальным для гибкого дисплея, как вы его определили здесь. Таким образом, здесь нет дефекта дисплея. Но будьте уверены, благодаря подтвержденному вами ответу я понял вашу ошибку в формулировке вашего вопроса.
@MisterJojo понял, спасибо
Ответы 3
первая кнопка не заполняет всю ширину из-за того, как 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>
первая кнопка выполняет ровно
100%изwidthразрешенных ей моделью flexBox. чего ты ожидал ?