質問編集履歴

2

a

2021/01/01 08:00

投稿

solMackartony
solMackartony

スコア18

test CHANGED
File without changes
test CHANGED
@@ -408,6 +408,10 @@
408
408
 
409
409
 
410
410
 
411
+ justify-content:space-around も試しましたがうまくいきませんでした。
412
+
413
+
414
+
411
415
  アドバイスいただけると助かります。
412
416
 
413
417
 

1

2021/01/01 08:00

投稿

solMackartony
solMackartony

スコア18

test CHANGED
File without changes
test CHANGED
@@ -393,3 +393,95 @@
393
393
  Bootstrapを使っての5列配置やflexも今勉強しているのですが、なかなか思い通りになりません。
394
394
 
395
395
  サポート頂けると幸いです。
396
+
397
+
398
+
399
+
400
+
401
+ 【追記】
402
+
403
+ 現状以下のようにできました。
404
+
405
+ ただ均等に配置できておりません。
406
+
407
+ またこれを2列にする方法も模索中です。
408
+
409
+
410
+
411
+ アドバイスいただけると助かります。
412
+
413
+
414
+
415
+ ![イメージ説明](0aa9209bd8be2b80deac710d302df692.png)
416
+
417
+
418
+
419
+ ```HTML
420
+
421
+ <div class="flex-container">
422
+
423
+ <div class="flex-item">
424
+
425
+ <img class="testimonials-img" src="img/blog/1.jpg" alt="">
426
+
427
+ </div>
428
+
429
+ <div class="flex-item">
430
+
431
+ <img class="testimonials-img" src="img/blog/1.jpg" alt="">
432
+
433
+ </div>
434
+
435
+ <div class="flex-item">
436
+
437
+ <img class="testimonials-img" src="img/blog/1.jpg" alt="">
438
+
439
+ </div>
440
+
441
+      <div class="flex-item">
442
+
443
+ <img class="testimonials-img" src="img/blog/1.jpg" alt="">
444
+
445
+ </div>
446
+
447
+ <div class="flex-item">
448
+
449
+ <img class="testimonials-img" src="img/blog/1.jpg" alt="">
450
+
451
+ </div>
452
+
453
+ </div>
454
+
455
+ ```
456
+
457
+
458
+
459
+ ```CSS
460
+
461
+ /* 親要素(コンテナ) */
462
+
463
+ .flex-container {
464
+
465
+ background-color: #dfdfdf;
466
+
467
+ display: flex;
468
+
469
+ }
470
+
471
+ /* 子要素(アイテム) */
472
+
473
+ .flex-item {
474
+
475
+ margin: 10px auto;
476
+
477
+ padding: 5px 10px;
478
+
479
+ box-sizing: border-box;
480
+
481
+ background-color: #343434;
482
+
483
+ color: #fff;
484
+
485
+ }
486
+
487
+ ```