css弹性布局盒子怎么设置

使用 CSS 弹性布局，可以轻松地实现各种复杂的页面布局。以下是设置弹性布局的基本步骤：

1. 创建一个父元素，并设置 `display: flex;` 属性，将其转换为弹性容器。

   .container {
     display: flex;
   }

2. 设置子元素的排列方式。可以使用 `flex-direction` 属性来设置主轴的方向，`justify-content` 属性来设置子元素在主轴上的排列方式，`align-items` 属性来设置子元素在交叉轴上的排列方式。

   .container {
     display: flex;
     flex-direction: row; /* 主轴方向为水平方向 */
     justify-content: center; /* 子元素在主轴上居中排列 */
     align-items: center; /* 子元素在交叉轴上居中排列 */
   }

3. 设置子元素的尺寸和排列顺序。可以使用 `flex` 属性来设置子元素的尺寸和排列顺序。

   .item {
     flex: 1; /* 子元素的尺寸为 1，即平分剩余空间 */
     order: 1; /* 子元素的排列顺序为 1 */
   }

通过设置以上属性，可以轻松地实现各种弹性布局效果。弹性布局非常灵活，可以适应不同的屏幕尺寸和设备，是现代 Web 开发中常用的一种布局方式。