折り返しリストの左寄せ

flex-wrap : wrap;とdisplay:flex;にてリストを横並びに折り返して表示しているのですが
左寄せにしたいのに上手く寄せることができません。
リストの中身の数が３つなのですが現在逆三角形の形となってしまいます。（下の要素が真ん中になってしまう）
上手く左寄せできる方法がありましたらご教授のほどよろしくお願い致します。

<HTML>等の基本タグ省略してます ```HTML <div class="works"> <h1 class="top">works</h1> <ol class="works-list"> <li class="works-2"><img src="img/aaaa.png" alt=""></li> <li class="works-1"><img src="img/aaaa.png" alt=""></li> <li class="works-3"><img src="img/aaaa.png" alt=""></li> </ol> <div class="nav-links"> <a class="prev page-numbers" href=#>«</a> <span class="page-numbers current">1</span> <span class="page-numbers dots">…</span> <a class="next page-numbers" href="#">»</a> </div> 　</div> ``` ```CSS

.works{
text-align:center;
justify-content: center;
color:rgb(111, 79, 81);
margin:0px 0px;
}

.works-list{
flex-wrap : wrap;
display:flex;
margin:40px 0px 50px 0px;
padding:0px;
}

以下レスポンシブ
.works{
margin:30px 0px;
justify-content:flex-start;
}

.works-list img{
width: 80%;
padding:10px 10px;
margin-right: 5%;
}

Lhankor_Mhy

2020/12/07 06:01

.works がHTMLの方にないようですが、無視してかまいませんか？また、ご提示のコードを試してみましたが、問題は再現しませんでした。左寄せになります。

kurimura

2020/12/07 06:05

.worksをHTMLに追加いたしました。

Lhankor_Mhy

2020/12/07 06:12

やはり、問題が再現しませんでした。ご提示いただいていない部分のコードが原因かもしれません。 https://jsfiddle.net/Lhankor_Mhy/n9wcmgrL/

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

回答2件

自己解決

色々と試してみたのですが全体にかけていた*{margin:auto;}が原因かもしれません。
これを消すと左寄せになってくれました。
一応質問自体は自己解決できたのでがこちらに記入させて頂きます。
その代わりにその他のレイアウトが崩れてしまうのですが、
崩さずにmargin:auto;を解除？する方法を誰かご存知ないでしょうか…

投稿2020/12/07 07:12

編集2020/12/07 07:13

kurimura

総合スコア2