Как создать сеточную систему на основе flexbox? - PullRequest
Новая
       6

Как создать сеточную систему на основе flexbox?

0 голосов
/ 09 февраля 2019

Я пытался создать систему сетки на основе flexbox для целей обучения, но обнаружил некоторые проблемы после создания вещей с ним: когда все столбцы занимали 100% пространства, последний столбец переходил на следующую строку (контейнерflex-flow: row wrap;) но когда они были не на 100% (например, один столбец с 30%, другой с 65%), они были на одной линии ... Потом я обнаружил, что это было что-то, связанное с полями, но все жеЯ не мог решить это.

Мои сомнения сейчас: что использовать для ширины столбцов?Flex-основа?ширина

Как я могу решить эту проблему с полями, которые будут решены?Я видел один в проектах github, которые используют что-то вроде «gap», но я все еще не совсем понимаю, как это работает ...

Я пытался добавить свойства calc () вместе с "- $ gap", который был10px, но я все еще не мог сгенерировать сетку так, как она должна быть.

Мой предыдущий код был таким: 

.row {
    display: flex;
}

@for $i from 1 through $grid-cols {

    @media (max-width: 768px) {
        .col-mob-#{$i} {
            width: 100 / ($grid-cols / $i) * 1%;
        }
    }

    @media (min-width: 769px) and (max-width: 1023px) {
        .col-tab-#{$i} {
            width: 100 / ($grid-cols / $i) * 1%;
        }
    }

    @media (min-width: 1024px) and (max-width: 1407px) {
        .col-hd-#{$i} {
            width: 100 / ($grid-cols / $i) * 1%;
        }
    }

    @media (min-width: 1408px) {
        .col-fhd-#{$i} {
            width: 100 / ($grid-cols / $i) * 1%;
        }
    }
}

Редактировать: мне удалось немного оставить все так, как я хотелэто следующим образом: 

$grid-cols: 12;
$gap: 0.75rem !default;

// .row is used as container for divs with columns
.row {
    display: flex;
}

@for $i from 1 through $grid-cols {

    @media (max-width: 768px) {
        .col-mob-#{$i} {
            flex-basis: calc((100 / (#{$grid-cols} / #{$i}) * 1%) - #{$gap});
        }
    }
    // ....

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019

Вы можете просто уменьшить ширину, используя значение разрыва, которое вы добавляете в качестве поля.Хитрость заключается в том, чтобы учитывать тот факт, что пробелы находятся только внутри, поэтому вам нужно использовать -1 для правильного расчета ширины: 

.row {
    display: flex;
}

$grid-cols : 8;
$gaps : 10px;

.row > div:not(:last-child) {
  margin-right: $gaps;
}

@for $i from 1 through $grid-cols {

    @media (max-width: 768px) {
        .col-mob-#{$i} {
            width: (calc((100% - (#{$grid-cols / $i} - 1)*#{$gaps})/ #{($grid-cols / $i)}));
        }
    }

    @media (min-width: 769px) and (max-width: 1023px) {
        .col-tab-#{$i} {
            width: (calc((100% - (#{$grid-cols / $i} - 1)*#{$gaps})/ #{($grid-cols / $i)}));
        }
    }

    @media (min-width: 1024px) and (max-width: 1407px) {
        .col-hd-#{$i} {
            width: (calc((100% - (#{$grid-cols / $i} - 1)*#{$gaps})/ #{($grid-cols / $i)}));
        }
    }

    @media (min-width: 1408px) {
        .col-fhd-#{$i} {
            width: (calc((100% - (#{$grid-cols / $i} - 1)*#{$gaps})/ #{($grid-cols / $i)}));
        }
    }
}

Полный скомпилированный код: 

.row {
  display: flex;
  flex-wrap:wrap;
  margin:5px;
}
.row > div{
  height:50px;
  background:red;
}

.row > div:not(:last-child) {
  margin-right: 10px;
}

@media (max-width: 768px) {
  .col-mob-1 {
    width: calc((100% - (8 - 1)*10px)/ 8);
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .col-tab-1 {
    width: calc((100% - (8 - 1)*10px)/ 8);
  }
}
@media (min-width: 1024px) and (max-width: 1407px) {
  .col-hd-1 {
    width: calc((100% - (8 - 1)*10px)/ 8);
  }
}
@media (min-width: 1408px) {
  .col-fhd-1 {
    width: calc((100% - (8 - 1)*10px)/ 8);
  }
}
@media (max-width: 768px) {
  .col-mob-2 {
    width: calc((100% - (4 - 1)*10px)/ 4);
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .col-tab-2 {
    width: calc((100% - (4 - 1)*10px)/ 4);
  }
}
@media (min-width: 1024px) and (max-width: 1407px) {
  .col-hd-2 {
    width: calc((100% - (4 - 1)*10px)/ 4);
  }
}
@media (min-width: 1408px) {
  .col-fhd-2 {
    width: calc((100% - (4 - 1)*10px)/ 4);
  }
}
@media (max-width: 768px) {
  .col-mob-3 {
    width: calc((100% - (2.6666666667 - 1)*10px)/ 2.6666666667);
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .col-tab-3 {
    width: calc((100% - (2.6666666667 - 1)*10px)/ 2.6666666667);
  }
}
@media (min-width: 1024px) and (max-width: 1407px) {
  .col-hd-3 {
    width: calc((100% - (2.6666666667 - 1)*10px)/ 2.6666666667);
  }
}
@media (min-width: 1408px) {
  .col-fhd-3 {
    width: calc((100% - (2.6666666667 - 1)*10px)/ 2.6666666667);
  }
}
@media (max-width: 768px) {
  .col-mob-4 {
    width: calc((100% - (2 - 1)*10px)/ 2);
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .col-tab-4 {
    width: calc((100% - (2 - 1)*10px)/ 2);
  }
}
@media (min-width: 1024px) and (max-width: 1407px) {
  .col-hd-4 {
    width: calc((100% - (2 - 1)*10px)/ 2);
  }
}
@media (min-width: 1408px) {
  .col-fhd-4 {
    width: calc((100% - (2 - 1)*10px)/ 2);
  }
}
@media (max-width: 768px) {
  .col-mob-5 {
    width: calc((100% - (1.6 - 1)*10px)/ 1.6);
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .col-tab-5 {
    width: calc((100% - (1.6 - 1)*10px)/ 1.6);
  }
}
@media (min-width: 1024px) and (max-width: 1407px) {
  .col-hd-5 {
    width: calc((100% - (1.6 - 1)*10px)/ 1.6);
  }
}
@media (min-width: 1408px) {
  .col-fhd-5 {
    width: calc((100% - (1.6 - 1)*10px)/ 1.6);
  }
}
@media (max-width: 768px) {
  .col-mob-6 {
    width: calc((100% - (1.3333333333 - 1)*10px)/ 1.3333333333);
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .col-tab-6 {
    width: calc((100% - (1.3333333333 - 1)*10px)/ 1.3333333333);
  }
}
@media (min-width: 1024px) and (max-width: 1407px) {
  .col-hd-6 {
    width: calc((100% - (1.3333333333 - 1)*10px)/ 1.3333333333);
  }
}
@media (min-width: 1408px) {
  .col-fhd-6 {
    width: calc((100% - (1.3333333333 - 1)*10px)/ 1.3333333333);
  }
}
@media (max-width: 768px) {
  .col-mob-7 {
    width: calc((100% - (1.1428571429 - 1)*10px)/ 1.1428571429);
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .col-tab-7 {
    width: calc((100% - (1.1428571429 - 1)*10px)/ 1.1428571429);
  }
}
@media (min-width: 1024px) and (max-width: 1407px) {
  .col-hd-7 {
    width: calc((100% - (1.1428571429 - 1)*10px)/ 1.1428571429);
  }
}
@media (min-width: 1408px) {
  .col-fhd-7 {
    width: calc((100% - (1.1428571429 - 1)*10px)/ 1.1428571429);
  }
}
@media (max-width: 768px) {
  .col-mob-8 {
    width: calc((100% - (1 - 1)*10px)/ 1);
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .col-tab-8 {
    width: calc((100% - (1 - 1)*10px)/ 1);
  }
}
@media (min-width: 1024px) and (max-width: 1407px) {
  .col-hd-8 {
    width: calc((100% - (1 - 1)*10px)/ 1);
  }
}
@media (min-width: 1408px) {
  .col-fhd-8 {
    width: calc((100% - (1 - 1)*10px)/ 1);
  }
}
<div class="row">
  <div class="col-mob-3">
  </div>
  <div class="col-mob-5">
  </div>
</div>
<div class="row">
  <div class="col-mob-1">
  </div>
  <div class="col-mob-1">
  </div>
  <div class="col-mob-1">
  </div>
  <div class="col-mob-1">
  </div>
  <div class="col-mob-1">
  </div>
  <div class="col-mob-1">
  </div>
  <div class="col-mob-1">
  </div>
  <div class="col-mob-1">
  </div>
</div>
<div class="row">
  <div class="col-mob-4">
  </div>
  <div class="col-mob-4">
  </div>
</div>
<div class="row">
  <div class="col-mob-2">
  </div>
  <div class="col-mob-6">
  </div>
</div>
0 голосов
/ 09 февраля 2019

FLexbox является линейным, а Grid - двухмерным.Есть множество способов приблизиться к этому.но вам нужно использовать flex-wrap: no-wrap.

Я бы сначала определил гибкую строку. 

.outerRow {
    display: 'flex';
    # Do not allow wrap (event though this is default)
    flex-wrap: 'no-wrap';
    # Fill the full height
    align-items: 'stretch';
}

Теперь ваши столбцы.Если вам нужны два столбца 25% и один столбец 50%, сделайте так: 

.quarter {
    flex-grow: 1;
}
.half {
    flex-grow: 2;
}

обратите внимание, что это отношения.

, тогда вам нужно сделать классы столбцов: 

.column {
    display: 'flex';
    # Make this a flex-column
    flex-direction: 'column';
    # Do not allow wrap (event though this is default)
    flex-wrap: 'no-wrap';
    # Fill the full width
    align-items: 'stretch';
}

тогда внутри этих столбцов вы можете сделать линейное сгибание.Вы можете использовать классы quarterColumn или halfColumn сверху ...... или вы можете отредактировать класс следующим образом: 

.column {
    display: 'flex';
    flex-direction: 'column';
    flex-wrap: 'no-wrap';
    # Everything floats to flex-start (event though this is default)
    justify-content: 'flex-start';
}

заполнить столбцы элементами уровня блока и в конечном итоге создать разнесенную сетку в стиле pinterest.

<div class="outerRow">
    <div class="quarter column">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="half column">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="quarter column">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

или, если вы хотите, чтобы они были одинаковыми: 

<div class="outerRow">
    <div class="quarter column">
        <div class="half"></div>
        <div class="half"></div>
        <div class="half"></div>
    </div>
    <div class="half column">
        <div class="half"></div>
        <div class="half"></div>
        <div class="half"></div>
    </div>
    <div class="quarter column">
        <div class="half"></div>
        <div class="half"></div>
        <div class="half"></div>
    </div>
</div>

помните, что значения flex-grow являются отношениями друг с другом

read https://css -tricks.com/snippets/css/a-guide-to-flexbox/

:)

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

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

...