Почему не может быть гибких контейнеров?

Question

Почему не может быть гибких контейнеров?

я пытался стиль a fieldset элемент display: flex и display: inline-flex.

однако, это не работает: flex вели себя как block и inline-flex вели себя как inline-block.

это происходит как на Firefox и Chrome, но странно это работает на IE.

это баг? Я не мог найти это fieldset должно иметь какое-либо особое поведение, ни в HTML5, ни в CSS гибкий макет коробки характеристики.

fieldset, div {

    display: flex;

    border: 1px solid;

}

<fieldset>

    <p>foo</p>

    <p>bar</p>

</fieldset>

<div>

    <p>foo</p>

    <p>bar</p>

</div>

623 5

html css css3 flexbox

5 ответов:

Comments

Ничего не найдено.

Oriol · Accepted Answer · 2015-12-20 06:21:48

по данным ошибка 984869 -display: flex не работает для элементов кнопка,
<button> не реализуется (браузерами) в чистом CSS, поэтому они являются немного черного ящика, с точки зрения CSS. Это означает, что они не обязательно реагировать так же, как, например, a <div> будет.

это не относится к flexbox -- например, мы не визуализируем полосы прокрутки, если вы ставите overflow:scroll на кнопке, и мы не визуализируем его как таблица, Если вы ставите display:table на нем.

отступив еще дальше, это не относится к <button>. Считать <fieldset>~~и <table>~~ которые также имеют специальное поведение рендеринга:
data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>
в этих случаях Chrome соглашается с нами и игнорирует flex режим отображения. (как показал тот факт, что "abc" и "def" заканчиваются укладывается вертикально). Тот факт, что они делают то, что ты делаешь ожидая на <button style="display:flex"> скорее всего, просто из-за деталь реализации.

в реализации кнопки геккона, мы жестко<button> (и <fieldset>,~~и <table>~~) как имеющие определенный класс кадров (и, следовательно,, конкретный способ выкладки дочерних элементов), независимо от display собственность.

если вы хотите надежно иметь детей надежно аранжированных В а особый режим макета в кросс-браузерной моде, ваш лучший выбор используйте обертку-div внутри кнопки, как нужно внутри из ~~a <table> или~~ a <fieldset>.
поэтому эта ошибка была отмечена как"разрешенная недопустимая".

есть еще ошибка 1047590 -display: flex; не работает <fieldset>, в настоящее время "неофициальный".

хорошие новости: Firefox 46 + реализует Flexbox для <fieldset>. Смотрите ошибка 1230207.

dippas · Accepted Answer · 2015-01-22 01:32:47

я узнаю, что это может быть ошибка в Chrome и Firefox, где legend и fieldset are замена элементов.

Ошибки:

Ошибка Chrome
Ошибка Firefox

возможное решение:

возможный обходной путь будет использовать <div role="group"> в HTML, и применение в CSS div[role='group'] в качестве селектора.

paceaux · Accepted Answer · 2015-01-22 18:08:23

по моему опыту, я обнаружил, что ни <fieldset>, ни <button>, ни <textarea> может правильно использовать display:flex или унаследованных свойств.

как уже упоминалось, были зарегистрированы ошибки. Если вы хотите использовать flexbox для управления заказом (например order:2), то вам нужно будет обернуть элемент в div. Если вы хотите, чтобы flexbox контролировал фактическую компоновку и размеры, то вы можете рассмотреть возможность использования div вместо элемента управления вводом (который воняет, я знаю).

SharpCode · Accepted Answer · 2015-01-22 01:30:44

<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>
возможно, потребуется использовать role-group, потому что firefox, chrome и я думаю, что у safari есть ошибка с наборами полей. Тогда селектор в CSS будет просто
div[role='group'], div {
    display: flex;
    border: 1px solid;
}
Edit: вот некоторые проблемы, которые испытывают и другие люди.

выпуск 375693

выпуск 262679

Jemy · Accepted Answer · 2017-09-07 01:46:58

вы можете поставить дополнительный div в <fieldset> со следующими реквизитами:
flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}