如何创建基于Flexbox的网格系统？

问题描述 投票：0回答：2

我试图根据Flexbox的学习目的来创建一个网格系统，但我发现了一些问题，它创造的东西后：当总列占用的空间的100％，最后一列去了下一行（容器是柔性流动：行包;），但是当他们不是100％（例如30％其他65％），他们在同一条线上的一列...后来我发现，这是一件关系到利润，但我还是没能解决这个问题。

我怀疑现在：需要使用什么列的宽度是多少？柔性基础？宽度

我如何得到这个问题的利润率得到解决？我见过一个在使用类似“缺口” github上的项目，但我还是不太明白它是如何工作的？

“ - $缺口”我试着用添加钙（）性能在一起这是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});
        }
    }
    // ....
css css3 sass flexbox
2个回答
1
投票

Flexbox的是线性的，而网格是2维的。有很多方法可以解决这个负载。但你需要使用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>

记得柔性成长值比相互

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

:)

0
投票

您可以使用您添加为利润率的差距值简单地减小宽度。关键是要考虑的是，差距只有内部因此你需要使用-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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.