flex内容固定在两边

如果你想实现Flex布局中内容固定在两侧的效果，可以将两侧的元素分别设置为"不可伸缩"，同时设置宽度，中间的元素设置为"可伸缩"，并且设置为"占据剩余空间"。

具体的实现方法如下：

1. 父容器设置为"弹性容器"，并且设置为横向排列，内容居中对齐。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

2. 左侧和右侧的元素设置宽度，同时设置为"不可伸缩"。

.left {
  width: 100px;
  flex-shrink: 0;
}

.right {
  width: 100px;
  flex-shrink: 0;
}

3. 中间的元素设置为"可伸缩"，并且设置为"占据剩余空间"。

.center {
  flex: 1;
}

这样就可以实现Flex布局中内容固定在两侧的效果了。

相关问题

flex 布局 左右两边 右边背景色高度100%无效

### 回答1：
在使用flex布局时，无论左右两边的元素如何设置背景色，右边元素的高度无法自动填充为100%。这是因为flex布局默认下，右边元素的高度会根据其内容的高度自动调整而不是占满剩余空间。

解决这个问题的方法有两种：

1. 使用绝对定位：将右边元素的position属性设置为absolute，然后设置top、bottom、left、right属性为0，这样右边元素的高度就可以填充到父容器的100%。

2. 利用flex-grow属性：给左边元素和右边元素设置相同的flex-grow值即可。flex-grow属性定义了在剩余空间被分配之前，各个flex项目需要扩展的比例。默认值为0，即不扩展。将左右两个元素的flex-grow都设置为1，它们将平均分配剩余的空间，使右边元素的高度占满剩余空间。

这两种方法都可以实现右边元素的高度占满父容器的100%，具体选择哪种方法取决于具体的布局需求和设计要求。

### 回答2：
在 flex 布局中，可以使用 `flex` 属性来控制元素的尺寸和位置。但是对于右边背景色高度设置为100%无效的问题，可能是由于父容器没有设置合适的高度值导致的。

在 flex 布局中，如果父容器的高度没有被明确指定或无法计算出准确的高度，设置元素的高度为百分比值是无效的。这是因为百分比值在没有明确的值参考的情况下无法准确计算出具体的数值。

解决该问题的方法有以下几种：
1. 为包含右边背景色的元素设置一个明确的高度值，例如像素值或者rem单位。这样就可以确保右边背景色的高度可以被正确地计算和渲染出来。

2. 如果父容器是一个固定高度的元素，可以尝试将右边的元素设置为绝对定位，并设置 `top: 0; bottom: 0;` 来撑满整个父容器的高度。

3. 可以考虑使用其他布局方式来实现背景色高度为100%的效果，例如使用网格布局（Grid）或者定位（Positioning）布局。

综上所述，如果在 flex 布局中右边背景色的高度设置为100%无效，可能是由于父容器高度未指定或无法计算导致的。可以通过设置明确的高度值、使用绝对定位或者尝试其他布局方式来解决这个问题。

css 两边自适应 中间固定宽度居中

这个问题中的需求是实现一个宽度固定，两侧自适应的布局。可以使用Flexbox布局或者CSS Grid布局来实现。具体实现方法如下：

使用Flexbox布局：

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

.container {
    display: flex;
}

.left, .right {
    flex: 1;
}

.center {
    width: 960px;
    margin: 0 auto;
}

使用CSS Grid布局：

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

.container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.center {
    width: 960px;
    justify-self: center;
}