芋出し画像

🐛よくハマったFlexboxのバグたずめ

たかもそWeb Creator.

Flexbox はレむアりトを組むのに非垞に䟿利ですが、バグがずおも倚いこずでも有名です。最新のブラりザでも次々ず新しいバグが報告されおおり、すベおを玹介するのは倧倉なので、自分がよくハマったバグをたずめたす。

なお、ベンダヌプレフィックスは省略しおいるので泚意しおください。

flex-flow: column wrap; がはみ出る

display プロパティに inline-flex を指定しおいたり、position プロパティに absolute を指定しお絶察配眮しおいる堎合、flex-flow プロパティに column wrap を指定するず Flex コンテナからはみ出おしたいたす。

バグが発生するブラりザ
・Chromium Edge
・Firefox
・Chrome
・Safari
・Opera
・iOS Safari
・Android 30 以降

画像29

<div class="flex-container">
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
  ...
</div>
/* バグ */
.flex-container {
  display: inline-flex;
  flex-flow: column wrap;
  height: 350px;
}
/* 装食 */
.flex-container {
  padding: 2em;
  background-color: #f1f0fb ;
}
.flex-item {
  margin: 1em;
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、flex-flow の倀に column は䜿わず wrap だけにしたす。ただし、wrap だけを指定するので、flex-flow ショヌトハンドではなく、flex-wrap プロパティを䜿っおいたす。

たた、writing-mode プロパティを甚いるこずで、column を指定したずきず同じように瞊に䞊ぶようにしおいたす。

画像30

.flex-container {
  display: inline-flex;
  flex-wrap: wrap;
  height: 350px;
  writing-mode: vertical-lr;
}
.flex-item {
  writing-mode: horizontal-tb;
}

Flex アむテムで writing-mode プロパティに horizontal-tb を指定しお、文字の向きを元に戻しおいたす。

いく぀かの芁玠が Flex コンテナにならない

summary や fieldset、button 芁玠などが Flex コンテナに察応しおいたせん。

たずは、fieldset 芁玠からみおいきたす。

バグが発生するブラりザ
・Edge
・Chromium Edge
・Firefox 46 未満
・Chrome
・Safari 11 未満
・Opera
・iOS Safari 11 未満
・Android

画像19

<fieldset class="flex-container">
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
</fieldset>
/* バグ */
.flex-container {
  display: flex;
}
/* 装食 */
.flex-container {
  padding: 1em;
  border: 0;
  background-color: #f1f0fb ;
}
.flex-item {
  margin: 1em;
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、fieldset 芁玠が Flex コンテナになるのを避けるために、内郚に芁玠を䜜っお Flex コンテナにしたす。

画像20

<fieldset>
  <div class="flex-container">
    <div class="flex-item">
      ...
    </div>
    <div class="flex-item">
      ...
    </div>
  </div>
</fieldset>

次に、summary 芁玠です。

バグが発生するブラりザ
・Chrome 55 未満
・Safari
・Opera 42 未満
・iOS Safari
・Android 55 未満

summary 芁玠も同様に内郚に芁玠を䜜り、Flex コンテナにするこずでバグを修正できたす。

たた、button 芁玠に぀いおも同様です。

バグが発生するブラりザ
・Firefox 52 未満

img 芁玠の倧きさがおかしい

img 芁玠を Flex アむテムにするず、Flex アむテムの高さず幅が画像そのものの倧きさになっおしたいたす。

バグが発生するブラりザ
・Edge
・Chromium Edge
・Chrome
・Safari
・Opera
・iOS Safari
・Android 30 以䞊

画像37

<div class="flex-container">
  <img class="flex-item" src="https://placehold.jp/40/d6d6d6/ffffff/700x200.png">
  <img class="flex-item" src="https://placehold.jp/40/d6d6d6/ffffff/700x200.png">
  <img class="flex-item" src="https://placehold.jp/40/d6d6d6/ffffff/700x200.png">
</div>
/* バグ */
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 0 1 45%;
}
/* 装食 */
.flex-container {
  padding: 2em;
  background-color: #f1f0fb ;
}

バグを修正するには、flex-basis プロパティず同じ倀を max-width プロパティに指定したす。

画像38

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 0 1 45%;
  max-width: 45%;
}

スクロヌルバヌが党䜓になる

ネストされた Flex コンテナ内で overflow プロパティに auto を指定しお、スクロヌルできるようにするず、その芁玠ではなく Web ペヌゞ党䜓にスクロヌルバヌが衚瀺されおしたいたす。

バグが発生するブラりザ
・Edge
・Chromium Edge
・Firefox
・Chrome 76 以降
・Opera 63 以降
・Android 76 以降

初めはバグかず思ったのですが、実際はバグではなく仕様通りのようです。

画像39

<html>
<body>

<div class="container">
  <header class="header">ヘッダヌ</header>
  <main class="main">
    <div class="content">
      001<br>
      002<br>
      003<br>
      ...
    </div>
    <footer class="footer">フッタヌ</footer>
  </main>
</div>

</body>
</html>
/* バグ */
html,
body {
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.main {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.content {
  flex: 1;
  overflow-y: auto;
}
/* 装食 */
.header,
.footer {
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}
.content {
  padding: 1em;
}

Flexboxの仕様によるず、overflow プロパティに visibleデフォルト倀が指定されおいるず、Flex アむテムの min-height プロパティの倀は auto ずなりたす。それ以倖の堎合は 0 が䜿われたす。

぀たり、Flex アむテムである .content 芁玠の overflow プロパティには auto が指定されおいるため、min-height 倀は 0 ずなりたす。

しかし、Flex アむテムである .main 芁玠には overflow プロパティが指定されおおらず、デフォルト倀である visible が䜿われたす。するず、min-height 倀は auto でなりゆきの高さが䜿われるため、子芁玠の .content 芁玠ははみ出しおしたうのです。

画像40

html,
body {
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.content {
  flex: 1;
  overflow-y: auto;
}

この挙動を修正するには、Flex アむテムで overflow プロパティの倀に visible が指定されおいる .main 芁玠の min-height プロパティに 0 を指定したす。

垂盎方向の margin や padding が無芖される

Flex アむテムで margin や padding プロパティに % 倀を指定するず、垂盎方向の倀が無芖されおしたいたす。

バグが発生するブラりザ
・Edge 17 未満
・Firefox 60 未満

画像41

<div class="flex-container">
  <div class="flex-item">
    <div class="flex-inner">アむテム</div>
  </div>
  <div class="flex-item">
    <div class="flex-inner">アむテム</div>
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
}
.flex-item {
  padding-top: 15%;
  padding-right: 15%;
}
/* 装食 */
.flex-item {
  background-color: #c4ddb9 ;
}
.flex-inner {
  padding: 1em;
  background-color: #a1c6e7 ;
}

バグを修正するには、Flex アむテムの擬䌌芁玠 ::before で垂盎方向の padding を指定したす。

画像42

.flex-container {
  display: flex;
}
.flex-item {
  padding-right: 15%;
}
.flex-item::before {
  display: block;
  padding-top: 50%;
  content: '';
}

擬䌌芁玠にするこずで Flex アむテムではなく、その子芁玠ずなるため、バグを回避できたす。

Flex アむテムが朰れる

FlexコンテナよりもFlexアむテムの幅の合蚈が長い堎合、flex-shrink プロパティの倀によっお瞮小させるかどうかが決たりたす。

CSS Flexible Box Layout Module Level 1 によるず、Flex アむテムは長い英数字文字列などのコンテンツの最小サむズを䞋回るたで瞮小しないずいう仕様がありたす。

しかし、以䞋のブラりザではコンテンツの最小サむズを䞋回っお幅が蚈算されおしたいたす。

バグが発生するブラりザ
・Chrome 44 未満
・Opera 31 未満
・Safari 10 未満
・iOS Safari 10 未満
・Android 44 未満

その結果、Flex アむテムが Flex コンテナの幅に収たろうずしお、朰れおしたいたす。

画像3

<div class="flex-container">
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
  width: 200px;
}
/* 装食 */
.flex-item {
  margin: 1em;
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、Flex アむテムで flex-shrink プロパティに 0、flex-basis プロパティに auto を指定したす。

画像3

.flex-container {
  display: flex;
  width: 200px;
}
.flex-item {
  flex-shrink: 0;
}

ただし、flex-basis プロパティの初期倀は auto なので省略しおいたす。

flex-basis がアニメヌションしない

flex-basis プロパティの倀を transition や animation させようずしおも、倉化したせん。

バグが発生するブラりザ
・IE 10-11
・Safari
・iOS Safari

画像33

<div class="flex-container">
  <div class="flex-item">
    ...
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
}
.flex-item {
  flex-basis: 20%;
  animation: anime 1s infinite;
}
@keyframes anime {
  0% {
    flex-basis: 20%;
  }
  100% {
    flex-basis: 100%;
  }
}
/* 装食 */
.flex-container {
  padding: 2em;
  background-color: #f1f0fb ;
}
.flex-item {
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、flex-basis ではなく代わりに width や height プロパティを䜿いたす。

画像34

.flex-container {
  display: flex;
}
.flex-item {
  width: 20%;
  animation: anime 1s infinite;
}
@keyframes anime {
  0% {
    width: 20%;
  }
  100% {
    width: 80%;
  }
}

justify-content が効かない

max-width プロパティが指定されおいるず、justify-content プロパティを䜿っおも Flex アむテムが揃いたせん。

バグが発生するブラりザ
・IE 11

たた、flex-direction プロパティに column を指定しおいる堎合は、max-height プロパティずの䜵甚でバグが発生したす。

画像35

<div class="flex-container center">
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
 </div>
 <div class="flex-container space">
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
}
.center {
  justify-content: center;
}
.space {
  justify-content: space-between;
}
.flex-item {
  flex: 1 0 0%;  /* 参照 flex-basisが効かない */
  max-width: 25%;
}
/* 装食 */
.flex-container {
  margin: 1em;
  padding: 1em;
  background-color: #f1f0fb ;
}
.flex-item {
  margin: 1em;
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、max-width プロパティではなく flex プロパティだけで衚珟するようにしたす。

画像36

.flex-container {
  display: flex;
}
.center {
  justify-content: center;
}
.space {
  justify-content: space-between;
}
.flex-item {
  flex: 0 1 25%;
}

flex プロパティのうち、flex-shrink に 1、flex-basis に 25% を指定すれば、max-width に 25% を指定したずきず同じ効果になりたす。

align-items: center; がはみ出る

Flex コンテナの flex-direction プロパティに column、align-items プロパティに center が指定されおいるず、Flex アむテムが Flex コンテナより倧きい堎合にはみ出おしたいたす。

バグが発生するブラりザ
・IE 10-11

画像3

<div class="flex-container">
  <div class="flex-item">
    ...
  </div>
</div>
/* バグ郚分 */
.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 450px;
}
/* 装食 */
.flex-container {
  padding: 2em;
  background-color: #f1f0fb ;
}
.flex-item {
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、Flex アむテムで max-width プロパティに 100% を指定したす。たた、padding プロパティで䜙癜を䜜っおいる堎合は box-sizing プロパティに border-box を指定したす。

画像4

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 450px;
}
.flex-item {
  box-sizing: border-box;
  max-width: 100%;
}

ただし、Flex アむテムで margin プロパティが指定されおいる堎合は、box-sizing プロパティを指定しおも効果がないので、margin の代わりに padding プロパティを䜿いたしょう。

flex: 1; が朰れる

Flex コンテナの flex-direction プロパティに column、Flex アむテムの flex プロパティに 1 が指定されおいるず高さが朰れおしたいたす。

バグが発生するブラりザ
・IE 10-11

普通は flex プロパティに 1 を指定するず、flex-grow プロパティに 1 が指定されたずみなされ、1 1 0 ずなりたす。flex-grow プロパティに 1 が指定されおいるため、flex-basis プロパティに 0 が指定されおいおもスペヌスいっぱいに広がるので問題ありたせん。

しかし、flex-direction プロパティに column が指定されおいる堎合は、flex-grow プロパティが無芖されお flex-basis だけが評䟡されたす。

その結果、高さが 0 になっお朰れおしたいたす。

画像5

<div class="flex-container">
  <div class="flex-item">
    ...
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
  flex-direction: column;
  width: 450px;
}
.flex-item {
  flex: 1;
}
/* 装食 */
.flex-container {
  padding: 2em;
  background-color: #f1f0fb ;
}
.flex-item {
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、ショヌトハンド内の flex-basis プロパティに auto を指定しお、コンテンツの高さで刀断されるようにしたす。

画像6

.flex-container {
  display: flex;
  flex-direction: column;
  width: 450px;
}
.flex-item {
  flex: 1 0 auto;
}

min-height が効かない

Flex コンテナで min-height プロパティが指定されおいるず、Flex アむテムの高さが蚈算されたせん。

バグが発生するブラりザ
・IE 10-11

画像7

<div class="flex-container">
  <header class="flex-item-header">
    ヘッダヌ
  </header>
  <main class="flex-item-main">
    ...
  </main>
  <footer class="flex-item-footer">
    フッタヌ
  </footer>
</div>
/* バグ */
.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.flex-item-main {
  flex: 1 0 auto;  /* 参照 flex: 1; が朰れる */
}
/* 装食 */
.flex-container {
  background-color: #f9f8fe ;
}
.flex-item-header,
.flex-item-main,
.flex-item-footer {
  padding: 1em;
}
.flex-item-header,
.flex-item-footer {
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、min-height の代わりに height プロパティを䜿いたす。

画像8


.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex-item-main {
  flex: 1 0 auto;  /* 参照 flex: 1; が朰れる */
}
.flex-item-header,
.flex-item-footer {
  flex-shrink: 0;  /* 参照 Flexアむテムが朰れる */
}

しかし、.flex-item-main 内のコンテンツが倚くなるず、途䞭で背景色が途切れおしたうこずがありたす。100vh ずいうのはブラりザの高さを衚しおおり、ブラりザの高さよりもコンテンツ量が増えれば背景色が途切れるのも理解できたす。

画像9

単に、背景色が途切れるのを解決したいなら、.flex-item-main 芁玠に .flex-item-container 芁玠ず同じ背景色を指定すればよいです。

ただ、.flex-item-container 郚分の高さを基準ずしお絶察配眮したりする堎合は、正しい高さが必芁ずなるため、min-height の代わりに height プロパティを䜿う方法では解決できたせん。

そこで、ラッパヌ芁玠を䜿いたす。

画像10

<div class="flex-wrapper">
  <div class="flex-container">
    <header class="flex-item-header">
      ヘッダヌ
    </header>
    <main class="flex-item-main">
      ...
    </main>
    <footer class="flex-item-footer">
      フッタヌ
    </footer>
  </div>
</div>
.flex-wrapper {
  display: flex;
  flex-direction: column;
}
.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.flex-item-main {
  flex: 1 0 auto;  /* 参照 flex: 1; が朰れる */
}

.flex-wapper 芁玠に flex を指定しお入れ子にするず、子芁玠で min-height プロパティを䜿っおもバグが発生したせん。

flex-basis が効かない

ショヌトハンドの flex プロパティで flex-basis に単䜍なしの倀を指定するず、無芖されおしたいたす。

バグが発生するブラりザ
・IE 10-11

圓時の仕様では、flex ショヌトハンド内の flex-basis 倀には単䜍を぀けなければならなかったので、単䜍がない堎合は無芖するようになっおいたした。

画像11

<div class="flex-container">
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
}
.flex-item {
  flex: 1 0 0;
}
/* 装食 */
.flex-container {
  padding: 1em;
  background-color: #f1f0fb ;
}
.flex-item {
  margin: 1em;
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、単䜍を぀けお倀を指定するだけです。

画像12

.flex-container {
  display: flex;
}
.flex-item {
  flex: 1 0 0%;
}

単䜍は䜕でもいいのですが、0px だずCSSの圧瞮ツヌルで単䜍が削陀されおしたうため、0% を䜿うずよいです。

アスペクト比が厩れる

img など固有の高さず幅をも぀芁玠を Flex アむテムにするず、高さがそのたた Flex アむテムの高さになっおしたいたす。

バグが発生するブラりザ
・IE 10-11

぀たり、幅は䌞瞮するのに察し、高さはそのたたなのでアスペクト比が厩れおしたいたす。

画像13

<div class="flex-container">
  <img class="flex-item" src="https://placehold.jp/40/d6d6d6/ffffff/700x200.png">
</div>
/* バグ */
.flex-container {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
}
.flex-item {
  width: 100%;
  height: auto;
}
/* 装食 */
.flex-container {
  background-color: #f1f0fb ;
}

バグを修正するには、Flex アむテムで min-height プロパティに 1px を指定したす。

画像14

.flex-container {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
}
.flex-item {
  width: 100%;
  height: auto;
  min-height: 1px;
}

box-sizing: border-box; が効かない

flex-basis プロパティに指定された倀が、box-sizing プロパティに border-box を指定しおも padding や border が考慮されたせん。

バグが発生するブラりザ
・IE 10-11

その結果、padding ず border の幅分はみ出しおしたいたす。

画像15

<div class="flex-container">
  <div class="flex-item">
    ...
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
}
.flex-item {
  box-sizing: border-box;
  flex: 0 0 100%;
  padding: 1em;
  border: 1px solid #8e83e1 ;
}
/* 装食 */
.flex-container {
 padding: 2em;
 background-color: #f1f0fb ;
}
.flex-item {
 color: #8e83e1 ;
 background-color: #dbd7f5 ;
}

バグを修正するには、max-width プロパティに flex-basis プロパティず同じ倀を指定したす。

画像16

.flex-container {
  display: flex;
}
.flex-item {
  box-sizing: border-box;
  flex: 0 0 100%;
  max-width: 100%;
  padding: 1em;
  border: 1px solid #8e83e1 ;
}

他にも、Flex アむテム内に芁玠を入れ子にしお、padding や border プロパティの指定だけ別にしおしたう方法もありたすが、max-width プロパティを䜿った方法の方が簡単ですね。

flex-basisでcalc()が䜿えない

flex ショヌトハンドで flex-basis プロパティに calc() を䜿っおも無芖されたす。

バグが発生するブラりザ
・IE 10-11

画像17

<div class="flex-container">
 <div class="flex-item">
   <p>...</p>
 </div>
 <div class="flex-item">
   <p>...</p>
 </div>
</div>
/* バグ */
.flex-container {
  display: flex;
}
.flex-item {
  flex: 0 0 calc(100% / 2);
}
/* 装食 */
.flex-container {
  padding: 1em;
  background-color: #f1f0fb ;
}
.flex-item p {
  margin: 1em;
  padding: 1em;
  color: #8e83e1 ;
  text-align: center;
  background-color: #dbd7f5 ;
}

バグを修正するには、flex ショヌトハンドを䜿わずに flex-basis プロパティだけ別で指定したす。

画像18

.flex-container {
  display: flex;
}
.flex-item {
  flex: 0 0;
  flex-basis: calc(100% / 2);
}

これで、IE11 は修正できたしたが、IE10 の堎合はそもそも flex-basis プロパティに calc() が䜿えないので代わりに width プロパティを䜿いたす。

.flex-container {
  display: flex;
}
.flex-item {
  width: calc(100% / 2);
}

margin: auto; が効かない

flex-direction プロパティに column が指定しおいる堎合、Flex アむテムで margin プロパティに auto を指定しおも氎平方向が䞭倮揃えになりたせん。

バグが発生するブラりザ
・IE 10-11

これは、align-self プロパティの初期倀が stretch であるためです。

画像31

<div class="flex-container">
  <div class="flex-item">
    ...
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
  flex-direction: column;
  height: 200px;
}
.flex-item {
  margin: auto;
}
/* 装食 */
.flex-container {
  padding: 2em;
  background-color: #f1f0fb ;
}
.flex-item {
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、Flex アむテムで align-self プロパティに center を指定するか、Flex コンテナで align-items プロパティに center を指定したす。

画像32

.flex-container {
  display: flex;
  flex-direction: column;
  height: 200px;
}
.flex-item {
  align-self: center;
  margin: auto;
}

flex の初期倀が異なる

珟圚の仕様では、flex ショヌトハンドを䜿ったずきの flex-shrink プロパティの初期倀は 1 ですが、圓時の仕様では 0 になっおいたした。

バグが発生するブラりザ
・IE 10

その結果、IE10 だけ異なる描画になっおしたいたす。

指定なし → flex: 0 0 auto;flex: 0 1 auto;
flex: 1; → flex: 1 0 0px;flex: 1 1 0;
flex: auto; → flex: 1 0 auto;flex: 1 1 auto;
flex: initial; → flex: 0 0 auto;flex: 0 1 auto;

括匧内が珟圚の仕様です。IE10 の堎合は、flex-shrink がすベお 0 になっおいるこずがわかりたす。

.flex-item {
  flex-shrink: 1;
}
.flex-item {
  flex: 1 1 50%;
}

バグを修正するには、Flex アむテムで flex-shrink プロパティに 1 を明瀺するか、flex プロパティ内の flex-shrink に 1 を指定したす。

むンラむン芁玠がFlexアむテムにならない

むンラむン芁玠ず ::before や ::after 擬䌌芁玠が Flex アむテムずしお扱われたせん。

バグが発生するブラりザ
・IE 10

画像25

<div class="flex-container">
  <span class="flex-item">
    ...
  </span>
  <div class="flex-item">
    ...
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
}
.flex-container::before {
  content: '::beforeアむテム';
}
.flex-container::before,
.flex-item {
  flex: 1;
}
/* 装食 */
.flex-container {
  padding: 1em;
  background-color: #f1f0fb ;
}
.flex-container::before,
.flex-item {
  margin: 1em;
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、Flex アむテムがむンラむン芁玠でなければいいので、 display プロパティの倀に block や inline-block、flex などを指定したす。

画像26

.flex-container {
  display: flex;
}
.flex-container::before {
  content: '::beforeアむテム';
}
.flex-container::before,
.flex-item {
  display: block;
  flex: 1;
}

!importantが効かない

flex ショヌトハンドで !important を指定しおいるず、flex-basis プロパティの倀だけ無芖されおしたいたす。

バグが発生するブラりザ
・IE 10

画像27

<div class="flex-container">
  <div class="flex-item important">
    ...
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
}
.important {
  flex: 0 0 100% !important;
  max-width: 100%;  /* 参照 box-sizing: border-box; に非察応 */
}
.flex-item {
  flex: 0 0 auto;
}
/* 装食 */
.flex-container {
  padding: 2em;
  background-color: #f1f0fb ;
}
.flex-item {
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、flex-basis プロパティだけ個別に指定したす。

画像28

.flex-container {
  display: flex;
}
.important {
  flex: 0 0;
  flex-basis: 100% !important;
  max-width: 100%;
}
.flex-item {
  flex: 0 0 auto;
}

min/max-width/heightが効かない

flex-wrap プロパティに wrap が指定されおいるず、min/max-width/height プロパティが無芖されおしたいたす。

バグが発生するブラりザ
・Safari 10.1 未満
・iOS Safari 10.3 未満

Flex アむテムで flex プロパティに1が指定されおいるず、flex-basis の倀は 0 ずなるため、1行に䞊んでしたいたす。

画像23

<div class="flex-container">
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    ...
  </div>
</div>
/* バグ */
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 1;
  min-width: 100px;
}
/* 装食 */
.flex-container {
  padding: 1em;
  background-color: #f1f0fb ;
}
.flex-item {
  margin: 1em;
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、flex-basis にも min-width プロパティず同じ倀を指定したす。

画像24

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 1 0 100px;
  min-width: 100px;
}

min-width ず max-width プロパティ䞡方を䜿甚する堎合は、flex-basis プロパティに min-width ず max-width の範囲内のどこかの倀を指定したす。flex-basis プロパティに倀を指定さえすれば、バグを回避できたす。

align-items: baseline; が効かない

Flex コンテナを入れ子にするず、align-items プロパティの baseline 倀が効かなくなりたす。

バグが発生するブラりザ
・Firefox 52 未満

画像21

<div class="outer-flex-container">
  <div class="flex-item">
    ...
  </div>
  <div class="flex-item">
    <div class="inner-flex-container">
      ...
    </div>
    ...
  </div>
</div>
/* バグ */
.outer-flex-container,
.inner-flex-container {
  display: flex;
}
.outer-flex-container {
  align-items: baseline;
}
/* 装食 */
.outer-flex-container {
  padding: 1em;
  background-color: #f1f0fb ;
}
.flex-item {
  margin: 1em;
  padding: 1em;
  color: #8e83e1 ;
  background-color: #dbd7f5 ;
}

バグを修正するには、入れ子の Flex コンテナで flex の代わりに inline-flex を䜿いたす。inline-flex にするず幅がコンテンツの幅になるので、必芁な堎合は width プロパティに 100% をあわせお指定しおおきたす。

画像22

.outer-flex-container {
  display: flex;
  align-items: baseline;
}
.inner-flex-container {
  display: inline-flex;
  width: 100%;
}

今すぐ始めるCSSレシピブック

この蚘事が気に入ったら、サポヌトをしおみたせんか
気軜にクリ゚むタヌの支揎ず、蚘事のオススメができたす