display: flex 是一种 CSS 属性，它可以改变元素的布局方式为弹性盒子布局，可以通过 flex-direction 属性来改变主轴方向，从而影响弹性盒子中子元素的排列方式。
flex-direction 属性有以下可选值：
row：默认值，主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上端。
column-reverse：主轴为垂直方向，起点在下端。
以下是示例代码：
.container {
display: flex;
flex-direction: row-reverse;
}
以上代码将 .container 元素设置为弹性盒子，主轴方向为水平方向，起点在右端。这意味着子元素将按从右至左的顺序排列。
除了 flex-direction，还有其他属性可以用于改变弹性盒子的轴，例如：
justify-content：用于定义弹性盒子中子元素在主轴方向上的对齐方式。
align-items：用于定义弹性盒子中子元素在侧轴方向上的对齐方式。
align-content：用于定义多行弹性盒子的行在侧轴方向上的对齐方式。
以下是这些属性的可选值：
justify-content：
flex-start：子元素在主轴方向上靠左对齐。
flex-end：子元素在主轴方向上靠右对齐。
center：子元素在主轴方向上居中对齐。
space-between：子元素在主轴方向上平均分布，两端不留空白。
space-around：子元素在主轴方向上平均分布，每个元素周围留有相等的空白。
space-evenly：子元素在主轴方向上平均分布，每个元素前后留有相等的空白。
align-items：
stretch：默认值，子元素在侧轴方向上拉伸以填满容器。
flex-start：子元素在侧轴方向上靠上对齐。
flex-end：子元素在侧轴方向上靠下对齐。
center：子元素在侧轴方向上居中对齐。
baseline：子元素在侧轴方向上以其基线对齐。
align-content：
stretch：默认值，如果子元素高度不足以填满容器，则拉伸子元素以填满整个容器。
flex-start：子元素在侧轴方向上靠上对齐。
flex-end：子元素在侧轴方向上靠下对齐。
center：子元素在侧轴方向上居中对齐。
space-between：在每行之间平均分配空白，第一行在顶部，最后一行在底部。
space-around：在每行之间平均分配空白，每一行前后都有空白。
space-evenly：在每行之间平均分配空白，每一行前后和每行之间的空白都相等。
下面是示例代码，演示如何使用这些属性：
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
以上代码将 .container 元素设置为垂直方
向的弹性盒子，子元素将按从上至下的顺序排列。justify-content 和 align-items 属性都被设置为 center，这意味着子元素将在主轴和侧轴方向上居中对齐。如果子元素高度不足以填满整个容器，它们将被拉伸以填满整个容器。
此外，还有一些其他的属性可以用于控制弹性盒子中子元素的大小和位置，例如 flex-grow、flex-shrink 和 flex-basis 属性。这些属性可以用于指定子元素在弹性盒子中所占据的空间大小、在空间不足时缩小的比例以及子元素在主轴方向上的初始大小。
总之，通过灵活使用 display: flex 和其它相关的 CSS 属性，我们可以轻松地控制弹性盒子中子元素的布局、对齐方式、大小和位置，从而创建出各种各样的布局效果。