使用flex实现三栏布局，两边固定，中间自适应

使用CSS的Flexbox布局可以很容易地实现三栏布局，其中两边固定宽度，中间栏自适应宽度。以下是一个简单的示例：

HTML:

<div class="container"><div class="left">Left</div><div class="center">Center</div><div class="right">Right</div>
</div>

CSS:

.container {display: flex;justify-content: space-between;
}.left, .right {width: 200px; /* 你可以根据需要设置固定的宽度 */background-color: #f0f0f0; /* 为了可视化效果添加的背景色 */
}.center {flex: 1; /* 使中间栏自适应宽度 */background-color: #e0e0e0; /* 为了可视化效果添加的背景色 */
}

在这个示例中，.container元素被设置为display: flex;，使其成为一个flex容器。.left和.right元素被设置了固定的宽度，而.center元素使用了flex: 1;属性，这意味着它会占据剩余的空间，从而实现自适应宽度。justify-content: space-between;则确保了三栏之间有适当的间距。

请注意，如果你希望三栏之间紧密相连，没有间距，你可以移除justify-content: space-between;这一行。另外，背景色只是为了在示例中更好地展示布局效果，你可以根据需要自行调整或移除。

父元素宽度不固定，左侧及中间元素宽度自适应，右侧元素宽度固定，这种布局样式该怎么写？

可以使用flex布局实现这种样式，但是也要视情况而定，一般分为两种情况：1.左侧和中间元素平均分配剩余的宽度；2.左侧和中间元素需要按照自己的子元素分配剩余宽度

一、平均分配剩余的宽度

父元素容器使用display: flex，将子元素放在一行中。

左侧和中间元素使用flex-grow: 1，表示它们的宽度自适应，并且平均分配剩余的宽度。

右侧元素使用width: 200px，表示它的宽度固定为200px。

Html代码：

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

CSS代码：

 
.container {display: flex;align-items: center;
}
.left {flex-grow: 1;background-color: red;
}
.middle {flex-grow: 1;background-color: green;
}
.right {width: 200px;background-color: blue;
}

二、按照自己的子元素分配剩余宽度

使用flex-basis来设置它们的初始宽度，再配合flex-grow来实现自适应剩余宽度的效果。

左侧和中间元素使用相同的样式，分别设置flex-basis: 0和flex-grow: 1，表示它们的初始宽度为0，但是可以自适应剩余宽度。

右侧元素的宽度仍然是固定的，使用了width: 200px。

这样设置之后，左侧和中间元素的宽度会按照它们内部的内容自适应，如果左侧元素的内容比中间元素的内容多，那么左侧元素会占用更多的宽度。如果中间元素的内容比左侧元素的内容多，那么中间元素会占用更多的宽度。同时，右侧元素的宽度仍然是固定的。Html代码：

<div class="container"><div class="left"><div class="content">左侧内容</div></div><div class="middle"><div class="content">中间内容</div></div><div class="right"><div class="content">右侧内容</div></div>
</div>

CSS代码：

 
.container {display: flex;align-items: center;
}
.left, .middle {flex-basis: 0;flex-grow: 1;
}
.right {width: 200px;
}
.content {padding: 10px;background-color: #f5f5f5;
}

flex左边自适应宽度,右边

在CSS中，要实现一个布局，其中左侧元素自适应宽度，右侧元素固定宽度，你可以使用Flexbox或者Grid布局。这里我将分别展示如何使用这两种布局来实现你的需求。

使用Flexbox

<div class="container"><div class="left">左侧自适应</div><div class="right">右侧固定</div>
</div>

.container {display: flex;
}.left {flex-grow: 1; /* 使左侧元素自适应宽度 */background-color: lightblue; /* 仅为了区分 */
}.right {width: 200px; /* 右侧固定宽度 */background-color: lightcoral; /* 仅为了区分 */
}

用Grid布局

<div class="grid-container"><div class="left">左侧自适应</div><div class="right">右侧固定</div>
</div>

.grid-container {display: grid;grid-template-columns: 1fr 200px; /* 1fr表示自适应宽度，200px是右侧的固定宽度 */
}.left {background-color: lightblue; /* 仅为了区分 */
}.right {background-color: lightcoral; /* 仅为了区分 */
}