Flexboxの縦の配列が崩れます

前提・実現したいこと

1.Flexboxで子要素が縦3つ横4つに並べて表示したい。
2.子要素内の長いテキストを自動的に改行させたい。
よろしくお願いいたします。

発生している問題・エラーメッセージ

1.子要素の一番最初の列が右側にずれてしまいます。
2.一番最後の子要素のテキストが改行せずにあふれてしまいます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<style>
6<!--
7
8#main{
9  display: flex;
10  display: -webkit-flex;
11  flex-wrap: wrap;
12  -webkit-flex-wrap: wrap;
13  justify-content: space-around;
14  -webkit-flex-justify-content: space-around;
15  box-sizing: border-box;
16  overflow: hidden;
17  width : 900px;
18  padding : 0px 10px;
19  background: #fff;
20  margin-bottom : 0px;
21  margin-top : 0px;
22}
23
24.main-fl{
25	border-top-width : 1px;border-style : solid;border-color : #f1f1f1;
26	width : 170px;
27	height : 80px;
28	border-left-width : 1px;
29	border-right-width : 1px;
30	border-bottom-width : 1px;
31	text-decoration: none;
32  　margin-left : 5px;
33    margin-right : 5px;
34    margin-top : 10px;
35    margin-bottom : 5px;
36    border-radius: 8px;
37    text-align : center;
38    align-items: center;
39    overflow: visible;
40}
41
42-->
43</style>
44<title></title>
45</head>
46<body>
47     <div id="main">
48      　 <a href="#"><div class="main-fl">test</div></a>
49      　 <a href="#"><div class="main-fl">testtest</div></a>
50         <a href="#"><div class="main-fl">test</div></a>
51         <a href="#"><div class="main-fl">testtest</div></a>
52         <a href="#"><div class="main-fl">testtest</div></a>
53         <a href="#"><div class="main-fl">test</div></a>
54         <a href="#"><div class="main-fl">testtest</div></a>
55         <a href="#"><div class="main-fl">test</div></a>
56         <a href="#"><div class="main-fl">test</div></a>
57         <a href="#"><div class="main-fl">testtest</div></a>
58         <a href="#"><div class="main-fl">testtesttest</div></a>
59         <a href="#"><div class="main-fl">testtesttesttesttesttesttesttesttesttest</div></a>
60     </div>
61
62</body>
63</html>

試したこと

1.子要素を等間隔に配列する為に、親要素にjustify-content: space-around;を記述しました。
2.テキストのあふれ防止に.main-flにoverflow: visible;を記述しました。(<br>による改行が良いのでしょうか？)

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

子要素の一番最初の列が右側にずれてしまいます。

こちらはkei344様が仰っているように、全角スペースをとれば解決するかと思います。

一番最後の子要素のテキストが改行せずにあふれてしまいます。

こちらについてはいずれかのaタグにword-break: break-allなどを指定すれば解決します。
単語ごとに改行させたい場合はword-break: break-wordを指定してください。
aタグに、と書きましたが、ページ全体にかかって問題ない内容かと思いますので、bodyなどに指定してもいいかと思います。

投稿2019/06/28 05:53

Noty

総合スコア14

kurobuta

2019/06/28 07:20

有難うございます、感謝いたします。。上手く表示しました。

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

ベストアンサー

1.子要素の一番最初の列が右側にずれてしまいます。

html内に全角空白が入っているので除去してください。

2.一番最後の子要素のテキストが改行せずにあふれてしまいます。

word-wrapを追加してください。

css
1.main-fl{
2   word-wrap: break-word;
3}

投稿2019/06/28 05:52

編集2019/06/28 05:52

zushi0905

総合スコア683

kurobuta

2019/06/28 07:20

有難うございます、感謝いたします。上手く表示しました。

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

とりあえずコメントに囲ったところに全角の空白が入っています。

CSS
1.main-fl{
2    border-top-width : 1px;border-style : solid;border-color : #f1f1f1;
3    width : 170px;
4    height : 80px;
5    border-left-width : 1px;
6    border-right-width : 1px;
7    border-bottom-width : 1px;
8    text-decoration: none;
9  /*　*/margin-left : 5px;
10    margin-right : 5px;
11    margin-top : 10px;
12    margin-bottom : 5px;
13    border-radius: 8px;
14    text-align : center;
15    align-items: center;
16    overflow: visible;
17}

HTML
1     <div id="main">
2      <!--　--> <a href="#"><div class="main-fl">test</div></a>
3      <!--　--> <a href="#"><div class="main-fl">testtest</div></a>
4         <a href="#"><div class="main-fl">test</div></a>
5         <a href="#"><div class="main-fl">testtest</div></a>
6         <a href="#"><div class="main-fl">testtest</div></a>
7         <a href="#"><div class="main-fl">test</div></a>
8         <a href="#"><div class="main-fl">testtest</div></a>
9         <a href="#"><div class="main-fl">test</div></a>
10         <a href="#"><div class="main-fl">test</div></a>
11         <a href="#"><div class="main-fl">testtest</div></a>
12         <a href="#"><div class="main-fl">testtesttest</div></a>
13         <a href="#"><div class="main-fl">testtesttesttesttesttesttesttesttesttest</div></a>
14     </div>