IE11でflexboxを入れ子にするとテキストが折り返さないバグ
先日紹介したflexbox関連のバグを検証していたときに遭遇したバグがあったのでメモっておきます。今回は入れ子にしたflexboxに関するバグです。 バグの詳細 IE11では、flexboxを入れ子にすると、入れ子にしたflexboxのflexアイテム内のコンテンツがコンテナより大きい場合、はみ出して表示されてしまいます。たとえば、下のIE11での表示のキャプチャ画像のように長いテキストが折り返さなくなってしまいます。 本来は下のFirefoxでの表示をキャプチャした画像のように、display: flex;によってカラム表示になってテキストが折り返して表示されます。 デモはこちら このバグが発生するソースコードは以下のようになります。 HTML <div class="flex-outer"> <div class="flex-outer__item"> <div class="flex
IE11でflex-direction: columnにしてalign-items: centerを指定すると中のコンテンツがはみ出してしまうバグ
先日コーディングをしていて、またIE11のflexbox関連のバグに遭遇したのでメモっておきます。今回は、flex-direction: column;とalign-items: center;を指定すると発生するバグです。 バグの詳細 IE11では、flexboxにflex-direction: column;とalign-items: center;を指定すると、flexアイテムのコンテンツがコンテナより大きい場合にはみ出してしまいます。たとえば、長い文章が入っていると、以下のように横にはみ出てしまいます。 IE11での表示 本来、グレーのボックス内（flexアイテム内）におさまってほしいテキストがはみ出してしまいます。 Firefoxでの表示 Firefox（Mac 77.0.1）では、意図したとおりグレーのボックス内にテキストがおさまります。 デモはこちら このバグが発生するソース
Grid for layout, Flexbox for components - Ahmad Shadeed
My brother is a fresh computer engineering graduate and he is currently finishing his internship in front-end development. He learned about both CSS grid and flexbox, but I noticed a pattern that I see a lot on the web. He can’t decide when to use grid or flexbox. For example, he used CSS grid to layout a website header and mentioned that the process wasn’t smooth as he played with grid-column and
🐛よくハマった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 以降 <div class=
IE11でflexboxにmin-heightが効かなくてalign-items: centerが使えないバグ
flexbox関連のバグをメモ的に書き溜めています。今回はIE11のバグで、flexを指定した要素にmin-heightを指定すると無視されるバグについてです。 バグの詳細 IE11ではdisplay: flex;を指定した要素にmin-heightを指定しても無視されます。IE11ではflexが指定されたflexコンテナの高さは認識されるがflexアイテムの高さは認識されないそうです（Flexbugs参照 ）。そのため、align-items: center;で中の要素を上下中央に配置できません。 僕の場合、以下のようなレイアウトの実装の際にこのバグにはまりました。 幅が可変でテキストの長さが異なるレイアウトで、テキストが1〜3行の場合はmin-heightで高さを統一して上下中央寄せにして、4行以上になる場合はテキストの高さに合わせて箱の高さが可変するレイアウトです。 IE11だと以下
IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ
前回の記事に続き、IE11でのflexbox関連のバグについてのメモです。たくさんあるflexbox関連のバグ ですが、自分なりに1つ1つ整理していこうと思います。 今回はbox-sizing: border-box;関連のflexboxのバグです。ぱっと見では気付きにくい可能性があるので注意が必要なバグです。 バグの詳細 IE11ではbox-sizing: border-box;が指定されていても、flex-basisに指定した値がbox-sizing: content-box;をベースに計算されてしまいます。そのため、flexアイテムにborderやpaddingが指定されていると想定通りのレイアウトになりません。 対処法1 当該のflexアイテムにmax-widthを指定する。 flex: 1 1 75%; max-width: 75%; padding: 0 4rem 0 0; 対
IE11でflexプロパティに書いたcalcが機能しないバグ
先日遭遇したIE11のflexbox関連のバグをメモっておきます。周知のバグだと思いますが、自分で書くと脳に定着しそうだしw バグの詳細 以下のように、flexショートハンド・プロパティのflex-basisにcalcを使って値を記述すると、IE11で機能しないため無視されてしまいます（IE10も同様）。 flex: 1 1 calc(25% - 1rem); 対処法 IE11の場合は、以下のようにflexプロパティをロングハンドで記述すればなおります。 flex-grow: 1; flex-shrink: 1; flex-basis: calc(25% - 1rem); IE10に対応したい場合、flex-basisをautoにしてwidthでcalcを使うと良いらしいです（すみません、テストしてません）。 メモ Edgeでも同様のバグがあったそうですが修正されています。 MS Edge
Flexbox and absolute positioning
Recently, I’ve been trying to build an open source video conferencing application specifically for online meetups. Just like every other developer on the planet, it seems. Video conferencing apps are the new chatbots. Maybe. This was also a good reason for me to get to know OpenTok better, as I had previously not had a use-case to build for. I’ll probably write up the whole process into a lengthy
Learn Box Alignment
Are you ready to learn how box alignment works for CSS Grid and Flexbox? This article is for you. Start LearningInteractive Demo IntroductionWe have a table and four plates. Throughout this article, we will learn how to align the plates differently for our guests by using Flexbox and Grid. Make sure you’re not hungry when reading this. ;) Plates SizeTo start, I added a width and height for the pla
A beginner's guide to flexbox and CSS grid | Webflow Blog
Flexbox excels at giving you control across one-dimensional layouts. And, as the name suggests, allows child elements to shrink and expand as needed. Before the development of flexbox, there was darkness. Designers wrestled with CSS floats in their efforts to create grid layouts, with no guarantees they’d work on different screen sizes. Then, out of this darkness came flexbox, a beam of light all
Adaptive Photo Layout with Flexbox | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere. The solution is not only lightweight but also quite simple. We’l
フレックスコンテナ内で絶対位置指定された要素の静的位置 / masuP.net
タイトルが少し分かりにくいですが、display:flexの中でposition:absoluteが指定された要素の初期位置がどこになるか、という話です。 経緯 ポップアップメニューのコンポーネントを実装していて、フレックスボックスと絶対位置指定（position:absolute）を利用してポップアップメニューを中央揃えさせようとしましたが、SafariとIE11では期待通りの表示になりませんでした。 試してみた方法は、ポップアップのメニューとボタンを包むラッパーをフレックスボックスにして、justify-content:centerで中央寄せし、メニューの高さ方向だけ絶対位置指定する方法。 HTML <div class="wrapper"> <button type="button">Button</button> <div class="menu">hoge</div> </div
[CSS][メモ] IE11でflex-basisにbox-sizingが効かない - Qiita
ul { display: flex; flex-wrap: wrap; width: 960px; margin: 0 20px; } li { flex: 0 0 184px; height: 40px; padding: 10px; box-sizing: border-box; } 上記のコードでChromeでは1行5列のリストが表示されるが、 IE11ではbox-sizingが効かず、5列目が落ちてしまう。 これに対処する為には、以下のようにmax-widthをflex-basisと同値で指定する必要がある。 ul { display: flex; flex-wrap: wrap; width: 960px; margin: 0 20px; } li { flex: 0 0 184px; max-width: 184px; /* ← これを追加 */ height: 40px;
![[CSS][メモ] IE11でflex-basisにbox-sizingが効かない - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f47d1fe5d39cf424d4d11ae892f362addd95b61/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCQ1NTJTVEJTVCJUUzJTgzJUExJUUzJTgzJUEyJTVEJTIwSUUxMSVFMyU4MSVBN2ZsZXgtYmFzaXMlRTMlODElQUJib3gtc2l6aW5nJUUzJTgxJThDJUU1JThBJUI5JUUzJTgxJThCJUUzJTgxJUFBJUUzJTgxJTg0JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wMGE1YmFiZWRiNWE5NmY4Zjc4YTRiZDA1MWYwYmExZg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwa29wcGF5YXNoaSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YzkyMDU5YzNmOGRiNzA4YTE1OWZiYWFlYmQzMWY1NDc%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D4292aa11db0511da4a4e482f90d65d69)
CSS { In Real Life } | To Grid or to Flex?
A recent Twitter thread started by Chris Coyier got me thinking about how people in general interpret the use cases for CSS Grid Layout versus flexbox: For y'all that have an understand of both CSS grid and flexbox, what's your favorite way of explaining the difference? — Chris Coyier (@chriscoyier) January 25, 2019 Naturally some of the most insightful replies came from Rachel Andrew and Jen Simm
Designing the Flexbox Inspector – Mozilla Hacks - the Web developer blog
The new Flexbox Inspector, created by Firefox DevTools, helps developers understand the sizing, positioning, and nesting of Flexbox elements. You can try it out now in Firefox DevEdition or join us for its official launch in Firefox 65 on January 29th. The UX challenges of this tool have been both frustrating and a lot of fun for our team. Built on the basic concepts of the CSS Grid Inspector, we
The Flexbox Holy Albatross: HeydonWorks
13th January 2019For the last 6 or so months, I've been engaged in a number of activities including (but not limited to): Scratching my headStaring out of the windowLaying in bed and staring at the ceilingScreaming into a pillowRolling around on the floor sweating feverishly while muttering archaic and forbidden incantationsCoincidentally, I've been spending this same time period trying to solve a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What's the difference between the alignment values of start, flex-start, and self-start?
12 CSS Flexbox tips & tricks which you need to know as a web developer
CSS { In Real Life } | To Grid or to Flex?
Quick! What's the Difference Between Flexbox and Grid? | CSS-Tricks