https://bugs.webkit.org/show_bug.cgi?id=137730, 代替策としては、.flex-child にも display: flex を指定し、 .flex-grandchildren から height: 100% を取り除く方法があります。, *1: 厳密には align-self:auto ですが、flex container の align-items: stretch を継承しているので。, “回答を投稿”をクリックすることで利用規約、プライバシーポリシー、及びクッキーポリシーに同意したものとみなされます。, このRSSフィードを購読するには、このURLをコピーしてRSSリーダーに貼り付けてください。, サイトデザイン / ロゴ © 2020 Stack Exchange Inc; ユーザーの投稿はcc by-saでライセンスされます。 rev 2020.11.13.38000, スタック・オーバーフロー をより快適に使うためには JavaScript を有効化してください, https://www.w3.org/TR/css-flexbox-1/#change-2012-stretch-definite, https://drafts.csswg.org/css-flexbox-1/issues-cr-2012#issue-3, https://code.google.com/p/chromium/issues/detail?id=341310, https://bugs.webkit.org/show_bug.cgi?id=137730, Feature Preview: New Review Suspensions Mod UX, height:100%でのoverflow: scrollがスマホでうまく行きません, seleniumのPhantomJS上でHTML要素のheight,widthを取得する方法, Flexboxで、「.left { flex: 1 100px; } 」 は、「.left { flex: 0 0 100px; 」?, table、tr、tdタグの box-sizing: border-box について, flex-child に height 指定がないので、flex-child の高さは flex-childの子供要素 flex-grandchildren の高さで決まります, flex-grandchildren の高さは、flex-child の高さの100%です, 意見を述べること(意見を述べるなら、参照リソース、自分の経験で意見をサポートしてください). ©Copyright2020 creive【クリーブ】.All Rights Reserved. ベトナムで起業し、HR関連のコンサルティング業務をやっています。日本を離れて8年が経ちますが、日本ではあり得ないハプニングを楽しんでいます。最近はRuby on RailsでWebサービスを作っています。, 親要素であるflexコンテナへの指示と子要素であるフレックスアイテムへの指示です。, ゲームプログラミングを学びたい人におすすめの言語と開発のために習得しておくべきスキルについて, 侍エンジニア塾の口コミ・評判を分析!行ってはならないという悪い口コミは本当なのか!?, Ruby on Railsを学べるプログラミングスクールおすすめ6選|Webサービスを開発したい方は必見!, AIを学べるプログラミングスクールおすすめ10選|いまAIエンジニアになるべき理由もご紹介!, IT業界転職サイト・エージェントおすすめ比較17選【未経験OK・キャリア形成のプロが紹介】, 30代が使うべき転職エージェント・サイトおすすめを比較【キャリアアップして後悔しない】, 転職エージェントおすすめランキング!利用方法やメリットを徹底解説【55サイトから分析】, 【比較】出張管理システム(BTM)のおすすめ11選!無駄を省く出張手配をラクにしよう, リモートワーク・在宅勤務に欠かせないおすすめツール17選|解決したい「課題」に応じて紹介!, 【2020年版】すべて無料!おすすめのフリーの画像&写真素材サイト20選【商用利用可能】, 子要素を上から下に配置。display: flex;を設定すると自動的に「flex-direction: row;」の効果が出ることから、これをしない場合は、敢えて、「column」を設定する。レスポンシブ対応の場合に使用するケースがある。, 子要素を左から右へと配置するが、折り返しは行わないため、画面サイズが縮小しても、1列に並んだままとなる。, 「flex-direction」 と「flex-wrap」をまとめて書くことができる。例えば、「flex-flow: row wrap;」のように、一つにまとめて書くとコード量も減って良い。, 水平方向の配置をコントロールできる。flex-startは、左揃えで要素が配置される。, 水平方向の中央に要素が配置される。「margin: 0 auto;」と同じ効果が得られる。, 水平方向の配置だが、最初と最後の子要素は、コンテナの両端に余白なしできっちり配置しさる。残った要素は均等な余白で配置される。, 水平方向の配置で、全ての要素が均等の余白とともに配置される。space-betweenとの違いは、コンテナ内の両端の要素に余白があるかどうか。, 垂直方向の配置をコントロールできる。親要素の高さか要素の中で一番高い子要素の高さに合わせて配置してくれる。, 複数要素の配置をコントロールできるが、親要素の高さ、あるいは、子要素の中で一番高い要素に合わせて配置してくれる。, 最上部と最下部の子要素を上下の端に余白なく配置し、残りの要素は均等な余白で配置してくれる。, 要素の配置後、親要素に余ったスペースがあった場合、flex-growを指定した子要素が他の子要素に対してどれくらい伸びるかを決めることができる。マイナス値は無効となる。, flex-growと逆の効果で、どれくらい縮むかを決めることができる。親要素に余ったスペースがない場合で、全ての要素が入り切らない場合、flex-growを指定した子要素が他の子要素に対して縮む設定数値だけ縮む。マイナス値は無効となる。, widthプロパティと同じように幅の値(パーセンテージやピクセル値)を指定できます。, flexプロパティだけを指定すれば、「flex-grow」、「flex-shrink」、「flex-basis」の3つを一括で指定できます。初期値は「flex: 0 1 auto;」となります。, HTMLでの要素の順番にかかわらず、CSSだけで自由に表示順序を変えることができる。. display: flex;を使って要素を横並びかつ上下中央に揃えたい時、要素の高さが揃わない問題の解決方法です。floatやJavascriptを使うことなく解決できます。 これらの高さを画面いっぱいにフレキシブルボックス(display:flex)を使ってサイズが自動調整されるように設定しました。 が、chromeではしっかりと画面の高さに合わせてヘッダー、コンテンツ、フッターの幅がいい感じで調整されているのに、なぜかIEだけ縦幅(高さ)が画面高に合わせて調 … CSSの「Flexbox 」を使って、横並びのボックスの高さ(下辺)を揃える方法について書いています。従来のmarginやpaddingで調整する方法と違って、簡単に設定がきるのでコーディングスピードアップに役 … display Flex使用時でテキストを上揃え、画像だけを下に揃えで、 テキスト量にかかわらず、常に画像を下にはい位置したいい場合、下記のように記述すると、 実現可能ですが、IEで見たときに画像の下に空白ができてしまう不具合があります。 「Flexboxは、どんなことができるのか、いまいち分かっていない。」 flex-flow - flex-direction と flex-wrap をまとめて指定します。 order - フレックスアイテムを表示する順序を指定します。 flex - flex-grow, flex-shrink, flex-basis をまとめて指定します。 flex-grow - フレックスアイテムの幅(高さ)を引き延ばす割合を 並列幅の指定時に-ms-flexを設定する際は、必ず-ms-flex:1 0 auto;と3つの値を設定しましょう。-ms-flex:1;とした場合、IE11は2番めの値であるflex-shrinkに1が省略されていると勝手に判定し、思い通りの幅にならない場合があります。 ブルボックス関連の CSS 属性には下記があります。, 初版:2015å¹´11月22日、最終更新:2015å¹´11月22日, http://www.tohoho-web.com/css/prop/flex.htm, http://www.w3.org/TR/css-flexbox-1/#flex-property, https://developer.mozilla.org/ja/docs/Web/CSS/flex. KOHIMOTO LABOは、KOHIMOTO inc.のメンバーが気ままに更新しているブログです. Direction / Branding / Design / Coding / Writing / UI / UX / System / SEO / Server Migration / Web Consulting / Web Marketing. コンテンツの高さが異なる要素を横並びにしているとき、高い要素に合わせて可変させつつ、コンテンツは真ん中に配置する方法です。, 2019.03.082019.06.26 APP ,STUDY ,SYSTEM ,WEBSITE, ・Monacaを使用したアプリ制作 ・アプリ側index.htmlからphpを使った外部サーバへのajaxでの値受け … More, 2018.07.192019.06.26 STUDY ,SYSTEM ,WEBSITE, 最近ねてもねても、眠い状態が続いております。 ぼーっとしながら頭の中ではあれこれ考えたりしているけれど、スマホをいじ … More, 最高な気分と最悪な気分だったので何となく書き留めておこうと思う。 後、行ったお店が良かったので。(笑)   … More. flexってスマホサイトや最新のブラウザ対応だったらめちゃ便利だけど業務だとそうは言ってられない... 古いIE9~も対応せねばだったりAndroid2.3もサポートだったりというケースがあるのでまとめておく٩( 'ω' )و IE8以下などはfloatやtableを検討するのもありかもね(´Д`。 今回、Flexアイテムの表示の変化をわかりやすくするために、Flexコンテナの高さを固定値にして表示していますが、固定値でなくてもalign-itemsにstretchが設定されている場合は、最もサイズの大きなFlexアイテムに合わせて変化します。 ダミー画像を使う場合は、こちらを参考にしてください。, first-rowという塊の中に、「image-area」と「discription-area」という二つの要素を入れています。「image-area」にはダミー画像を、「discription-area」には、hタグとpタグ、buttonを入れています。以下のような表示になります。, 次に、CSSを設定します。ポイントは、親クラスの「.first-row」に「display: flex;」を設定し、flexコンテナを作成したことです。これによって、要素が横に並びました。次に、幅を調整するわけですが、これは、「discription-area」に「flex-basis: 50%;」を設定しています。, もし、上部の要素に対して違う幅を指定する場合は、以下のように子要素に対してそれぞれ「flex-basis: 40%;」を設定してください。, では、これに対してCSSを設定します。親要素である「second-row」に「display: flex;」を設定します。また、要素を均等に、また、端が揃うように「justify-content: space-between;」を設定しています。, すると、文の長さが違っても、同じボックの高さで横に均等に配置されていることがわかります。本来であれば、文の長さに応じて、ボックスの高さが異なり、「max-height」などで調整するのですが、flexboxを使えば、この必要はありません。, また、本来の配置を無視して、要素の順番も変えることが可能です。例えば、以下をCSSに追加しましょう。, これは、例えば、携帯やタブレットで見せるためにレスポンシブ化した場合、要素の見せ方を変えたい場合があり、その際に使うことが多いです。例えば、CSSにメディアクエリでブレイクポイントを指定しましょう。, 効果がわかると思います。一番見て欲しいものの順番を先にし、カラムを縦の配列へ変更しています。, flexboxプロパティを使えば、これまで「float」や「margin」で行ってきた配置が少数のコードで一気にできることがわかったと思います。, Flexboxを使ったCSSのフレームワークとして、Bulmaも普及しており、一旦、Flexboxの理解や挙動の確認を行いつつ、このようなフレームワークを使うこともWebデザインのレベルを更に高めてくれます。, ちなみに、プログラミングを学ぶならtech boost(テックブースト)がおすすめ。学習の目的に合わせてオーダーメイドでカリキュラムを組んでくれます。. さらに詳しく理解したい方はこちら, 更に、この要素の配置を詳細に指示することができるのが、flexboxの優れたところです。主に、起点の指示や余白設定の指示が可能です。これには大きく2つの指示の種類があります。親要素であるflexコンテナへの指示と子要素であるフレックスアイテムへの指示です。それぞれに必要なプロパティと値があるので、一つ一つ見ていきましょう。, 子要素をコントロールし、配置を行うことでさえ、親要素の指示で可能になるのがflexboxのメリットです。上記の「display: flex;」の設定に加えて、幾つかのプロパティが用意されており、配置の起点を指示したり、余白設定を指示したりできます。, 「row」の場合は、左から右へと配置しましたが、右から左へ要素を配置するのが「row-reverse」です。, さて、レスポンシブに対応する場合、縦に配置を切り替えたい時もあるでしょう。その場合上から下へ要素を配置するのが「column」です。, 表示は、「display: flex;]を設定する前の状態に戻りました。ただ、これは「display: flex;]が無効になったのではなく、敢えて、上から下へ要素を配置したのです。, 要素の上から下への縦配置ではなく、下から上への縦配置を実現するのが、「column-reverse」です。, 「flex-wrap」は、子要素を折り返します。説明の便宜上、表示要素を以下のように増やします。, 「nowrap」を設定すれば、絶対に要素が折り返すことはありません。いくら要素数が増えても横1行になります。, ここに、「flex-wrap: wrap;」を追加します。また、子要素の幅を30%とします。すると、flexコンテナの幅から外れた要素が下に折り返されます。, 「wrap-reverse」は、要素を左下を起点として、横方向へ配置するプロパティです。, 「flex-flow」は、一括設定のプロパティです。「flex-direction」と「flex-wrap」を同時に設定可能です。 以下のように書くことが可能です。, これが初期値で、要素が左端から右へ並びます。わかりやすくするために、要素数を減らしています。, 「flex-start」が左から右へ要素を配置するのに対して、「flex-end」は右から左へ要素を配置します。, 「space-between」は要素を均等に配置します。その際、両端の要素はコンテナの両端に余白なく密着します。, 「space-between」と同様に、要素を均等に配置するのですが、それぞれの要素に余白を持って配置されます。, 「justify-content」が水平方向の配置を決めるのに対して、「align-items」は垂直方向の配置を決めます。, 「stretch」は初期値です。最も高い要素に高さを合わせてくれます。わかりやすくするために、長さの違うテキストを入れています。, 「flex-end」は「flex-start」とは逆に、下から上へ要素が配置されます。, 「stretch」は、「flex-wrap: warp;」で要素を折り返した時で、子要素の高さが設定されていない場合、自動的に親要素の高さに合わせて子要素の高さを調整します。, 「space-between」は、縦方向で要素を均等に配置します。その際、上下両端の要素は親要素の上下に密接して配置されます。, 「space-between」は、縦方向で要素を均等に配置します。その際、上下両端の要素には余白も含めて配置されます。, これまで親要素に指示を出すことで、要素を配置してきましたが、ここからは子要素そのものに対して指示を出します。, 「order」プロパティに、数値を指定することで、要素の順番を変えることができます。まずは、orderを指定しない状態が以下になります。, 「flex-grow」は親要素に余白がある場合、その余白に対してどの程度特定の要素の幅を伸ばせるかの指定ができます。例えば、以下のように左揃えの要素群があります。これに「flex-grow」を設定します。, すると、余白を使って、指定した要素が伸びています。「flex-grow: 1;」はデフォルトの大きさと考えてください。, 「flex-shrink」は、「flex-grow」の逆で、親要素に余白がない場合、その余白に対してどの程度特定の要素の幅を縮められるかを指定できます。例えば、幅を, 「flex-basis」は子要素の横幅を指定します。「auto」は子要素のもともとの幅が反映されます。, 以下のように指定されます。幅は30%指定ですが、「flex-grow」が効いて、余白を埋めていることがわかります。, このプロパティは、垂直方向の配置を決めます。親要素に指定するalign-itemsと同じ効果が出せます。子要素に対して指定しますが、「align-self」は「align-item」よりも、優先されます。挙動は、「align-item」と同じとなりますので、サンプルコードは省きます。, これを指定した場合は、親要素の縦幅に余裕があれば、その余白を使って縦幅を広げます。, これを指定した場合は、親要素の垂直方向に文字のベースラインを想定し、要素を配置します。, 早速、Flexboxを使って、デザインをしてみましょう。今回は、以下のような画面を作ってみます。今回は、bootstrapもgridレイアウトも使わずに、flexboxの機能だけを使って作ってみます。, ポイントは2つです。幅の違う要素を横並びにすること、幅が同じ要素を横に均等配置することです。, では、上部部分のHTMLコードを以下のように設置します。上部は、2カラム構成となっていますが、幅は同じにします。 Windows10が発売されて新ブラウザのEdgeが使えるようになっても、まだまだInternetExplorerの呪縛からは逃れられません;;, 今回はフロートを使ったレイアウトではなく今後主流になってくる「フレキシブルボックス」でのレイアウトで発生した問題です。, よくあるカタチで、縦並びにヘッダー、メインコンテンツ(左右に2カラムあるとします)、フッターがあります。, これらの高さを画面いっぱいにフレキシブルボックス(display:flex)を使ってサイズが自動調整されるように設定しました。, が、chromeではしっかりと画面の高さに合わせてヘッダー、コンテンツ、フッターの幅がいい感じで調整されているのに、なぜかIEだけ縦幅(高さ)が画面高に合わせて調整されません。フロートでのレイアウトでclearをし忘れたような状態になってしまっていました。, かなりハマってしまったのですが、これはCSSのflexプロパティの「ショートハンド」のIE11の挙動がおかしいことが原因でした。 (※こちらのmin-height:100vh;などの設定も合わせて実行しました。), 今回はショートハンドでflexプロパティを書く際に3番目のflex-basisの値に「auto」を設定したら正常化しました。, 他のブラウザでは3番目のflex-basisは必要ない場合は省略しても大丈夫だったのですが、どうやらIEの場合は省略せずに「auto」を設定しなければならないようです。, ショートハンドとは、margin:0 1px 0 0; やpadding:0 1px 0 0;のように一行で複数のCSSプロパティを書ける便利な書き方なのですが、IE11のflexプロパティの実装がおかしいのかIE11でショートハンドでflexを書く時は注意しなければなりませんね。. display: flex が指定された要素を flex container、その直下にある各要素を flex item と言いますが、各 flex item にはデフォルトで align-self:stretch が指定されており *1 、これによって flex container の高さ一杯に flex item の高さが調整されています。 質問の例では .flex-child がそうですね。

まさか原因が「CSSの書き方」にあるなんて思いもせず問題の解消までかなり時間がかかってしまいました^^; WEB制作者に朗報!IE10を使っているなら他のIEエミュレータはもういらないかもしれない, IEでdisplay:table-cell;にしてもGoogleMap APIの高さが100%にならない場合の対処法(暫定), InternetExplorerで縮小表示した画像がギザギザ(ジャギー)になってしまう問題の解決法, CSSでマージンやパディングもrem単位で指定するとIEとchromeで表示が異なる現象の解決策, 「同じユーザーによる、サーバーまたは共有リソースへの複数のユーザー名での複数の接続は許可されません。サーバーまたは共有リソースへの以前の接続を切断してから、再施行してください。」と出た時の対処法, IE11以降を含むInternetExplorerと他ブラウザ判別のユーザーエージェント版(Javascript), Mac OS X MavericksにしたらVMware Fusion5のネット接続ができなくなった時は「ブリッジされたネットワーキング」で解決, WordPressのカスタム投稿で不要な画像サイズを生成しない方法(add_image_sizeで追加したサイズの解除も含む), Swift対応のiPhoneアプリ(iOS)開発本3冊の比較と、買う前に注意してほしいこと!, WebkitのSpeech Synthesis APIで複数項目を再生する方法の考察まとめ, vol.0 アプリを制作するための事前準備 – SwiftでiOS用のクイズアプリを作る!, プログラミング学習用パソコン「Raspberry Pi」を試してみました!Raspberry Pi3 Model B ボード&ケースセット. 親要素(背景色:青)の高さと同じ高さにならない理由はなぜでしょうか?, SafariではSafari 11で修正されたので17年7月現在はまだプレビュー段階ですし、Safari 10 以下を対象にする場合はやはり孫要素もflexboxでgrow/stretchさせる必要があるかと思います。, display: flex が指定された要素を flex container、その直下にある各要素を flex item と言いますが、各 flex item にはデフォルトで align-self:stretch が指定されており*1、これによって flex container の高さ一杯に flex item の高さが調整されています。質問の例では .flex-child がそうですね。, 一方 height: 100% という指定は親ボックスの高さから計算されるわけですが、これは親ボックスの高さが確定している場合に限ります。int32_tさんが書かれているように、親ボックスの高さが不定の場合はこの記述は機能しません。, 初期の flexbox の仕様では align-self:stretch が指定された flex item も高さ不定という扱いだったのですが、このような flex item の中でパーセント指定を使いたいという要望が出され、align-self:stretch が指定された場合は高さが確定したものとして扱うよう変更されました。, https://www.w3.org/TR/css-flexbox-1/#change-2012-stretch-definite このサイトを利用することによって、あなたはこのサイトのCookie Policy、Privacy Policy、およびTerms of Serviceを読んで理解し、同意したものとみなします。, スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。, flex-grandchildren(背景色:赤)はheight:100%を指定しているのに