技術

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

auto_incrementの値を確認して変更

こんにちは、コーテッグのこやまです。 railsとmysqlを使っていて、自動で …

no image

【Angular】Full calendarで横スクロールを実装

こんにちは Full Calendarにはいくつかの表示モードがあります。 こち …

Angularでビューのパラメーターを詳細まで見たいときのコード

こんにちはコーテッグのこやまです angularでviewのパラメーターがうまく …

no image

【Rails】パッと簡単クロスドメイン対応

どうも、中田です。 最近専らRailsでは画面を作るというより、APIを作るとい …

no image

CSSのbackgroundで複数の背景色を設定してみる

こんにちは 仕事で複数の背景色を設定する機会がありましたので 今回はそのやり方を …