Draw divided coloured squares with css

Question

Using this css I can draw a small coloured square with a black border:

.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;
}

How can I use similar css to draw:

A square horizontally divided into two colors
A square vertically divided into 2/3 and 1/3

score 1 · Answer 1 · answered Apr 11 '21 at 02:29

Just doing that way, you can easy manage width and height of inner box, and also manage colors both both squares.

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

and styles

.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/

score 1 · Answer 2 · answered Apr 11 '21 at 04:47

There are different ways to achieve that (with/without using flexbox). But I asume that is a little excerise how to use flexbox settings.

So I did two different examples to demonstrate the possibilities of the flexbox technique. Please see comments in example and code. (Note: for a better view HERE I did the sizes of the boxes larger ... just adapt width/height/margin of the wrapper to your needs.)

Additional you may find that very good practical overview about how the complex flexbox properties helpful for more explanations: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Here are the examples:

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>

Draw divided coloured squares with css

2 Answers2