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

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

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

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

Q&A

解決済

1回答

10437閲覧

iOSだけflex-boxがきかない

totocalcio

総合スコア7

CSS

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

0グッド

0クリップ

投稿2019/10/03 03:48

編集2019/10/03 03:53

前提・実現したいこと

要素を横並びにする。flex-boxじゃなくてもいいのですが、下記の3点を同時に実現したいです。
①要素を横並びにする。
②各要素はそれぞれ上下中央揃え
③1つの要素は高さ幅固定

現在の状況

イメージ説明
イメージ説明

該当のソースコード

html

1<details> 2 <summary> 3 <span>1</span>タイトル 4 </summary> 5 <p>内容</p> 6</details>

css

1details span{ 2 width: 40px; 3 height: 40px; 4 background: #fff; 5 font-size: 20px; 6 border-radius: 50px; 7 margin-right: 17px; 8 display: flex; 9 justify-content: center; 10 align-items: center; 11 flex: none; 12} 13 14details p{ 15 font-size:16px 16} 17 18summary { 19 cursor: pointer; 20 display: flex; 21 align-items: center; 22 padding: 22px ; 23 background: #ccc url("/img/icon.png") no-repeat right center ; 24} 25 26summary::-webkit-details-marker { 27 display: none; 28} 29 30

試したこと

要素2つとも幅を決めたり、no-wrapをかけたり、念押しでflex-direction:rowをかけてもうまくいかず、
flex-boxを使わずfloatにしてもcolumn-countにしても、うまく1つの要素の高さ幅を固定にしたままの2つの要素の上下中央揃えが実現できませんでした。

補足情報

PC、Androidともに想定通りの動きです。
iPhoneのみ要素が縦並びになってしまいます。
ブラウザはSafari、Chromeと関係なく縦並びになってしまいます。

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

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

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

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

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

kyoya0819

2019/10/03 05:50

質問とは関係ないですがiOSにブラウザ間の差異など存在しません。 全てSafariと同じ表示になります。
totocalcio

2019/10/03 05:59

そうだったのですね!参考になります!
Lhankor_Mhy

2019/10/03 10:28

スクリーンショットは、上がPCで下がiOSですか?
totocalcio

2019/10/03 11:43

はい。上がPCで下がiOSになります。
kyoya0819

2019/10/03 12:10

iOSのバージョン分かりますか?
totocalcio

2019/10/04 01:51

最新の13.1.2でした!
guest

回答1

0

ベストアンサー

どうやら、iOS Safari のバグのようですね。

Demo 9.3.a shows that <summary> elements dont work in Safari.

GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them.

summary要素に対するバグですから、何かでラップして、ラップ要素にflexのスタイルを付与すれば解決するかと思います。

投稿2019/10/04 01:27

編集2019/10/04 01:40
Lhankor_Mhy

総合スコア35869

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

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

totocalcio

2019/10/04 01:54 編集

ご回答ありがとうございます。 コメントと頂いたリンク先を拝見し、divで囲うことで解決致しました。 <summary> <div> <span>1</span>タイトル </div> </summary>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問