質問: いつもお世話になります。 css埋め込みのみによる回りこみ制御を考えています。 横幅780px以上の場合、 ``` a b ``` とし、横幅がこれを下回る場合、 ``` a b ``` 以上のようなことをmax-width,min-width等の埋め込みのみで制御したいのですが、 何かいい方法はありませんでしょうか? こちらではこんな感じで作ってみましたがイマイチです。 ``` ``` 基本的に実現したいことは、親要素の横幅780px以上の場合、子要素を2列で表示し、 親要素の横幅780px未満になる場合は子要素を1列で表示したいです。 埋め込みだけでもできそうな感じはするのですが、 皆さんのお知恵をお借りしたいと思います。 よろしくお願いします。
回答: `display: flex`の要素を作り、段組みしたい要素をその子要素にするというのはどうでしょうか。 両方の子要素に`flex: 1 1 390px`と指定すると、`390px`(とりあえず 780/2 で適当に決めました)をベースとして必要に応じて同じ比率で伸縮するようになります。 親要素に`flex-wrap: wrap`としているので、ベースの`390px`が保てない幅になったら自動で折り返され縦組になります(Flexbox)。 ``` /* 本題と関係ないスタイルはこちらに集めています */ div{ border-style: solid; border-width: 1px; background-color: lightblue; } #parent{ width: 100%; } ``` ``` A B ``` 本題とずれますが: 「親子の相互関係を作ることは可能」な状況でしたら、そこに`style`タグを挿入してしまう事も出来そうですがいかがでしょうか。 昔のHTMLは`style`タグは`head`内に書かないといけないという仕様でした(現実の実装では無視しても動いたようですが)。 現在のHTML5では`scoped`属性を付ければ仕様に違反せず挿入出来ます。