高さの違うli要素を横並びする方法

以前、高さの違うli要素をfloatで崩れない記事を書きました。

最近はfloatを使うことはほとんどしていません。
横並びはflexboxを使用していますので、その方法を記載していきます。

3カラムいっぱいに横並びする
背景色の高さを文字量に合わせる
最終行のliが2つで終わる場合
補足：4カラム表示の場合
1. 4カラム表示で最終行のliが3つで終わる場合
2. 4カラム表示で最終行のliが2つで終わる場合

3カラムいっぱいに横並びする

3カラムで横並びにする場合の書き方です。
1カラム目と2カラム目の間にある余白を記述しないで調整してくれるので、とても楽になりました。

html

<ul>
  <li>ボックス1-------------ボックス1</li>
  <li>ボックス2----------------------------------------------ボックス2</li>
  <li>ボックス3</li>
  <li>ボックス4--------------------------------------------------------------------------------------------ボックス4</li>
  <li>ボックス5</li>
  <li>ボックス6</li>
  <li>ボックス7----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ボックス7</li>
  <li>ボックス8</li>
  <li>ボックス9</li>
</ul>

css

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul li {
  width: 290px;
  margin: 0 0 15px 0;
  padding: 10px;
  background: #eee;
}

DEMO

▲ 目次に戻る

背景色の高さを文字量に合わせる

上記の方法だと、背景色の高さが揃います。
高さが揃った方がいい時もありますが、文字量に合わせたい時もあります。
今回は、上端に揃えてみます。

html

<ul class="start">
  <li>ボックス1-------------ボックス1</li>
  <li>ボックス2----------------------------------------------ボックス2</li>
  <li>ボックス3</li>
  <li>ボックス4--------------------------------------------------------------------------------------------ボックス4</li>
  <li>ボックス5</li>
  <li>ボックス6</li>
  <li>ボックス7----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ボックス7</li>
  <li>ボックス8</li>
  <li>ボックス9</li>
</ul>

css

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul li {
  width: 290px;
  margin: 0 0 15px 0;
  padding: 10px;
  background: #eee;
}
.start { // 追加
  align-items: flex-start;
}

DEMO

▲ 目次に戻る

最終行のliが2つで終わる場合

flexboxは便利なんですが、「justify-content: space-between;」は3カラム以上の時、注意が必要です。

最終行が2つで終わると真ん中のカラムが空で表示されます。

DEMO

真ん中が空かないよう、左寄せに修正します。

html

<ul class="afteradd">
  <li>ボックス1-------------ボックス1</li>
  <li>ボックス2----------------------------------------------ボックス2</li>
  <li>ボックス3</li>
  <li>ボックス4--------------------------------------------------------------------------------------------ボックス4</li>
  <li>ボックス5</li>
  <li>ボックス6</li>
  <li>ボックス7----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ボックス7</li>
  <li>ボックス8</li>
</ul>

css

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul li {
  width: 290px;
  margin: 0 0 15px 0;
  padding: 10px;
  background: #eee;
}
.afteradd:after { // 追加
  width: 290px;
  content: '';
  display:block;
}

DEMO

▲ 目次に戻る

補足：4カラム表示の場合

4カラム表示の時も3カラム同様注意が必要です。

4カラム表示で最終行のliが3つで終わる場合

「justify-content: space-between;」を指定しているので、対策しないと最終行だけ3カラムのような表示になります。

DEMO

左寄せに修正していきます。

html

<ul class="colomn4">
  <li>ボックス1-------------ボックス1</li>
  <li>ボックス2----------------------------------------------ボックス2</li>
  <li>ボックス3</li>
  <li>ボックス4--------------------------------------------------------------------------------------------ボックス4</li>
  <li>ボックス5</li>
  <li>ボックス6</li>
  <li>ボックス7----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ボックス7</li>
  <li>ボックス8</li>
  <li>ボックス9</li>
  <li>ボックス10</li>
  <li>ボックス11</li>
</ul>

css

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul li {
  width: 205px;
  margin: 0 0 15px 0;
  padding: 10px;
  background: #eee;
}
.after:after {
  width: 225px;
  content: '';
  display:block;
}

DEMO

4カラム表示で最終行のliが2つで終わる場合

こちらは、真ん中2つのカラムが空で表示されます。

DEMO

左寄せに修正していきます。

html

<ul class="colomn4 after before">
  <li>ボックス1-------------ボックス1</li>
  <li>ボックス2----------------------------------------------ボックス2</li>
  <li>ボックス3</li>
  <li>ボックス4--------------------------------------------------------------------------------------------ボックス4</li>
  <li>ボックス5</li>
  <li>ボックス6</li>
  <li>ボックス7----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ボックス7</li>
  <li>ボックス8</li>
  <li>ボックス9</li>
  <li>ボックス10</li>
</ul>

css

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul li {
  width: 205px;
  margin: 0 0 15px 0;
  padding: 10px;
  background: #eee;
}
.after:after {
  width: 225px;
  content: '';
  display:block;
}
.before:before {
  width: 225px;
  content: '';
  display:block;
  order:1;
}

DEMO

▲ 目次に戻る