当父元素使用了 display: block 属性,子元素想设置flex为1 ，如何实现

当父元素设置了 `display: block` 或者 `display: inline-block` 等块级布局属性时，其内部默认是基于传统的块级格式化上下文（BFC），在这种情况下直接应用 `display: flex` 到子元素上通常是无效的，因为 Flexbox 只能在行内盒（inline boxes）和块级元素（block-level elements）之间创建弹性容器。

为了实现子元素在父元素已为 `block` 的情况下的 Flex 布局，你需要将子元素转换成 Flex 容器，同时可能需要一些额外的技巧。你可以尝试以下方法：

1. **给父元素添加一个新的包含元素**：首先，在父元素内部创建一个新的 `div` 或者其他的元素，并将其设为 `display: flex`。然后把所有原本需要用 Flex 的子元素作为这个新容器的直接子项。

<div class="parent">
  <div class="flex-container">
    <div class="flex-item">内容</div>
  </div>
</div>

CSS:

.parent {
  display: block;
}
.flex-container {
  display: flex; /* 使用 Flex 容器 */
}
.flex-item {
  flex: 1; /* 子元素设置 flex 1 */
}

2. **使用 `display: flex` 和 `display: inline-flex` 的混合**：如果你希望保持原样并且不影响其他元素，可以考虑在父元素内部分别处理。对于那些应该显示 Flex 的部分，使用 `display: inline-flex` 或者直接给其父元素设置 `display: flex`。

<div class="parent">
  <!-- 正常内容 -->
  内容1

  <div class="flex-region">
    <div class="flex-item">内容</div>
  </div>

  <!-- 其他内容 -->
  内容2
</div>

CSS:

.parent {
  display: block; /* 维持原有的 block */
}

.flex-region {
  display: inline-flex; /* 仅对需要 Flex 的区域生效 */
}
.flex-item {
  flex: 1;
}

请注意，这种方法可能需要针对各个浏览器进行兼容性检查，因为不是所有的浏览器都支持 `display: inline-flex` 对块级元素的嵌套。