如何使用Flexbox创建我自己的12列css网格系统？

Question

我想创建一个响应12 column grid system使用CSS FLEXBOX使我的网站响应。我不想使用任何css框架，相反，我想使用自己的12 column grid system并编写自己的css。我想要这样的class names，如下所示。任何帮助都将不胜感激。

我试过像下面这样的。请纠正我。

*,
*::after,
*::before {
  box-sizing: border-box;
}
.container,
.container-full {
  width: 100%;
  margin: auto;
  padding: 0 1rem;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  padding: 1rem;
  border: 1px solid #ccc;
}
.col-1 {
  max-width: 8.333333333333333%;
}
.col-2 {
  max-width: 16.66666666666667%;
}
.col-3 {
  max-width: 25%;
}
.col-4 {
  max-width: 33.333333333333333%;
}
.col-5 {
  max-width: 41.66666666666667%;
}
.col-6 {
  max-width: 50%;
}
.col-7 {
  max-width: 58.333333333333333%;
}
.col-8 {
  max-width: 66.66666666666666%;
}
.col-9 {
  max-width: 75%;
}
.col-10 {
  max-width: 83.333333333333333%;
}
.col-11 {
  max-width: 91.66666666666666%;
}
.col-12 {
  max-width: 100%;
}

Answer 1

这个原则相当简单。

创建包装柔性盒行容器(.flex-row)

• for布局的目的确保行子元素允许grow

• OPTIONALly设置子元素的最小宽度，以便在较小的设备上

• 创建各种列宽度时强制包装，就像在CSS中一样，但是使用flex-basis而不是max-width。结合flex: 1，柔性盒机构处理子元素之间的空间分布。

片段所以你有一些基地可以玩..。

BTW，注意“眼糖”内的响应基字体大小。

​

/* for debugging */
[outlines="1"] * { outline: 1px dashed }

*    { box-sizing: border-box }

/*************/
/* mechanism */
/*************/
.flex-row { display: flex; flex-flow: row wrap; width: 100% }

.flex-row > * {
  flex: 1; /* allow children to grow when space available */

  /* [OPTIONAL] set a 'min-width' if you want to force some wrapping */
  min-width: 7.5rem; /* max 3*120px columns on a 360px device */
}

.col-1  { flex-basis:   8.33% }
.col-2  { flex-basis:  16.66% }
.col-3  { flex-basis:  25%    }
.col-4  { flex-basis:  33.33% }
.col-5  { flex-basis:  41.66% }
.col-6  { flex-basis:  50%    }
.col-7  { flex-basis:  58.33% }
.col-8  { flex-basis:  66.66% }
.col-9  { flex-basis:  75%    }
.col-10 { flex-basis:  83.33% }
.col-11 { flex-basis:  91.66% }
.col-12 { flex-basis: 100%    }

/*************/
/* eye-candy */
/*************/
/* responsive base font size: 14px at 320, 20px at 1280 vmin */
/* smoothly scaled font size relative to current vmin */
html { font-size: calc(0.625vmin + 0.75rem) }

body { margin: 0 }

.container { border: 1px solid black }

.header, .footer, [class^="col-"] {
  padding: .75rem;
  border : 2px solid black;
}
.footer>* { font-size: .75em; text-align: right }

<div class="container" outlines="0">
    <div class="flex-row header">
        <h1>hea&shy;der</h1>
    </div>

    <div class="flex-row">
        <div class="col-3">
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
                <li>item 4</li>
            </ul>
        </div>

        <div class="col-9">
            <h3>Item Header</h3>
            <p>Some fun item you have got something to say about!</p>
        </div>
    </div>
    
    <div class="flex-row">
        <div class="col-1">col 1</div>
        <div class="col-2">col 2</div>
        <div class="col-9">col 9</div>
    </div>
    
    <div class="flex-row">
        <div class="col-4">col 4</div>
        <div class="col-5">col 5</div>
        <div class="col-3">col 3</div>
    </div>
    
    <div class="flex-row">
        <div class="col-7">col 7</div>
        <div class="col-3">col 3</div>
        <div class="col-2">col 2</div>
    </div>
    
    <div class="flex-row">
        <div class="col-10">col 10</div>
        <div class="col-2">col 2</div>
    </div>
    
    <div class="flex-row">
        <div class="col-11">col 11</div>
        <div class="col-1">col 1</div>
    </div>
    
    <div class="flex-row">
        <div class="col-12">col 12</div>
    </div>
    
    <div class="flex-row footer">
        <div>Footer</div>
    </div>
</div>

​