[CSS] Flexbox(フレックスボックス)で横に並べる

Flexbox

バナーなどを横に並べたい時、float:leftの回り込みを使っていませんでしたか?それも正解なのですが、Flexboxなら、もっと簡単に実装できるのでご紹介します。うん、楽なはず。

共通 html

背景があって、白い部分がcontainerだとします。

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

※ 2021年現在、基本のdisplay: flex;に、IE11様の display: -ms-flexbox; を追加するだけで事足りる様です。

基本的な横並び

flexbox
ul {
display: -ms-flexbox;
display: flex;
}

横並び中央寄せ

flexbox
ul {
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}

均等に横並び(左右の余白あり)

display: flex
ul {
display: -ms-flexbox;
display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
}

均等に横並び(左右の余白なし)

flexbox
ul {
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
} 

レスポンシブで作る時って、画像サイズを大きくしていたりしますよね?多分、画像サイズの問題だと思うのですが、これだと余白無しのパツパツ状態になってしまいます。画像サイズが表示させたいサイズよりも大きい場合は、下記の方法を。

ul{display: flex;}
ul li{padding-right: 25px;}
ul li:last-child{padding-right: 0;}

右にpaddingを付けて、3の右だけpaddingを付けない

並び順を変える

display: flex
ul {
display: -ms-flexbox;
display: flex;
}
ul li:nth-of-type(3) {
-webkit-order: -1;
order: -1;
} 

nth-of-typeについては、[CSS] 便利!擬似クラスで〇番目を指定する でもご紹介しています。

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


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