Flexbox двое детей рядом и третий на отдельном ряду - PullRequest
Новая
       1

Flexbox двое детей рядом и третий на отдельном ряду

2 голосов
/ 26 марта 2019

Надеялся, что кто-нибудь сможет показать мне, как заставить "элемент сетки" 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>

Ответы [ 2 ]

2 голосов
/ 26 марта 2019

Отрегулируйте 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 голос
/ 26 марта 2019

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...