css 弹性盒 一部分子元素固定居左，一部分子元素固定居右

CSS弹性布局（Flexbox）是一种用于创建灵活、响应式的容器布局的技术。如果你想让一部分子元素固定在容器的左边，而另一部分子元素固定在右边，你可以使用`display: flex;`将容器设置为弹性布局，并结合一些关键属性：

1. **主轴方向**：默认情况下，Flexbox会沿着主轴（从左到右在常规布局下）对齐项目。你可以通过`flex-direction`属性改变这个方向，比如设置为`row-reverse`会使子元素从右向左排列。

2. **对齐方式**：对于固定位置的元素，可以使用`justify-content`。设为`flex-start`（默认值）会让左侧元素靠左对齐，右侧元素靠右对齐。如果想让右侧元素始终在右边，可以在需要的位置添加负宽度(`width: -100%`)。

   .container {
     display: flex;
     justify-content: space-between;
   }
   
   .left-item {
     /* 设置左侧元素样式 */
   }

   .right-item {
     position: relative; /* 如果不是固定定位，这里可以考虑使用`
     width: -100%;
     margin-left: auto; /* 固定右侧 */
   }

3. **子元素定位**：对于左右固定的子元素，直接指定它们的`position`属性为`relative`或`absolute`即可。但请注意，这种方法可能影响到其他兄弟元素的布局，因此最好为这两种类型的子元素分别设置`order`属性，以便调整它们在容器中的顺序。