三列固定和可变宽度的行

以下是一个示例代码，展示了如何创建一个包含三列的行，其中第一列和第三列具有固定宽度，而第二列具有可变宽度。

HTML代码：

<div class="row">
  <div class="column fixed-width">固定宽度列1</div>
  <div class="column variable-width">可变宽度列2</div>
  <div class="column fixed-width">固定宽度列3</div>
</div>

CSS代码：

.row {
  display: flex;
}

.column {
  border: 1px solid black;
  padding: 10px;
}

.fixed-width {
  width: 100px;
}

.variable-width {
  flex-grow: 1;
}

在上面的代码中，我们首先创建一个类名为“row”的div元素，并应用了display: flex样式，这使得该行的所有子元素都成为一个弹性容器。

然后，我们创建了三个类名为“column”的div元素作为行的子元素。我们为这些列添加了一些基本的样式，例如边框和内边距。

对于第一列和第三列，我们分别为它们创建了一个类名为“fixed-width”的样式，并设置了固定的宽度为100px。

对于第二列，我们为其创建了一个类名为“variable-width”的样式，并设置了flex-grow: 1属性。这样，第二列将会自动填充剩余的空间，并且它的宽度将根据可用空间的大小而自动调整。

通过以上代码，我们可以创建一个包含三列固定和可变宽度的行。您可以根据需要调整列的宽度和样式。