Q&A
Flexboxで進行方向←(右から左)。かつ複数行対応。2行目も←、3行目も←とするレイアウト指定するにはどうすれば良いでしょうか？
開始点
・右上
1行目終点
・左上
最終行目終点
・左下
回答1件
0
ベストアンサー
flex-direction: row-reverse;
flex-wrap: wrap;
と指定することでできると思います。
HTML
1<html> 2<body> 3<style> 4.f-box { 5 display:flex; 6 flex-direction:row-reverse; // 右から左 7 flex-wrap:wrap; // 自動改行 8} 9.f-box-r { 10 border: 1px #000000 solid; 11 text-align:center; 12 background-color:#000000; 13 margin: 3px; 14 color:white; 15 width:500px; 16 height:50px; 17} 18</style> 19 20<div class="f-box"> 21 <div class="f-box-r">1</div> 22 <div class="f-box-r">2</div> 23 <div class="f-box-r">3</div> 24 <div class="f-box-r">4</div> 25 <div class="f-box-r">5</div> 26</div> 27</body> 28</html>
投稿2016/05/17 04:17
総合スコア21
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/18 03:02