６枚のカードを横に列で表示したい

問題点

６枚あるカードを画像のように３枚３枚で表示したいです。
表示の仕方とカラム落ちしないようにはどうすればいいでしょうか？

してみたこと

. Bootstrapを使用しcol-4でやってみたがカラム落ちした。
.width33%　　display-flexで表示したが６枚全て横一列になる。

css
1.lessons ,.lesson-item img{
2    width: 100%;
3    
4}
5.lesson {
6    width: 33%;
7    background-color: #fff;
8    padding: 16px 16px 28px 16px;
9    margin-bottom: 20px;
10    color: #6F7579;
11    border-radius: 5px;
12}
13.lesson-item p {
14    margin-top: 26px;
15    margin-bottom: 20px;
16    font-size: 20px;
17}

HTML
1<div class="lessons">
2                  <div class="lesson ">
3                      <div class="lesson-item">
4                          <img src="card-img.svg" alt="">
5                          <p>タイトルタイトル</p>
6                      </div>
7                      <div class="lesson-text">
8                          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
9                      </div>
10                  </div>
11                  <div class="lesson">
12                      <div class="lesson-item">
13                          <img src="card-img.svg" alt="">
14                          <p>タイトルタイトル</p>
15                      </div>
16                      <div class="lesson-text">
17                          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
18                      </div>
19                  </div>
20                  <div class="lesson">
21                      <div class="lesson-item">
22                          <img src="card-img.svg" alt="">
23                          <p>タイトルタイトル</p>
24                      </div>
25                      <div class="lesson-text">
26                          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
27                      </div>
28                  </div>
29                  <div class="lesson">
30                      <div class="lesson-item">
31                          <img src="card-img.svg" alt="">
32                          <p>タイトルタイトル</p>
33                      </div>
34                      <div class="lesson-text">
35                          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
36                      </div>
37                  </div>
38                  <div class="lesson">
39                      <div class="lesson-item">
40                          <img src="card-img.svg" alt="">
41                          <p>タイトルタイトル</p>
42                      </div>
43                      <div class="lesson-text">
44                          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
45                      </div>
46                  </div>
47                  <div class="lesson">
48                      <div class="lesson-item">
49                          <img src="card-img.svg" alt="">
50                          <p>タイトルタイトル</p>
51                      </div>
52                      <div class="lesson-text">
53                          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
54                      </div>
55                  </div>
56              </div>

LibertyBell3

2020/01/31 14:06

あなたの過去質問で解決済みになっていないものが複数あります。まずはそちらの対応を行いませんか？

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

回答2件

display:flexではデフォルトでは折り返ししない設定になっています。
diaplay:flexを指定したclassに折り返しのstyleのflex-wrap:wrapを適応させてあげてください。

css
1flex-wrap: wrap;

このままだと子要素はwidth:33%+padding分が横幅になり、３つが1行に入らない為2列3行になると思います。子要素のlessonのwidthを調整してあげるか、lessonにbox-sizing: border-boxを指定してあげて調整してください。

box-sizing: border-box;

投稿2020/01/31 12:22

zushi0905

総合スコア683

noby_

2020/01/31 15:24

flex-wrap: wrap; で隙間のない三枚に列になりました。間に隙間をつけるためmargin-left 30pxとして、box-sizing: border-box;を加えましたが二列三行のままです。どのようにすれば良いでしょうか？

zushi0905

2020/02/03 09:06

box-sizingはborder,padding要素をwidthに含める時に使います。しかしmarginは含まれません。つまりwidth33%×3+margin-left:30px×３が親要素のwidthを超えている為２列で折り返されるということです。 flexboxのメリットはレスポンシブルに対応がしやすく、flexを指定しているクラスをいじることで並べかえやトンマナ調整が容易というところです。ベストアンサーの方の実装でも問題ないですが、flexboxを理解すればより柔軟で迅速にコーディングができるようになるので是非試して見てください。

noby_

2020/02/06 02:57

かしこまりました！試してみます。ありがとうございます

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