ryotah https://blog.hatena.ne.jp/ryotah/ blog https://ryotah.hatenablog.com/ css こんな感じでコンテンツを左右(上下)に配置する時に便利。 以下のような問題（仕様）があるので、Flexboxを入れ子にした場合かつ、上下揃えをした場合は注意が必要。 css - Chrome / Safari not filling 100% height of flex parent - Stack Overflow キャプチャの左がChrome、右はSafari 一番左のパターンは「Flexboxで伸びている高さ = height: 100%」という前提のもの Chromeでは動く。ただしflex-basisを0にしないとこのような結果にはならない 二番目はposition: absolu… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fryotah.hatenablog.com%2Fentry%2F2017%2F07%2F21%2F204726" title="FlexboxとAuto marginを組み合わせる - blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/r/ryotah/20170721/20170721204657.png Hatena Blog https://hatena.blog 2017-07-21 20:47:26 rich https://ryotah.hatenablog.com/entry/2017/07/21/204726 1.0 100%