Блог

Следующий код правильно расширяет max-width div:

 lt;div style="display: flex; flex-direction: column;"gt;  lt;div style="max-width: 500px;"gt;  lt;div style="background-color: red; height: 20px;"gt;lt;/divgt;  lt;/divgt; lt;/divgt;  

Результат:

Однако, когда я устанавливаю какое-либо выравнивание, align-items на самом родительском div, align-self на max-width div и т. Д., maxWidth Оно больше не будет использоваться, а фактическая ширина будет установлена на 0.
Например:

 lt;div style="display: flex; flex-direction: column;"gt;  lt;div style="max-width: 500px; align-self: center"gt;  lt;div style="background-color: red; height: 20px;"gt;lt;/divgt;  lt;/divgt; lt;/divgt;  

Создает пустой экран:

Как мне выровнять div (например, по центру) и сохранить его ширину без изменений? Цель состоит в том , чтобы не прибегать к использованию width , потому что это не будет соответствовать ширине родителя (которая может быть любой). Любое решение, которое сохраняло бы ширину, но не настаивало бы на ее использовании , даже если нет места, как, например, с width , сработало бы.

С align-self:center помощью и flex-direction:column вам нужно установить внутреннюю ширину контейнера , которую я сделал на 100%, и теперь она отображается.

 lt;div style="display: flex; flex-direction: column;background-color:grey"gt;  lt;div style="max-width: 500px; align-self: center; width:100%;background:black;"gt;  lt;div style="background-color: red; height: 20px;"gt;lt;/divgt;  lt;/divgt; lt;/divgt;