Что делает ширина CSS: 100% в гибком элементе?
Может кто-нибудь объяснить, как работает этот CSS?
Это мой HTML-код:
.wrapper {
display: flex;
border: 1px solid black;
width: fit-content;
margin: 0 auto;
}
.item-4, .item-5 {
border: 1px solid red;
background: white;
}<div class = "wrapper">
<div class = "item-4">
<h2>Item 4</h2>
<button>Click me</button>
</div>
<div class = "item-5">Item 5 QR code</div>
</div>Подобный код приведет к тому, что поле .wrapper будет центрировано по центру экрана. Его гибкие элементы: ширина Item-4 и Item-5 также соответствует его содержимому, как и ожидалось.
А ширина коробки .wrapper составляет 174,86 пикселей. посмотрите это изображение
Чего я не понимаю, так это если я добавлю еще один CSS-код:
.item-4 {
width: 100%;
}
Ширина элемента 4 внезапно увеличивается до некоторой ширины. Его ширина составляет 108,3 пикселя. посмотрите это изображение
Как рассчитывается число 108,3 пикселя? Почему, когда я добавляю ширину CSS: 100%, к элементу-4 добавляется еще немного места?
Ответы 1
Вот пошаговая иллюстрация, чтобы понять, что происходит:
.wrapper {
display: flex;
border: 1px solid black;
width: fit-content;
margin: 0 auto;
}
.item-4,
.item-5 {
border: 1px solid red;
background: white;
}<div class = "wrapper">
<div class = "item-4">
<h2>Item 4</h2>
<button>Click me</button>
</div>
<div class = "item-5">Item 5 QR code</div>
</div>
<p>adding width: 100% and flex-shrink: 0;</p>
<div class = "wrapper">
<div class = "item-4" style = "width: 100%;flex-shrink:0;">
<h2>Item 4</h2>
<button>Click me</button>
</div>
<div class = "item-5" style = "flex-shrink:0;">Item 5 QR code</div>
</div>
<p>remove the flex-shrink: 0 to keep the default shrink behavior</p>
<div class = "wrapper">
<div class = "item-4" style = "width: 100%;">
<h2>Item 4</h2>
<button>Click me</button>
</div>
<div class = "item-5">Item 5 QR code</div>
</div>Таким образом, элемент 4 попытается занять всю ширину родительского элемента (используя ширину: 100%), но это вытолкнет следующий элемент наружу, поэтому поведение сжатия по умолчанию уменьшит ширину, чтобы они оба поместились внутри контейнера.
Когда элемент 5 находится снаружи, мы имеем переполнение, равное ширине элемента 5. Алгоритм сжатия пропорционально удалит эту ширину из обоих элементов.
Я подозреваю, что
widthпереопределяет некоторые свойстваflex, и тогда эта проблема вступает в силу. Мне интересно, почему вы ставитеwidth: 100%? Что ты пытаешься сделать?