Q&A
「 □が７つ(flex item) 」8つですね（笑） こういう感じのものが作れるソースを見せてもらうと、回答しやすいと思います。わたしは分かりませんが（笑）
以下のような並びの要素を持ったflex boxがあったとします。
□が8つ(flex item)
flex box の横幅最大値は1000pxで可変
flex itemは30%とかでそれぞれの間に余白を均等にしたい。
frex-wrap:wrapにして３つで折り返す。
以下のようなレイアウトを作りたいです。
詳しい方いらっしゃいますか？
追記
liの両脇は均等にしたい感じです。
liのwidth:25%とかでもセンターに全体でセンターしたいのです。
space-aroundやspace-betweenも試したのですがわかりませんでした。
grewやshrinkなどでできるのかなと思い、質問させていただきました。
追記２
margin:1%でliの余白をとっておりますが、これは例えばspaec-betweenみたいにうまいことできるのであればそちらで制御してもOKです。
ソースコード
html
1<!DOCTYPE HTML> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>display:flex layout</title> 6</head> 7<body> 8<style> 9ul { 10 width: 100%; 11 max-width:1000px; 12 padding: 0px; 13 box-sizing: border-box; 14 background: #fff; 15 border:solid 1px #333; 16 display:flex; 17 flex-direction:row; 18 flex-wrap:wrap; 19 justify-content: center; 20} 21li { 22 background: #f00; 23 width: 30%; 24 border: none; 25 margin: 1%; 26 padding:4% 2%; 27 box-sizing:border-box; 28 text-align: center; 29 list-style:none; 30} 31</style> 32<ul> 33<li>項目１</li> 34<li>項目２</li> 35<li>項目３</li> 36<li>項目４</li> 37<li>項目５</li> 38<li>項目６</li> 39<li>項目７</li> 40<li>項目８</li> 41</ul> 42</body> 43</html> 44
回答1件
0
justify-content: center;で中央寄せになっているので、justify-content: flex-start;として左寄せにすると良いです。
追記
そのままだと右側に隙間が空くので、li要素のwidth: 30%;をwidth: 31.33%;に変更して調整して下さい。
追記2
次のようなスタイルを追加する事で対応できます。
justify-contentはcenterのままにしておいてください。
li要素のwidthやmarginなどを変更したり、それによって折り返す位置が変わったりした場合には調整が必要になります。
CSS
1li:nth-child(3n + 2):last-child { 2 margin-right: 33%; 3} 4 5li:nth-child(3n + 1):last-child { 6 margin-right: 65%; 7}
投稿2016/03/19 14:02
編集2016/03/19 18:53
総合スコア617
あなたの回答
tips
プレビュー
