Flexbox属性解析：flex-direction: column; 实现垂直排列

"解析以下代码flex-direction: column;" 这段代码 flex-direction: column; 是用于设置弹性容器中子元素的排列方向为垂直方向（从上到下）。\n\n弹性容器是指设置了 display: flex; 或 display: inline-flex; 的元素。在这个容器中，子元素默认是水平排列的。通过设置 flex-direction 属性，可以改变子元素的排列方向。\n\n当设置为 column 时，子元素会按照垂直方向从上到下排列。此时，子元素的主轴是垂直方向，交叉轴是水平方向。\n\n下面是一个例子：\n\nHTML代码：\n\nhtml\n<div class="container">\n <div class="item">Item 1</div>\n <div class="item">Item 2</div>\n <div class="item">Item 3</div>\n</div>\n\n\nCSS代码：\n\ncss\n.container {\n display: flex;\n flex-direction: column;\n}\n\n.item {\n width: 100px;\n height: 50px;\n background-color: gray;\n margin: 10px;\n}\n\n\n在这个例子中，container 是一个弹性容器，设置了 flex-direction: column;。子元素 item 的排列方向就会变为垂直方向。\n\n如果没有设置 flex-direction 属性，默认值是 row，子元素会按照水平方向从左到右排列。