适用于@media查询中的flexbox的CSS

Question

我需要一些CSS代码，它将使用flexbox和媒体查询来改变屏幕大小......我希望在大屏幕或窗口上打开浏览器时，我页面上的注释框会移动到左侧。然后当浏览器窗口变小时，我希望评论只缩小到约300px，在那里它们不再缩小

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

谢谢

Answer 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
  }
}