왜 안되나요?왜 안되나요?왜 안되나요?플렉스 용기인가요?

왜 안되나요?

플렉스 용기인가요?

저는 스타일링을 하려고 했습니다.fieldset 붙은 display: flex그리고.display: inline-flex.

효과가 : 는 는 .flex은처럼 block,그리고.inline-flex은처럼 inline-block.

이것은 파이어폭스와 크롬 모두에서 발생하지만, 이상하게도 IE에서 작동합니다.

벌레인가요?찾을 수가 없었습니다.fieldsetHTML5나 CSS Flexible Box Layout 사양에서 특별한 동작이 있어야 합니다.

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

버그 984869에 따르면 - 버튼 요소에 대해 작동하지 않습니다.

<button>순수 CSS에서는 (브라우저에서는) 구현할 수 없기 때문에 CSS의 관점에서는 블랙박스에 불과합니다.Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ<div>그럴 것이다.

것이 를 들어,은 된 이 에만 이 된 은 에만 예를 들어 스크롤바를 입력하는 경우에는 렌더링하지 않습니다.overflow:scroll튼,고이로지다에u다지로튼ntf,at'tnaesd,에고을는display:table그 위에

한 더 물러선 로 이 한 이 한 <button>.<fieldset> 또한 특별한 렌더링 동작을 제공합니다.

data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>

이런 경우에 크롬은 우리에게 동의하고 그들을 무시합니다.flex디스플레이입니다 모드 ("abc가 결국 된다는 .("abc"와 "def"가 결국 수직으로 쌓이게 된다는 사실에서 드러난 바와 같이)그들이 당신이 기대하는 것을 하게 되었다는 사실은<button style="display:flex">구현 세부사항 때문일 가능성이 높습니다.

Gecko의에서 Gecko 의 에서 로 는 로 는 에서 의 <button>(그리고<fieldset>, 그리고 ) 특정 프레임 클래스(따라서 하위 요소를 배치하는 특정 방식)를 갖는 것으로서, 그에 관계없이.display소유물.

아이들을 특정 레이아웃 모드로 안정적으로 크로스 브라우저 방식으로 배치하고 싶다면, 버튼 안에 랩퍼-디브를 사용하는 것이 최선입니다.<fieldset>.

따라서 해당 버그는 "resolved invalid"로 표시되었습니다.

현재 "확인되지 않은" 버그 1047590도 있습니다.

---

좋은 소식:Firefox 46+는 다음을 위해 Flexbox를 구현합니다.<fieldset>. 버그 1230207 참조.

이것이 크롬과 파이어폭스의 버그일 수도 있다는 것을 알았습니다.legend그리고.fieldset교체된 요소입니다.

보고된 버그:

Bug Chrome (v86 이후 고정)
Bug Firefox(v46 이후 고정)

가능한 해결책:

가능한 해결책은 다음과 같습니다.<div role="group"> CSS HTML로 하기, CSS기에서div[role='group']

---

갱신하다

Chrome 버전 83 button함께 일할 수 있습니다.display: inline-grid/grid/inline-flex/flex 수 , 를 를 .

button {
  display: inline-flex;
  height: 2rem;
  align-items: flex-end;
  width: 4rem;
  -webkit-appearance: none;
  justify-content: flex-end;
}

<!-- 

The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. 
 
-->
<button>Hi</button>
<input type="button" value="Hi">

크롬 버그를 시동하여 버그 우선 순위를 높입니다.

이것은 크롬의 버그입니다.이 문제에 별을 추가하여 수정할 우선 순위를 높이십시오. https://bugs.chromium.org/p/chromium/issues/detail?id=375693

그동안 저는 이 문제를 해결하는 방법을 보여주기 위해 이 세 가지 코드 펜 예를 만들었습니다.예를 들어 CSS Grid를 사용하여 제작되지만 flexbox에 대해서는 동일한 기술을 사용할 수 있습니다.

전설 대신 아리아로 표시된 것을 사용합니다.

이것이 문제를 해결하는 더 적절한 방법입니다.단점은 모든 가짜 범례 요소에 적용되는 고유 ID를 생성해야 한다는 것입니다.

https://codepen.io/daniel-tonon/pen/vaaGzZ

<style>
.flex-container {
    display: flex;
}
</style>

<fieldset aria-labelledby="fake-legend">
    <div class="flex-container">
        <div class="flex-child" id="fake-legend">
            I am as good accessibilty wise as a real legend
        </div>

        ...

    </div>
</fieldset>

필드 집합 및 범례 대신 role="group" 및 아리아-바이 사용

의 높이까지 할 수 그 에는 를 해야 을 할 에게 의 을 까지 할 해야 을 를 role="group"에 대신에<fieldset>

https://codepen.io/daniel-tonon/pen/BayRjGz

<style>
.flex-container {
    display: flex;
}
</style>

<div role="group" class="flex-container" aria-labelledby="fake-legend">
    <div class="flex-child" id="fake-legend">
        I am as good accessibilty wise as a real legend
    </div>

    ...

</div>

스타일링 목적으로 가짜 중복 범례 만들기

이것이 훨씬 더 까다로운 방법입니다.여전히 접근이 가능하지만, 이런 식으로 할 때 신분증을 다룰 필요는 없습니다.주된 단점은 실제 전설 요소와 가짜 전설 요소 사이에 중복되는 내용이 발생한다는 것입니다.

https://codepen.io/daniel-tonon/pen/zLLqjY

<style>
.screen-reader-only {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.flex-container {
    display: flex;
}
</style>

<fieldset>
    <legend class="screen-reader-only">
        I am a real screen-reader accessible legend element
    </legend>

    <div class="flex-container">
        <div class="flex-child" aria-hidden="true">
            I am a fake legend purely for styling purposes
        </div>

        ...

    </div>
</fieldset>

범례는 직접 종속 변수여야 합니다.

처음에 직접 이 문제를 해결하려고 할 때는 아마도 다음을 시도할 것입니다.

<!-- DO NOT DO THIS! -->
<fieldset>
    <div class="flex-container">
        <legend class="flex-child">
            Broken semantics legend text
        </legend>

        ...

    </div>
</fieldset>

당신은 그것이 효과가 있다는 것을 알게 될 것이고, 그리고 나서 당신은 아마도 그것을 다시 생각하지 않고 넘어갈 것입니다.

문제는 필드 세트와 범례 사이에 디브 래퍼를 넣는 것이 두 요소의 관계를 깨뜨린다는 것입니다.이것은 필드 집합/전설의 의미론을 깨뜨립니다.

이렇게 함으로써 애초에 필드셋/레전드를 사용하려는 모든 목적을 달성한 것입니다.

또한 필드 집합에 범례를 부여하지 않으면 필드 집합을 사용하는 것이 큰 의미가 없습니다.

으로 는 는 으로 <fieldset>,도 아니다<button>,도 아니다<textarea>적절히 사용할 수 있는display:flex또는 상속된 속성을 선택합니다.

다른 사람들이 이미 언급했듯이 버그가 보고되었습니다.순서를 flexbox여는우예를를(예: :order:2), 를 로 로 를 flexbox에서 실제 레이아웃과 치수를 제어하려면 입력 컨트롤 대신 div를 사용하는 것을 고려해 볼 수 있습니다.

<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

파이어폭스, 크롬 및 사파리에 필드 세트에 버그가 있는 것 같기 때문에 역할 그룹을 사용해야 할 수 있습니다.그러면 CSS의 셀렉터는 단순히

div[role='group'], div {
    display: flex;
    border: 1px solid;
}

편집: 다음은 다른 사람들도 겪고 있는 몇 가지 문제입니다.

375693호

262679호

디바를 추가로 넣을 수 있습니다.<fieldset>다음과 같은 소품을 사용합니다.

flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}

원래 질문에 대한 대답: 네, 버그이지만 질문할 당시에는 잘 정의되어 있지 않았습니다.

이제 필드셋에 대한 렌더링이 더 잘 정의되었습니다. https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements

에서, 에서,flexbox위에fieldset이제 효과가 있습니다.크롬에는 아직 없습니다.(https://bugs.chromium.org/p/chromium/issues/detail?id=375693 참조)

또한 2018년에 개선된 사양에 대해서는 https://blog.whatwg.org/the-state-of-fieldset-interoperability 을 참조하십시오.

언급URL : https://stackoverflow.com/questions/28078681/why-cant-fieldset-be-flex-containers