質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3072閲覧

IEとクロームはきくのに、ファイヤーフォックスだけpaddingが効きません。 display:flex;をつかうときかなくなると聞いたのですが、 対処方法はないのでしょうか?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/09/03 07:25

IEとクロームはきくのに、ファイヤーフォックスだけpaddingが効きません。
display:flex;をつかうときかなくなると聞いたのですが、
対処方法はないのでしょうか?

https://jsfiddle.net/u9dL5fxd/17/

数年間はまだフレキシブルボックスは使えないでしょうか?

cssの部分はここです。下記のpaddingがファイヤーフォックスのみ聞かないのが上記サンプルで分かりと思います。
.main-copyright-wrap {
padding: 3% 0 6.5% 0;
}

前に質問しましたが解決しないままなので再質問しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/09/03 14:00

コードは少量でもコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、URLにはリンクを張ることができますので、編集よろしくお願いします。
guest

回答2

0

paddingが効きません

仕様です。aKusanoさんのおっしゃるように、flexの要素の中にdivでも置いて、paddingを設定されてはいかがでしょうか。

【html - Flex elements ignore percent padding in Firefox - Stack Overflow】
http://stackoverflow.com/questions/33502702/flex-elements-ignore-percent-padding-in-firefox

【CSS Flexible Box Layout Module Level 1】
https://www.w3.org/TR/css-flexbox-1/#item-margins

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

投稿2016/09/04 04:52

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/09/04 05:22

やっぱりバグなのですね。 まだflexは数年使うべきではないのですかね。 その場合は、float、display:inlineなど横並びはたくさんありますが、 どれが一番良いとお考えですか?
kei344

2016/09/04 05:26

いやだから仕様ですって。挙動を理解したうえで使いたければflex使えばいいでしょ。 あと修正依頼も読んでくださいね。
guest

0

ベストアンサー

flexアイテム自身ではなく、その子要素にpaddingをつけるようにすれば良いかと思われます。

flexboxについては他にもいろいろバグやらなにやらありますので
参考までに。。。
flexboxのバグに立ち向かう

投稿2016/09/03 14:24

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/09/04 00:46

やっぱりバグなのですね。 まだflexは数年使うべきではないのですかね。 その場合は、float、display:inlineなど横並びはたくさんありますが、 どれが一番良いとお考えですか?
aKusano

2016/09/04 05:14

参考サイトには発現条件と回避方法も書かれていますので、 そういうものを活用しながら使えばいいと思います。 横並びにどの技術を使えば良いかは目的や再現したいデザイン、サポート環境等の条件を元に総合的判断するものですので一概にどれがいいとは言えません。
退会済みユーザー

退会済みユーザー

2016/09/04 05:33

ありがとうございます。 display:inlineにすべてすればよいという問題ではないのですね。 また上記サイトのバグ対策をすればすでに実務でflexをつかえるようになっていると考えてよいのですね。
aKusano

2016/09/04 07:09

IE9以下は無視しても良い、もしくはpolyfillスクリプトで対応するという前提であれば、実務でのflexの利用はそろそろ可能だと考えています。 ただ、Android4.3以下はflex-wrapが効かないなど、環境による表示の差異等は多数ありますので、バグ回避対策は必須と思われます。 そのような工数コストをかけてでもflex利用によるメリットの方が上回ると判断するなら利用すれば良いと思います。
退会済みユーザー

退会済みユーザー

2016/09/04 08:55

まだまだバグだらけですね。 確かに、その対応のほうが大変なら他を使うべきかもしれないですね。 そこが対処できればIE9以上なら十分使えそうですね。
退会済みユーザー

退会済みユーザー

2016/09/05 13:16

https://jsfiddle.net/u9dL5fxd/17/ の <header class="header" role="banner"> と 中身のコンテンツとの間にpaddingを入れたい場合、 具体的にどこにpaddingを入れるとよいということでしょうか? つまり中のコンテンツの周りにホワイトスペースを作るためにpaddingを入れているということです。 .header { display: -webkit-box; display: -ms-flexbox; display: flex; } より フレックスアイテムが<div class="company-introduction-wrap">と<div class="main-copyright-wrap"> となるはずなのでそのさらに子要素にpaddingをつけるということですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問