CSS、flexの中央寄せした後に文字列を左寄せ(行頭揃え)したい

PC画面で見たときにcss、flexの中央寄せ状態で文字列を左寄せ(行頭揃え)したいのですが、
なかなかできないです。
widthを指定すると、仮に二行書いたときにレイアウトが崩れてしまいます

HTML

=====================================================================================

<div class="information"> <h2 class="top"><a href="#" id="">INFORMATION</a></h2> <dl> <div class="pp cc"> <dt>2021-09-28</dt> <dd> <span class="tab tag_wallet">wallet</span><br /> <a href="#">2021年（令和3年）度の採用情報</a>を更新しました。</dd> </div> <div class="pp"> <dt>2021-09-26</dt> <dd> <span class="tab tag_bag">bag</span><br /> <a href="#">制作実績のページ</a>を更新しました。</dd> </div> <div class="pp"> <dt>2021-09-27</dt> <dd> <span class="tab tag_wallet">wallet</span><br /> <a href="">2021年（令和3年）度の採用情報</a>を更新しました。</dd> </div> <div class="pp"> <dt>2021-09-25</dt> <dd> <span class="tab tag_bag">bag</span><br /> <a href="sample.html">制作実績のページ</a>を更新しました。</dd> </div> </dl> </div> ============================================================================================

CSS
@media(min-width:1000px){
.pp{
display: flex;
justify-content: flex-start;/こっち使う/
width: 600px;/親要素に横幅を指定/
margin: 0 auto;/親要素はこれで中央寄せ/
}
}

よろしくお願いいたします。

itagagaki

2021/10/07 12:37

実際にどのような問題が起こっているのかがよくわかりませんので詳しく説明してください。

shuttyy

2021/10/07 14:42

<div class="pp cc"> <dt>2021-09-28</dt> <dd> <span class="tab tag_wallet">wallet</span><br /> <a href="#">2021年（令和3年）度の採用情報採用採用採用採用採用採用採用採用採用採用</a>を更新しました。</dd> </div> このように、仮に二行書いたときにレイアウトが崩れてしまいます。

shuttyy

2021/10/07 14:45

2021-09-28 ここが二行になって崩れます。

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

回答1件

ベストアンサー

flex は子要素の幅の合計が親要素を超えたら、自動で子要素の幅を縮小させるのがデフォルトになってます。それが原因でしょう。flex-shrink: 0; で縮小されないようにできます。

css
1@media(min-width:1000px){
2  .pp{
3    display: flex;
4    justify-content: flex-start;/*こっち使う*/
5    width: 600px;/*親要素に横幅を指定*/
6    margin: 0 auto;/*親要素はこれで中央寄せ*/
7  }
8  .pp dt {
9    flex-shrink: 0; /* これを追加 */
10  }
11}