ちょっとディープな生物の世界

【CSS】要素を簡単に並び替えるFlexbox

Flexboxとは

以前まではdiv要素を横並びにする際には、floatなどを使っていましたが、Flexboxを使えばもっと簡単にその処理を行うことができます。

Flexboxの使い方

並び替えをしたい要素の親要素にdisplay:flex;を記述します。

.box{
  display: flex;
}

親要素いっぱいに子要素の幅を広げる

子要素側にflex:auto;と記述すれば、親要素いっぱいに子要素を均等に広げることができます。

<div class="box">
  <div class="boxcontents"><div>
  <div class="boxcontents"><div>
  <div class="boxcontents"><div>
</div>
.box{
  display: flex;
  width:100%;
}

.boxcontents{
  flex:auto;
  border:solid red;
}

a
b
c

途中で折り返して複数段にする

親要素にflex-wrap:wrap;を指定すれば、子要素を折り返すことができます。例えば3つの要素(各width:50%)があった場合には、3つ目の要素が2段目となります。

flex-wrapには値として、nowrap、wrap-reverseもあります。

.box{
  display: flex;
  flex-wrap:wrap;
}

.boxcontents{
  border:solid red;
  width:50%;
}

a
b
c

子要素を縦に並べる

親要素にflex-direction: columnを指定すれば、子要素を縦に並べることができますう。

.box{
  flex-direction: column;
}

.boxcontents{
  border:solid red;
  width:50%;
}

a
b
c

コメントを残す

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