为 @media 查询中的 flexbox 提供适当的 CSS答案

【问题标题】：Appropriate CSS for a flexbox within an @media query为 @media 查询中的 flexbox 提供适当的 CSS
【发布时间】：2019-02-28 23:35:08
【问题描述】：

我需要一些 CSS only 代码，这些代码将使用 flexbox 和 媒体查询 来随屏幕大小而变化...我想要当浏览器在大屏幕或窗口上打开时，我的页面上的评论框将移动到左侧。然后当浏览器窗口变小时，我希望 cmets 只缩小一点到大约 300 像素，它们不会再缩小了

我在下面链接了两个屏幕截图，说明了它现在的样子以及我想要实现的大致目标（最好是评论框也更长）

谢谢

【问题讨论】：

请提供一些代码，并可能提供您的页面布局模型。
具体来说，除了您已经包含的媒体查询之外，请提供minimal reproducible example。 Stack Overflow 包含一个可运行的代码 sn-p 功能，允许您将 HTML、CSS 和 JavaScript 粘贴到单独的窗格中，然后我们可以在阅读时运行这些窗格来演示您的页面/代码。
在尝试使用它之前，您应该了解 flexbox 是什么css-tricks.com/snippets/css/a-guide-to-flexbox 如果您不了解该页面上的内容，那么我建议您在 css 上做一些教程/课程
根据您提供的图片，我不确定这与flexbox 有什么关系。您只需将 width:100%; 添加到您的评论框中即可重新创建它。
大型显示器上的 cmets 右侧是否应该有内容？您是否正在尝试创建 cmets 将居住的侧边栏？

标签： css flexbox media-queries responsive-images

【解决方案1】：

不确定您的布局是什么样的，但请随意使用这些属性并随时阅读https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Flexbox Froggy 也是一款让你熟悉 flexbox 的好游戏 https://flexboxfroggy.com/

main {
  display: flex;
  justify-content: flex-start'; // this will align the items to the left/start of the parent
}

.comment-box {
  width: 33%; // or whatever you want the width to be. Percentages are responsive
}

@media(max-width: 960px){
  main {
    justify-content: center;
  }

  .comment-box{
    width: 95%
    min-width: 300px
  }
}

【讨论】：

感谢您的回答！我今晚要去看看！再次感谢！！