CSS を使用して、下部の Flex 列で項目の順序を維持するにはどうすればよいですか?

Question

次のように、水平方向の中央に 1 から 5 にソートされ、コンテナの上部から整列された Flex アイテム列があります。

リーリー リーリー

容器の底に合わせて配置したいのですが。次のスニペットのように flex-direction:column-reverse; を使用してこれを行うことができました:

リーリー リーリー

しかし、ご覧のとおり、これらのプロジェクトは機能不全に陥っています。 CSS を使用して項目の順序を逆にせずに Flex 列を一番下に置く方法はありますか? これまでに知っているすべての Flex プロパティを試しましたが、成功しませんでした。

Answer 1

justify-content 属性 を使用して、主軸 (この場合は垂直方向の配置) に沿ってコンテンツを配置する必要があります。項目を交差軸に沿って配置する方法を定義する align-items を使用しています。

リーリー リーリー

Answer 2

justify-content: end;

を使用できます。

リーリー リーリー