写出三栏布局,左侧固定宽度100px,右侧固定宽度200px,中间宽度自适应浏览器窗口

<div style="display:flex;">
<div style="width:100px; background-color:red;"></div>
<div style="flex:1; background-color:blue;"></div>
<div style="width:200px; background-color:green;"></div>
</div>

相关问题

假设高度默认 100px ，请写出三栏布局，其中左栏:右栏各为 300px，中间自适应

以下是三栏布局的代码：

<div style="display: flex;">
  <div style="width: 300px; height: 100px; background-color: red;"></div>
  <div style="flex: 1; height: 100px; background-color: green;"></div>
  <div style="width: 300px; height: 100px; background-color: blue;"></div>
</div>

其中，左栏和右栏的宽度都为 300px，中间的宽度使用了 flex 布局的 flex: 1 属性，自适应宽度。高度默认为 100px。

使用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`使其能够占用剩下的所有可用空间，以适应屏幕宽度的变化。