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

当你有一个父元素设置了 `display: block`，并且希望在其内部的子元素应用 flexbox 布局，通常需要做一些调整。由于 `block` 元素默认有自己的独立块级布局，而 `flex` 则是一个行内盒模型，两者之间存在冲突。

你可以通过以下几个步骤实现：

1. **改变父元素的 display**:
将父元素的 `display` 设置为 `flex` 或者 `inline-flex`，这样它会采用 Flexbox 布局，而不是默认的 Block 布局。例如：

   .parent {
     display: flex; /* 或者 inline-flex 如果想要在一排内水平布局 */
   }

2. **清除浮动或者设置子元素**:
如果有浮动影响了子元素，可以给父元素添加 `overflow: auto` 来消除浮动对子元素的影响，或者直接设置子元素为 `float: none`。

3. **指定子元素的 flex 值**:
对于子元素，将它的 `flex` 属性设置为 `1`，这表示子元素将自动伸展以占据剩余的空间，前提是其他兄弟元素没有设置较大的 `flex` 值或预留空间：

   .child {
     flex: 1;
   }

4. **考虑 justify-content 和 align-items**:
如果还需要控制子元素的水平和垂直对齐，可以使用 `justify-content` 和 `align-items` 属性，比如：

   .parent {
     display: flex;
     justify-content: space-between; /* 控制水平方向间距 */
     align-items: center; /* 控制垂直方向对齐 */
   }