Html 更改flexbox布局以显示块格式

我有一个部分是通过一个flex box显示的。这非常有效，但当视口达到640px或更小的大小时，我希望能够以宽度为100%的

display:block

方式显示所有三个部分。我尝试将

#contact部分

更改为

display:block

，但它完全脱离了我使用

flex

的格式

我希望它在640像素下看起来像这样

有人知道我如何在不丢失flex格式的情况下，或者至少让它在这个视口中工作吗

#联系部分{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
颜色：#FFF；
背景：#00a16d；
填充：1em；
}
#联络组：前{
内容：“；
弹性：0 0 1px；
高度：3em；
背景：#FFF；
顺序：2；
}
#接触段左{
字号：1.5em；
顺序：1；
字体：斜体；
}
#右联络处{
背景：url（“../icons/envelope.png”）居中/不包含重复；
字号：2em；
顺序：3；
填充：1em 0；
}
#右a联络处{
颜色：#FFF；
文字装饰：无；
}
/*--------------------------媒体查询640------------------------------------*/
@媒体屏幕和屏幕（最大宽度：640像素）{
#接触段{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
填料：1米2米；
}
#联络组：前{
弹性：0 0 1px；
高度：3em；
顺序：2；
显示：块；
宽度：100%；
}
#接触段左{
字号：1.5em；
顺序：1；
显示：块；
宽度：100%；
}
#右联络处{
字号：2em；
顺序：3；
填充：1em 0；
显示：块；
宽度：100%；
}
}

告诉我们更多关于您的数字营销项目。

您可以使用

min width

代替mediaqueries和

flex wrap:wrap

，并最终在第一个元素上使用

边框来删除伪
：：before
。见&


#联系部分{
显示器：flex；
柔性包装：包装；
证明内容：周围的空间；
对齐项目：居中；
颜色：#FFF；
背景：#00a16d；
}
#联系人部分：在{}#联系人部分左侧之前{
字号：1.5em；
字体：斜体；
最小宽度：320px；
边框顶部：1米实心透明；
边框底部：1米实心透明；
右边框：1px纯白；
填充：1em；
弹性：1；
}
#右联络处{
背景：url（“../icons/envelope.png”）居中/不包含重复；
字号：2em；
填充：1em；
弹性：1；
最小宽度：320px；
}
#右a联络处{
颜色：#FFF；
文字装饰：无；
}

告诉我们更多关于您的数字营销项目。
我已将方向更改为“列”，似乎现在它可以工作了


#联系部分{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
颜色：#FFF；
背景：#00a16d；
填充：1em；
}
#联络组：前{
内容：“；
弹性：0 0 1px；
高度：3em；
背景：#FFF；
顺序：2；
}
#接触段左{
字号：1.5em；
顺序：1；
字体：斜体；
}
#右联络处{
背景：url（“../icons/envelope.png”）居中/不包含重复；
字号：2em；
顺序：3；
填充：1em 0；
}
#右a联络处{
颜色：#FFF；
文字装饰：无；
}
/*--------------------------媒体查询640------------------------------------*/
@媒体屏幕和屏幕（最大宽度：640像素）{
#接触段{
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
填料：1米2米；
}
#联络组：前{
柔性：0 10px；
顺序：2；
显示：块；
宽度：100%；
背景色：红色；
}
#接触段左{
字号：1.5em；
顺序：1；
显示：块；
宽度：100%；
}
#右联络处{
字号：2em；
顺序：3；
填充：1em 0；
显示：块；
宽度：100%；
文本对齐：居中；
}
}

告诉我们更多关于您的数字营销项目。
谢谢。这样做的唯一一点是它失去了我为每个部分所做的居中。@Paul您只需要添加它，这是次要的，文本对齐：居中在那里是有效的，或者用对齐项目和对齐内容来叠加额外级别的灵活性。如果你不清楚的话，我可以举个例子：）谢谢。无论如何，我可以将“联系我们”集中到图像中吗？现在，图像居中，但contact us向左对齐。还有，有没有办法让伪元素白线出现？谢谢。无论如何，我可以将“联系我们”集中到图像中吗？现在，图像居中，但contact us向左对齐。另外，无论如何，要获得
顺序：2
；伪白线出现了吗？这不是真正的联系我们没有对齐，这是一个内部。添加了文本对齐：居中到右侧，现在居中。至少在Chrome中，伪代码显示。。。我会在FF和IEAH登记。。我认为周围的空间会居中对齐项目，如果没有它，则会居中对齐项目。好的，我添加了
text align:center
，但我使用的是Chrome，媒体查询中没有显示伪元素。我只是不明白你为什么看不到伪元素。。。为了以防万一，我把它做成了红色和更大的。它在FF和IE中工作，我刚检查过