使用flex布局实现左右两侧100px固定，中间宽度根据屏幕宽度自适应

在Flex布局中，你可以通过设置容器属性`display: flex; justify-content:`来实现左右两侧固定的元素和中间自适应的内容。这里是一个基本的示例：

.container {
  display: flex;
  justify-content: space-between;
}

.left-side {
  width: 100px;
  /* 其他样式 */
}

.right-side {
  width: 100px;
  /* 其他样式 */
}

.main-content {
  flex-grow: 1; /* 自动填充剩余空间，保证中间内容自适应 */
  /* 如果需要限制最大宽度，可以添加 max-width: 自适应宽度值; */
}

在这个例子中，`.container`是包含所有元素的父容器，`.left-side`和`.right-side`作为两个固定的侧边栏，它们各自的宽度固定为100px。`.main-content`则使用了`flex-grow: 1`使其能够占用剩下的所有可用空间，以适应屏幕宽度的变化。

相关问题

flex布局宽度自适应

要实现flex布局宽度自适应，可以使用flex属性来实现。在引用中的示例中，通过设置`.box`的`display: flex;`属性，使其成为一个flex容器，然后设置`.left`和`.right`的宽度为固定值，如100px，再设置`.right`的`flex: 1;`属性，表示右侧元素会自动占据剩余的可用空间。这样就实现了左侧固定，右侧自适应的布局效果。同样，引用中的示例是实现两侧固定，中间自适应的布局效果。在`.box`中设置`display: flex;`属性，然后通过设置`.left`和`.right`的宽度为固定值，如100px，并在`.center`中设置`flex: 1;`属性，使其自动占据剩余的可用空间。这样就实现了两侧固定，中间自适应的布局效果。如果想要实现左侧文字可以根据文字长短自动调整宽度，并在一行显示不下时省略溢出，可以使用`flex-shrink`属性来控制元素的收缩比例。当左侧文字过长时，设置`flex-shrink: 1;`可以使其收缩，而右侧文字则不受影响，保持完整显示。同理，当右侧文字过长时，设置`flex-shrink: 1;`可以使左侧文字完整显示，而右侧文字省略溢出。这样就实现了左侧文字根据长度自动调整宽度，并溢出省略的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

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;
}