html — Flexbox не работает с кнопками или элементами fieldset

Question

html — Flexbox не работает с кнопками или элементами fieldset

Я пытаюсь центрировать внутренние элементы <button>тег с флексбоксом justify-content: center, Но Safari не центрирует их. Я могу применить тот же стиль к любым другим тегам, и он работает как задумано (см. <p>-тег). Только кнопка выровнена по левому краю.

Попробуйте Firefox или Chrome, и вы увидите разницу.

Есть ли какой-либо стиль пользовательского агента, который я должен перезаписать? Или любое другое решение этой проблемы?

div {
display: flex;
flex-direction: column;
width: 100%;
}
button, p {
display: flex;
flex-direction: row;
justify-content: center;
}

<div>
<button>
<span>Test</span>
<span>Test</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>

66

css css3 flexbox html safari

Решение

Другие решения

Вот мой самый простой взлом.

button::before,
button::after {
content: '';
flex: 1 0 auto;
}

12

Источник

По вопросам рекламы [email protected]

Accepted Answer

Проблема в том, что <button> Элемент не предназначен, чтобы быть гибким (или сеточным) контейнером.

На момент написания этой статьи браузеры на основе Webkit (Chrome и Safari) придерживались этого принципа разработки. Firefox и Edge нет. Я не тестировал другие браузеры.

Поэтому у вас не должно возникнуть проблем с <button> элемент гибкий (или сетка) контейнер в Firefox и Edge. Но не ожидайте, что это будет работать в Chrome или Safari.

Это поведение в настоящее время относится как минимум к трем элементам:

<button>
<fieldset>
<legend>

Я теоретизирую, но я считаю, что идея состоит в том, чтобы поддерживать уровень здравого смысла при оформлении элементов HTML. Например, боги HTML хотели, чтобы авторы не превратили кнопку в таблицу.

Однако, по крайней мере, в этом случае простой и легкий обходной путь:

Оберните содержимое button в spanи сделать span гибкий контейнер.

Скорректированный HTML (завернутый button содержание в span)

<div>
<button>
<span><!-- using a div also works but is not valid HTML -->
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>

Скорректированный CSS (таргетинг span)

button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}

Пересмотренный Демо

ПРИМЕЧАНИЕ: хотя они не могут быть гибкими контейнерами, button элементы могут быть гибкими.

Рекомендации:

97