flex-flowプロパティ

ほんっとにはじめてのHTML5とCSS3
【18-2】Flexbox内のボックスの配置方法を指定しよう　サンプル4

1

2

flex-direction は row-reverse です。

3

4

5

flex-wrap の値は wrap-reverse に。

6

ショートハンドプロパティ flex-flow を使っています

HTML

<body>
<header>略</header>

<div id="container">
  <section>
    <h1>1</h1>
    <p>略</p>
  </section>

 （以下、<section>要素を繰り返し配置）

</div>

<footer>略</footer>
</body>

CSS

div#container {
	display:flex;
	flex-flow: wrap-reverse row-reverse}
div#container section {flex:1 100px}