【CSS】flexboxのレイアウト

前提・実現したいこと

flexboxのレイアウトで悩んでいます
1～7のリストがあり並べ方を、

【1】【4】【6】
【2】【5】【7】
【3】

のように並べたいです。

floatなどの方法は思い浮かぶのですが、
あとからリストが増えたり減ったり、3列から4列になったりする予定なので、
htmlをなるべくシンプルに書きたくて、flexboxを使用したいと思っております。

発生している問題・エラーメッセージ

【6】を【7】の上の右端に寄せたいが、
現状は、以下の通りに並んでしまう。

【1】【4】【7】
【2】【5】
【3】【6】

【6】を右上に移動する方法を教えてください。

該当のソースコード

html
1	<ul class="list-fbox">
2		<li>1</li>
3		<li>2</li>
4		<li>3</li>
5		<li>4</li>
6		<li>5</li>
7		<li>6</li>
8		<li>7</li>
9	</ul>

css
1.list-fbox{
2	width:1000px;
3	display: -webkit-flex;
4	display: flex;
5	-webkit-flex-direction: column;
6	flex-direction: column;
7	-webkit-flex-wrap: wrap;
8	flex-wrap: wrap;
9	align-content: flex-start;
10	height:320px;
11}
12
13.list-fbox li {
14	width: 33.3%;
15	background:#179656;
16	color:#fff;
17	font-weight:bold;
18	text-align:center;
19	font-size:30px;
20	min-height: 70px;
21	padding:15px;
22	border:1px solid #fff; 
23}

試したこと

afterなどの疑似クラスを使用して解決を試みましたが、うまくいきませんでした。

お手数ですが、みなさまのご教授をお待ちしております。
よろしくお願いいたします。

退会済みユーザー

2018/10/03 06:53 編集

横並びではなく縦並びでなくてはだめなのですか？

HealingSalon104

2018/10/03 06:57

コメントありがとうございます。並べるものが、カテゴライズされているもので、（例えばカテゴリAが【1】～【5】、カテゴリBが【6】・【7】、そのうちに【5】の下にカテゴリAのものがもう一つ、【7】の下にカテゴリBがもう一つ増える予定。）出来れば縦並び3列で表現したいです。

行動規範の内容に同意します

回答5件

この場合はグリッドレイアウトのほうが簡単でしょう。

CSS
1.list-fbox {
2  display: grid;
3  grid-template-rows: repeat(3, 1fr);
4  grid-auto-flow: column;
5}
6
7.list-fbox > li:nth-child(6) {
8  grid-row-start: 1;
9}

(16:55追記) カテゴリに分かれるようなので、その場合の想定を追記

CSS
1.list-fbox > li.category-B {
2  grid-row-start: 1;
3}
4
5.list-fbox > li.category-B ~ li {
6  grid-row-start: auto;
7}

HTML
1    <ul class="list-fbox">
2        <li class="category-A">1</li>
3        <li class="category-A">2</li>
4        <li class="category-A">3</li>
5        <li class="category-A">4</li>
6        <li class="category-A">5</li>
7        <li class="category-B">6</li>
8        <li class="category-B">7</li>
9    </ul>

(17:40追記)
IEに対応するため段組みレイアウトを追加。逆にFirefoxが未対応なので@supportsにより分岐

CSS
1.list-fbox {
2  columns: 3;
3}
4
5.list-fbox > li {
6  break-inside: avoid-column;
7}
8
9.list-fbox > li.category-B {
10  break-before: column;
11}
12
13.list-fbox > li.category-B ~ li {
14  break-before: auto;
15}
16
17@supports (display: grid) {
18  .list-fbox {
19    display: grid;
20    grid-template-rows: repeat(3, 1fr);
21    grid-auto-flow: column;
22  }
23
24  .list-fbox > li.category-B {
25    grid-row-start: 1;
26  }
27
28  .list-fbox > li.category-B ~ li {
29    grid-row-start: auto;
30  }
31}

投稿2018/10/03 07:12

編集2018/10/03 08:42

x_x

総合スコア13749

カデコライズを意識して少し改良してみました。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>FlexBox</title>
6    <style type="text/css">
7        .category_box {
8            width:1000px;
9            display: flex;
10        }
11
12        .category {
13            flex: 1;
14        }
15
16        li{
17            background:#179656;
18            color:#fff;
19            font-weight:bold;
20            text-align:center;
21            font-size:30px;
22            min-height: 70px;
23            padding:15px;
24            border:1px solid #fff;
25        }
26    </style>
27</head>
28<body>
29<div class="category_box">
30    <div class="category">
31        <ul>
32            <li></li>
33            <li></li>
34            <li></li>
35        </ul>
36    </div>
37    <div class="category">
38        <ul>
39            <li></li>
40            <li></li>
41        </ul>
42    </div>
43    <div class="category">
44        <ul>
45            <li></li>
46            <li></li>
47        </ul>
48    </div>
49</div>
50</body>
51</html>

レスポンシブ(スマホ）対応やカデコリ自体を増やすならもう少し改良が必要そうですが、イメージ的にはこんな感じでしょうかね？

投稿2018/10/03 07:10

退会済みユーザー

総合スコア0

例えば、5番目の要素から折り返しさせたい場合、次のように書くと折り返しされます。

css
1.list-fbox li:nth-of-type(5) {
2  border-bottom: 16px solid #fff;
3}

枠線の幅は、.list-fboxのheightやborder、liのmin-heightやpaddingから計算しました。

投稿2018/10/03 09:44

ryoo_chksl

総合スコア69

https://learn.freecodecamp.org/

投稿2018/10/03 07:30

AliHassan

総合スコア351

html
1<ul class="list-fbox">
2  <li>1</li>
3  <li>2</li>
4  <li>3</li>
5  <li>4</li>
6  <li>5</li>
7  <li class="break"></li>
8  <li>6</li>
9  <li>7</li>
10</ul>

css
1.list-fbox{
2  width:1000px;
3  display: -webkit-flex;
4  display: flex;
5  -webkit-flex-direction: column;
6  flex-direction: column;
7  -webkit-flex-wrap: wrap;
8  flex-wrap: wrap;
9  align-content: flex-start;
10  height:320px;
11}
12.list-fbox li:not(.break) {
13  width: 33.3%;
14  background:#179656;
15  color:#fff;
16  font-weight:bold;
17  text-align:center;
18  font-size:30px;
19  min-height: 70px;
20  padding:15px;
21  border:1px solid #fff; 
22}
23.break {
24  height: 100%;
25}