Подходящий CSS для flexbox в запросе @media

Question

мне нужен код только CSS , который будет использовать flexbox и медиазапрос для изменения размера экрана ... Я хочу, чтобы поля для комментариев были включеныМоя страница должна быть перемещена влево, когда браузер открыт на большом экране или в окне.затем, когда окно браузера становится меньше, я хочу, чтобы комментарии немного уменьшились до 300 пикселей, где они больше не будут уменьшаться

Я привел ниже два скриншота того, как это выглядит сейчас и примерно, что я пытаюсьдостичь (желательно с полями для комментариев, а также более длинными)

Спасибо

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