行頭をそろえたいです。

ページ作成の練習で、下図のように要素が先頭でピッタリとあうようにしたいのですが、左端のやつ以外が揃わずバラバラになってしまいます。これを綺麗に列ごとにそろえる方法を教えていただけないでしょうか？
justyfy-content: flex-start;を試してみましたがうまくいきませんでした。

「理想の完成図」

「自分が作ったもの」

「自分のコード」

HTML
1<html>
2<head>
3<link rel="stylesheet" type="text/css" href="./style.css"/>
4<title>タイトル</title>
5</head>
6
7<body>
8<header>
9  <div class="container">
10
11  </div>
12</header>
13
14<div class="top-wrapper">
15   <h4>企業情報</h4>
16  <div class="container">
17   <div class="container2">
18   <p>Airbnbのご利用方法</p>
19   <p>Airbnb Luxe</p>
20   <p>オリンピック</p>
21   </div>
22    <div class="container3">
23    <p>ニュースルーム</p>
24    <p>HotelTonight</p>
25    <p>採用情報</p>
26    </div>
27     <div class="container4">
28     <p>Airbnb Plus</p>
29     <p>Airbnbビジネスプログラム</p>
30     </div>
31  </div>
32</div>
33
34<div class="lesson-wrapper">
35  <h4>コミュニティ</h4>
36 <div class="container">
37  <div class="container2">
38  <p>ダイバーシティ＆ビロンギング</p>
39  <p>お友達を招待</p>
40  </div>
41   <div class="container3">
42   <p>アクセシビリティ対応</p>
43   </div>
44    <div class="container4">
45    <p>Airbnbアソシエイト</p>
46    </div>
47 </div>
48</div>
49
50<div class="message-wrapper">
51<h4>ホスト</h4>
52 <div class="container">
53  <div class="container2">
54    <p>お部屋を掲載</p>
55    <p>責任あるホスティング</p>
56    <p>コミュニティセンター></p>
57  </div>
58   <div class="container3">
59   <p>オンライン体験をホストする</p>
60   <p>オープンホーム</p>
61   </div>
62    <div class="container4">
63    <p>体験をホストする</p>
64    <p>リソースセンター</p>
65    </div>
66 </div>
67</div>
68
69<div class="bottom-wrapper">
70  <h4>サポート</h4>
71  <div class="container">
72  <div class="container2">
73  <p>Airbnbの新型コロナウイルスに対する取り組み</p>
74  <p>近隣コミュニティサポート</p>
75  </div>
76   <div class="container3">
77   <p>ヘルプセンター</p>
78   <p>トラスト＆セーフティー</p>
79   </div>
80    <div class="container4">
81    <p>キャンセルオプション</p>
82    </div>
83  </div>
84</div>
85
86</body>
87</html>
88

CSS
1body {
2
3}
4
5.container{
6  display: flex;
7  justify-content: flex-start;
8}
9
10.container2 {
11    margin-left: 100px
12
13}
14
15.container3 {
16    margin-left: 100px
17
18}
19
20.container4 {
21    margin-left: 100px
22  
23}
24
25.container2 p {
26  font-size: 15px;
27}
28
29.container3 p {
30  font-size: 15px;
31}
32
33.container4 p {
34  font-size: 15px;
35}
36
37.container h4 {
38  font-size: 12px;
39}
40

ku__ra__ge

2020/11/10 09:07

cssコードを見ると行頭がそろうように意図されていないように思えますが、質問者さんはどのような仕組みで行頭を揃えようとしているのでしょうか？

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

回答2件

こんばんは。

グリッドレイアウトの方がいいかと思います。

サンプル

css
1/*
2body {
3
4}
5
6.container{
7  display: flex;
8  justify-content: flex-start;
9}
10*/
11
12body {
13  display: grid;
14  grid-template-columns: 1fr 1fr 1fr;
15}
16
17.container{
18  display: contents;
19}
20
21[class$="-wrapper"]{ /* 全部書くの面倒だった */
22  display: contents;
23}
24
25h4{
26  grid-column: span 3;
27}

投稿2020/11/10 09:26

Lhankor_Mhy

総合スコア36074

sun-chan

2020/11/14 12:01

ご回答していただきありがとうございます。ProgateのHTMLの中級までしていたのですが、gridという方法があるのは知りませんでした。サンプルを参考にさせていただこうかと思います。gridの事でまた分からなくなれば、teratailでお尋ねさせていただく事があるかもしれませんが、機会があればどうぞよろしくお願いいたします。

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

ベストアンサー

Flexbox なら単純に幅を同じになるように設定すればいいだけです。
CSSも無駄が多いのでリファクタリングしました。

css
1.container{
2  display: flex;
3}
4.container > div {
5  width: 33%;
6  margin-left: 100px
7}
8.container p{
9  font-size: 15px;
10}
11.container h4 {
12  font-size: 12px;
13}

CodePenサンプル

Gridを使うなら、

css
1.container{
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4}
5.container > div {
6  margin-left: 100px
7}
8.container p{
9  font-size: 15px;
10}
11.container h4 {
12  font-size: 12px;
13}