技術

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

関連記事

git_logo

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

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

no image

[wordpress]各固定ページに個別のCSSを読み込ませる

こんばんは wordpreddでオリジナルテーマを作成している時、各固定ページに …

[Cocos Creator] java.util.NoSuchElementException

どうも中田です CocosCreatorでビルド後、AndroidStudioで …

no image

【Rails】idのauto increment設定を削除する

こんにちは railsを触っていてidからauto incrementの設定を削 …

no image

CSSのpositionで要素を真ん中寄せにする(JS不要)

positionを使って要素を真ん中寄せにする時は、transform: tra …