技術

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_logo

[Rails] Controllerで表示してるページのパスを判定したい

Controllerで表示してるページのパスを判定して、条件分岐したいと思います …

[Angular] has no exported member ‘XXXLoginComponent’.

どうも中田です Angularでコンポーネント名を階層構造にあった名前にしようと …

【Rails】ActionController::InvalidAuthenticityToken (ELB,EC2)

どうも中田です。 また出ました。赤い画面。 日々いろんなサイトを見てますが、この …

no image

[Rails]updateの時だけvalidationを実行させる

こんにちは アプリを作っていて、create時にはvalidationを実行させ …

JavaScriptでクリップボードにテキストをコピーする!

こんにちは。たなかです。 ブラウザに表示されている、自動採番されたIDをクリップ …