时间戳

首页 > 解决方案 > 使用 flexbox 的边框行为

html - 使用 flexbox 的边框行为

问题描述

我正在尝试使用 flexbox 创建具有特定装订线大小的基于列的布局。

例如，我想包括将类添加col-2到给定元素的选项，这将使该元素的大小与该行中其他元素的 2 个相同。col-3对于 3 个元素的大小，col-4对于 4 个等。

我通过更改添加类flex的元素的属性来做到这col-n一点。

SCSS 混合

// number of columns
$columns: 8;

// column proportions mixin
@mixin column-prop($n) {
    flex: $columns * $n;
}

.col-2 {
    @include column-prop(2);
}
.col-3 {
    @include column-prop(3);
}
.col-4 {
    @include column-prop(4);
}
...

HTML

<div class="grid">
    <div>flex: 8</div>
    <div>flex: 8</div>
    <div class="col-2">flex: 16</div>
</div>

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

<div class="grid">
    <div>flex: 8</div>
    <div>flex: 8</div>
    <div>flex: 8</div>
    <div>flex: 8</div>
    <div class="col-4">flex: 32</div>
</div>

如果我不使用任何填充，则此方法有效： 在此处输入图像描述 但是，如果我添加填充，则尽管我已对所有子元素 进行了设置，但填充的大小会附加到内容（就好像它是一个内容框一样） 。 我相信不适用于弹性物品。box-sizing: border-box;在此处输入图像描述box-sizing: border-box;

我怎样才能简单地将填充包含在每个元素的大小中，就好像它们是boxer-box元素一样？

标签： htmlcssflexboxborder-boxbox-sizing

解决方案

编辑：CSS-grid 包括对排水沟的支持。让我来破解它...

HTML

<div class="grid-32">
  <div>flex: 8</div>
  <div>flex: 8</div>
  <div class="col-2">flex: 16</div>
</div>

<div class="grid-32">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="grid-64">
  <div>flex: 8</div>
  <div>flex: 8</div>
  <div>flex: 8</div>
  <div>flex: 8</div>
  <div class="col-4">flex: 32</div>
</div>

SASS

// number of columns
$columns: 8;

@mixin make-grid($n) {
  .grid-#{$n} {
    display: grid;
    width: 100%;
    grid-template-columns: repeat($n, 1fr);
    grid-column-gap: 1em;
    margin-bottom: 1em;
    div {
      grid-column-end: span $columns;
      background: #ccc;
      @for $i from 1 through 4 {
        &.col-#{$i} {
          grid-column-end: span $i*$columns;
          background: hsl($i * 256/$columns, 50%, 50%);
        }
      }
    }
  }
}

@include make-grid(4*$columns);
@include make-grid(8*$columns);

我学到的是，尽管 css-grid 完美地处理了排水沟，但您确实需要提前知道总列数。如果您知道，这是获得所需内容的好方法。

Codepen：https ://codepen.io/bstees/pen/rNaVJvR

推荐阅读