技術

CSSで片方を固定、片方を可変のレイアウトを実装

投稿日:

こんばんは

IE8・9ではdisplay: flex;が使えないがために片方を固定にして、
片方を可変にするのが中々大変でした。

今のモダンブラウザはdisplay: flex;に対応しているので
どんどん使っていきましょう。

display: flex;の対応表

実装する方法はとても簡単です。

index.html

<div class="wrapper">
<div class="column-1">
<!– 可変 –>
</div>
<div class="column-2">
<!– 固定 –>
</div>
</div>

index.css

.wrapper {
display: flex;
height: 100px;
}

.column-1 {
background-color: blue;
flex: 1;
}

.column-2 {
background-color: red;
width: 200px;
}

これだけでOKです!

display: flex;は使いこなせると、とても便利なので
覚えとくと良いかと思います。

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[Rails]「どのブラウザからのアクセスか」を判別する方法

こんにちは。たなかです。 前回以下のような記事を書きました。   [R …

[ Rails ] ExecJS::RubyRacerRuntime is not supported. Please replace therubyracer with mini_racer in your Gemfile or use Node.js as ExecJS runtime.

こんにちは。たなかです。 モバイルアプリ開発の内容でブログを書くことが多い私です …

Dockerでwheneverが動かない (bundler: failed to load command: bin/rails (bin/rails))

どうも中田です。 久々の投稿になります。 正確にはwheneverで登録したcr …

no image

【Rails】そろそろデバッグしましょうか

どうも中田です。 今までrailsの開発はIDEを使わずテキストエディタだけでや …

git_logo

[Git] どのコミットでバグが入ったか原因究明する方法【git blame】

こんにちは。さとうです。 今回はgitを使って、どのコミットでバグが入ったか原因 …