Блог

Главная - Вопросы по программированию - Flexbox два дочерних элемента рядом и третий в отдельной строке

Flexbox два дочерних элемента рядом и третий в отдельной строке

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Надеялся, что кто-нибудь сможет показать мне, как сделать так, чтобы «элементы сетки» 1 и 2 располагались рядом друг с другом, занимая по 50% каждый, а затем «элемент сетки» 3 находился на строке ниже шириной 100%:

 .grid-items {
  display: flex;
  flex-flow: row wrap;
  background-color: DodgerBlue;
}

.grid-items > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.grid-item {
  flex: 1 50%;
  padding: 0 50px 40px;
  box-sizing: border-box;
  min-height: 650px;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  display: flex;
  text-align: center;
}

.grid-item-wide {
  flex: 1 100%;
  min-height: 575px;
  padding-bottom: 20px;
}  
 <!DOCTYPE html>
<html>
<body>
<h1>Flexible Boxes</h1>

<div class="grid-items">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item" class="grid-item-wide">3</div>  
</div>

</body>
</html>

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

1. замените 50% на 40% в свойстве flex (не удалось найти дубликат ..)

Ответ №1:

Отрегулируйте 10-кратный запас в flex: 1 50% — использовании flex: 1 calc(50% - 20px) — смотрите демонстрацию ниже:

 .grid-items {
  display: flex;
  flex-flow: row wrap;
  background-color: DodgerBlue;
}

.grid-items > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.grid-item {
  flex: 1 calc(50% - 20px); /* changed */
  padding: 0 50px 40px;
  box-sizing: border-box;
  min-height: 650px;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  display: flex;
  text-align: center;
}

.grid-item-wide {
  flex: 1 100%;
  min-height: 575px;
  padding-bottom: 20px;
}  
 <!DOCTYPE html>
<html>
<body>
<h1>Flexible Boxes</h1>

<div class="grid-items">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item grid-item-wide">3</div>  <!-- note the change here too -->
</div>

</body>
</html>

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

1. Спасибо, чувак, так полезно — у меня были проблемы с этим некоторое время!

Ответ №2:

50% минус ваше поле — это необходимая вам ширина

 html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.grid-items {
  display: flex;
  flex-flow: row wrap;
  background-color: DodgerBlue;
}

.grid-items>div {
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.grid-item {
  flex: 1 1 calc(50% - 20px);
  padding: 0 50px 40px;
  box-sizing: border-box;
  min-height: 650px;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  display: flex;
  text-align: center;
}

.grid-item-wide {
  flex: 1 100%;
  min-height: 575px;
  padding-bottom: 20px;
}  
 <!DOCTYPE html>
<html>

<body>
  <h1>Flexible Boxes</h1>

  <div class="grid-items">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item" class="grid-item-wide">3</div>
  </div>

</body>

</html>

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

1. Спасибо, чувак, так полезно — у меня были проблемы с этим некоторое время!