Блог

Главная - Вопросы по программированию - Сделайте четные пробелы в моих столбцах с помощью flexbox, используя пробел между

Сделайте четные пробелы в моих столбцах с помощью flexbox, используя пробел между

#html #css #sass #flexbox

#HTML #css #дерзость #flexbox

Вопрос:

Привет, ребята, как я могу добиться пробелов в моих трех столбцах? Я уже использую пробел между ними, но это ничего не меняет, но я попытался использовать margin-top, и результат не тот, который я хочу.

 .weather {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  amp;__title {
    flex: 33%;
    border: 3px solid red;
  }
  amp;__input {
    flex: 33%;
    border: 3px solid red;
  }
  amp;__details {
    flex: 33%;
    border: 3px solid red;
    background-color: rgba(112, 112, 112, 0.7);
  }
}  
 <section className="weather">
  <div className="weather__background" />

  <div className="weather__title">
    <h1>React Weather</h1>
  </div>

  <div className="weather__input">
    <h1>React Weather</h1>
    <input onChange={getLocation} required autoFocus placeholder="Enter a Country..." />
  </div>

  <div className="weather__details">

    <h1>React Weather</h1>
  </div>



</section>

изображение

Комментарии:

1. Вы пытаетесь заставить их занимать всю высоту экрана?

Ответ №1:

Я не уверен, нужно ли вам исправлять пробел между разделами внутри тега weather или тега weather__background. Обратите внимание, что flex-box должен иметь прямую связь родитель > потомок, например, вы использовали flex-direction: column; в теге div.weather, но следующий дочерний элемент этого тега — div.weather__background. Чтобы flex-box работал, вы должны использовать flex-direction или на weather__background или удалить этот тег и использовать непосредственно в .weather div.

Я не знаю, может ли этот код вам помочь:

 .weather__background {
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  .weather__background > * {
    box-sizing: border-box;
    margin: 5px;
    padding: 5px 15px; }
    .weather__background > *:hover {
      background-color: rgba(112, 112, 112, 0.7); }

.weather__input {
  display: flex;
  flex-direction: row;
  align-items: center; }
  .weather__input input {
    margin-left: 10px;
    padding: 3px; }  
 <section class="weather">
  <div class="weather__background" />

    <div class="weather__title">
      <h1>React Weather</h1>
    </div>

    <div class="weather__input">
      <h1>React Weather:</h1>
      <input onChange={getLocation} required autoFocus placeholder="Enter a Country..." />
    </div>

    <div class="weather__details">

    <h1>React Weather</h1>
    
  </div>
</section>

Если вам нужна SCSS-версия style (фрагмент кода, я думаю, не будет выполняться):

 .weather {
  
  amp;__background{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    > * {
      box-sizing: border-box;
      margin: 5px;
      padding: 5px 15px;
      amp;:hover{
        background-color: rgba(112, 112, 112, 0.7);
      }
    }
  }

  
  amp;__input {
    display: flex;
    flex-direction: row;
    align-items: center;
    input {
      margin-left: 10px;
      padding: 3px;
    }
  }
  
  
}  
 <section class="weather">
  <div class="weather__background" />

    <div class="weather__title">
      <h1>React Weather</h1>
    </div>

    <div class="weather__input">
      <h1>React Weather:</h1>
      <input onChange={getLocation} required autoFocus placeholder="Enter a Country..." />
    </div>

    <div class="weather__details">

    <h1>React Weather</h1>
    
  </div>
</section>

Обычно использование пробела между ними хорошо работает, когда у вас есть фиксированное измерение в вашем родительском контейнере, и вы можете видеть, как дочерние элементы фиксируются внутри вашего контейнера, но когда у вас переменные размеры, дочерние элементы будут фиксироваться внутри содержимого, и, вероятно, вы не увидите эффекта. происходит. Вы можете попробовать увеличить высоту в 1000 пикселей на .weather__background, чтобы увидеть разницу.

Я надеюсь, что это поможет вам =)

Ответ №2:

Чтобы ваши элементы занимали всю высоту, добавьте это в свой CSS:

 html {
   height: 100%;
}
body {
    min-height: 100%;
}

Вы можете удалить flex: 33% из каждого класса

 .weather {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    amp;__title {
      border: 3px solid red;
    }
    amp;__input {
      border: 3px solid red;
    }
    amp;__details {
      border: 3px solid red;
      background-color: rgba(112, 112, 112, 0.7);
    }
}