弹性盒子组件靠左右两端

弹性盒子布局（Flexbox）是一种现代CSS布局模型，它允许元素在容器内灵活地排列，特别是在处理响应式设计时非常方便。当你说“靠左右两端”，通常是指弹性盒的justify-content属性设置为‘flex-start’和‘flex-end’，分别对应元素默认开始对齐（左对齐）和结束对齐（右对齐）。当设置了这两个值时，元素会在容器的起始位置堆叠，然后从右侧开始依次排列，直到所有空间都被填满或者达到最大宽度。

例如，在HTML和CSS中，你可以这样使用：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <!-- 更多item... -->
</div>

<style>
.container {
  display: flex;
  justify-content: space-between;
}
.item {
  /* 其他样式 */
}
</style>

在这个例子中，`.container`下的`.item`会沿着主轴（默认为水平方向）均匀分布，靠左边对齐，并且尽可能拉伸到右边，留出中间的空白。