Flexbox - два столбца подряд - PullRequest
Новая
       0

Flexbox - два столбца подряд

0 голосов
/ 10 марта 2020

Я пытаюсь использовать flexbox для создания двух столбцов из трех строк для Продуктов. Я посмотрел на другую похожую проблему на StackOverflow, но ответы не дали мне. Не могли бы вы мне помочь, пожалуйста ? Вот код HTML: 

Informations {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px solid blue;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.Information {
  border: 1px solid blue;
  margin: 0.5em;
  padding: 0.5em;
}

Game {
  list-style-type: none;
  border: 1px solid red;
  width: 100%;
  display: flex;
}

.ProductContainer {
  display: flex;
  flex-flow: column wrap;
  border: 1px solid black;
  width: 90%;
}

.Product {
  border: 1px solid red;
  margin: 0.5em;
  padding: 0.5em;
}

.UpgradeContainer {
  border: 1px solid black;
  width: 10%;
}

.Upgrade {
  display: flex;
  flex-flow: column wrap;
  border: 1px solid red;
  margin: 0.5em;
  padding: 0.5em;
}
<!DOCTYPE world>
<html>

<head>
  <title> World </title>
</head>

<body>
  <Informations>
    <div class="Information">Your World:</div>
    <div class="Information">Your Money:</div>
    <div class="Information">Your ID:</div>
  </Informations>
  <Game>
    <div class="UpgradeContainer">
      <div class="Upgrade">Unlocks</div>
      <div class="Upgrade">Cash</div>
      <div class="Upgrade">Angels</div>
      <div class="Upgrade">Managers</div>
      <div class="Upgrade">Investors</div>
    </div>
    <div class="ProductContainer">
      <div class="Product">Product1</div>
      <div class="Product">Product2</div>
      <div class="Product">Product3</div>
      <div class="Product">Product4</div>
      <div class="Product">Product5</div>
      <div class="Product">Product6</div>
    </div>
  </Game>
</body>

</html>

Я в основном хочу, чтобы мои улучшения были слева (Ca sh, ангелы ...) и в средней и правой двух колонках из трех рядов. продуктов. Вот мой код ручки, чтобы увидеть: https://codepen.io/Tameiki/pen/oNXpNVe

1 Ответ

4 голосов
/ 10 марта 2020

Вы можете использовать свойство flex-wrap вместе с установкой flex-basis для дочерних элементов: 

.ProductContainer{
  display: flex;
  flex-flow: wrap;
  border: 1px solid black;
  width: 90%;
}

.Product {
  border: 1px solid red;
  margin: 0.5em;
  padding: 0.5em;
  flex-basis: calc(50% - 2em - 5px); /* - Margins - Borders - 1px to mitigate subpixel rounding issues*/
}
      <div class="ProductContainer">
        <div class="Product">Product1</div>
        <div class="Product">Product2</div>
        <div class="Product">Product3</div>
        <div class="Product">Product4</div>
        <div class="Product">Product5</div>
        <div class="Product">Product6</div>
      </div>

Обратите внимание, как я удалил свойство flex-direction:column: дочерние элементы будут пытаться поместиться в одну строку, переполнив контейнер при необходимости. 

.ProductContainer{
  display: flex;
  /*flex-flow: wrap;*/
  border: 1px solid black;
  width: 90%;
}

.Product {
  border: 1px solid red;
  margin: 0.5em;
  padding: 0.5em;
  /*flex-basis: calc(50% - 2em - 5px); /* - Margins - Borders - 1px to mitigate subpixel rounding issues*/
}
      <div class="ProductContainer">
        <div class="Product">Product1</div>
        <div class="Product">Product2</div>
        <div class="Product">Product3</div>
        <div class="Product">Product4</div>
        <div class="Product">Product5</div>
        <div class="Product">Product6</div>
      </div>

flex-wrap - это то, что заставляет их начинать новую строку вместо переполнения: 

.ProductContainer{
  display: flex;
  flex-flow: wrap;
  border: 1px solid black;
  width: 90%;
}

.Product {
  border: 1px solid red;
  margin: 0.5em;
  padding: 0.5em;
  /*flex-basis: calc(50% - 2em - 5px); /* - Margins - Borders - 1px to mitigate subpixel rounding issues*/
}
      <div class="ProductContainer">
        <div class="Product">Product1</div>
        <div class="Product">Product2</div>
        <div class="Product">Product3</div>
        <div class="Product">Product4</div>
        <div class="Product">Product5</div>
        <div class="Product">Product6</div>
      </div>

Но как нам получить только два из них в ряду? Говоря, что каждый из дочерних элементов равен половине ширины строки: 

.ProductContainer{
  display: flex;
  flex-flow: wrap;
  border: 1px solid black;
  width: 90%;
}

.Product {
  border: 1px solid red;
  margin: 0.5em;
  padding: 0.5em;
  flex-basis: 50%; /*calc(50% - 2em - 5px); /* - Margins - Borders - 1px to mitigate subpixel rounding issues*/
}
      <div class="ProductContainer">
        <div class="Product">Product1</div>
        <div class="Product">Product2</div>
        <div class="Product">Product3</div>
        <div class="Product">Product4</div>
        <div class="Product">Product5</div>
        <div class="Product">Product6</div>
      </div>

К сожалению, flex-basis применяется к внутренней ширине элемента - включая отступы, но исключая поля и границы. Обычно Flexbox пытается сжать дочерние элементы, чтобы соответствовать строке, если это возможно, но flex-wrap отключает это, поэтому нам придется настраивать вручную. Это приведет вас к коду наверху.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...