用css绘制分割的彩色方块[重复]答案

【问题标题】：Draw divided coloured squares with css [duplicate]用css绘制分割的彩色方块[重复]
【发布时间】：2021-07-06 11:58:22
【问题描述】：

使用这个 css 我可以绘制一个带有黑色边框的彩色小方块：

.row {
  display : flex;
  justify-content: center;
  align-items : center;
  margin-bottom: 5px;
}
.box {
  height: 20px;
  width: 20px;
  border: 1px solid black;
  border-radius: 0;
  margin-right : 5px;
}

/* Canada */
.canada {
  background: #FF0000;
  color: white;
  text-align: center;
}

如何使用类似的css来绘制：

一个正方形水平分成两种颜色
一个正方形垂直分为 2/3 和 1/3

【问题讨论】：

标签： css

【解决方案1】：

这样一来，你就可以轻松管理内框的宽度和高度，还可以管理两个正方形的颜色。

<div class="row">
 <div class="outer">
  <div class="inner"></div>
 </div>
</div>

和样式

.row {
  display : flex;
  justify-content: center;
  align-items : center;
  margin-bottom: 5px;
}
.inner {
  width:50%;
  height:100%;
  background:#f00;
}

.outer {
  height: 200px;
  width: 200px;
  background: #330043;
  color: white;
  text-align: center;
  border: 2px solid black;
}

https://jsfiddle.net/tg7a8m54/20/

【讨论】：

【解决方案2】：

有不同的方法来实现这一点（使用/不使用 flexbox）。但我认为这是一点练习如何使用 flexbox 设置。

所以我做了两个不同的例子来展示 flexbox 技术的可能性。请参阅示例和代码中的 cmets。（注意：为了更好地查看这里，我将盒子的尺寸做得更大......只需根据您的需要调整包装器的width/height/margin。）

另外，您可能会发现关于复杂 flexbox 属性如何有助于更多解释的非常好的实用概述：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

以下是示例：

html {
    font-family: sans-serif;
}

/* starting exercise ... */

.flex-wrapper-vertical {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    background-color: #920031;
    border: 1px solid black;

    /* 
        flexbox-settings 
        --> column
        --> starting from top               
    */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.flex-wrapper-vertical .flex-child {

    background: #ffffff;
    /*
        using flexbox-settings to size
        --> 50% of column(-height)
        --> would be used for all added childs
    */
    flex-basis: 50%;

}

.flex-wrapper-horizontal {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    background-color: #920031;
    border: 1px solid black;

    /* 
        flexbox-settings 
        --> row
        --> aligned to left/right edge              
    */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-wrapper-horizontal .flex-child:nth-child(1) {
    background-color: #ffcd60;

    /*
        using flexbox-settings to size childs 
        --> sizing relative to each other
    */
    flex-grow: 2;
}
.flex-wrapper-horizontal .flex-child:nth-child(2) {
    background-color: #ffffff;
    flex-grow: 1;
}

<h1>Flexbox Exercises</h1>

<h2>Example A</h2>

<p>1 flex-child aligned top</p>

<div class="flex-wrapper-vertical">

    <div class="flex-child"></div>

</div>

<h2>Example B <br>
</h2>

<p>
    2 flex-childs filling out flex-wrapper<br>
    = complete repainting different background color from parent<br> 
    + demonstrating using 'flex-grow' for simple sizing (gridding) <br>
    (Note: of course you could do this with only one child similar to example A...)
</p>

<div class="flex-wrapper-horizontal">

    <div class="flex-child"></div>
    <div class="flex-child"></div>

</div>

<p><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">Overwiew to flexbox settings</a></p>

【讨论】：