CSS |弹性盒
Flex-box 只是一种 Web 布局方法，它允许开发人员轻松地对齐元素并进行更多操作。 flex-box 的整个概念取决于两大支柱：主轴和交叉轴。
flex-box 的表示
要左/右对齐 flex 项目，我们需要处理主轴，这可以使用 flex-box 属性来完成。详细解释如下：
示例 1：使用 flex-direction 属性右对齐 flex 项
Right Alignment
one
two
three
four
当 flex-direction 设置为“row-reverse”时，它不仅右对齐 flex 项目，而且还反转项目的顺序。简单来说，弹性项目现在从右向左扩展，如图所示。
输出：
图1
示例 2：使用 justify-content 属性右对齐 flex 项
Right alignment
one
two
three
four
当 justify-content 设置为“flex-end”时，它会立即将所有 flex-item 沿主轴移动到 flex-container 的末尾，即 flex 项目右对齐。它与上面使用的方法仅在方向上不同，因为在这种情况下，flex-items 只会从左到右扩展。用给定的数字会更清楚。
输出：
图2