버튼 또는 필드 셋 요소에서 작동하지 않는 Flexbox

버튼 또는 필드 셋 요소에서 작동하지 않는 Flexbox

---

나는- <button>태그 의 내부 요소 를 flexbox의 justify-content: center. 그러나 Safari는 그들을 중심에 두지 않습니다. 다른 태그에 동일한 스타일을 적용 할 수 있으며 의도 한대로 작동합니다 ( <p>-tag 참조 ). 버튼 만 왼쪽 정렬됩니다.

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>

그리고 jsfiddle : http://jsfiddle.net/z3sfwtn2/2/

---

문제

문제는 일부 브라우저가 <button>요소를 플렉스 (또는 그리드) 컨테이너로 아직 설계하지 않았다는 것입니다 .

좀 더 기술적으로는 일부 브라우저에서 <button>요소는 및 display에서 전환하는 것 외에 값 변경을 허용하지 않습니다 . 이것은 요소도, 일 수 없음을 의미 합니다.blockinline-block<button><table>

이 동작은 <fieldset>및 <legend>요소 에도 적용됩니다 .

자세한 내용은 아래 버그 보고서를 참조하세요.

참고 : 플렉스 컨테이너는 될 수 없지만 <button>요소는 플렉스 항목이 될 수 있습니다.

---

해결책

이 문제에 대한 간단하고 쉬운 브라우저 간 해결 방법이 있습니다.

의 내용 감싸 buttonA의를 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;
}

수정 된 데모

---

참조 / 버그 보고서

Flexbox on a <button> blockifies the contents but doesn't establish a flex formatting context

User (Oriol Brufau): The children of the <button> are blockified, as dictates the flexbox spec. However, the <button> seems to establish a block formatting context instead of a flex one.

User (Daniel Holbert): That is effectively what the HTML spec requires. Several HTML container-elements are "special" and effectively ignore their CSS display value in Gecko [aside from whether it's inline-level vs. block-level]. <button> is one of these. <fieldset> & <legend> are as well.

Add support for display:flex/grid and columnset layout inside <button> elements

User (Daniel Holbert):

<button> is not implementable (by browsers) in pure CSS, so they are a bit of a black box, from the perspective of CSS. This means that they don't necessarily react in the same way that e.g. a <div> would.

This isn't specific to flexbox -- e.g. we don't render scrollbars if you put overflow:scroll on a button, and we don't render it as a table if you put display:table on it.

Stepping back even further, this isn't specific to <button>. Consider <fieldset> and <table> which also have special rendering behavior.

And old-timey HTML elements like <button> and <table> and <fieldset> simply do not support custom display values, other than for the purposes of answering the very high-level question of "is this element block-level or inline-level", for flowing other content around the element.

Also see:

• Flexbug #9: Some HTML elements can't be flex containers
• 10. Some HTML elements can't be grid containers

---

Here is my simplest hack.

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

참고URL : https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-or-fieldset-elements