1

I am busy with a very simple thing of CSS. Let´s say I have four squares and inside each another square. I want my layout to look something like this:

Layout I am looking for

But it looks like this:

My layout

But I can't get it right. The four squares are grouped in one element and display is set to inline-block. I want to move the small boxes inside their parents and I think I should do it with "display: flex" and "justify-content: flex-end" for example as in the code below. My code in HTML and CSS look like this.

{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: honeydew;
    margin: 15px;
    width: 100%;

}

.big {
    height: 200px;
    width: 200px;
    display: flex;
}

.small {
    height: 100px;
    width: 100px;
}

.block {
    display: inline-block;
}

#small-1 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

#small-2 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}


#small-3 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}


#small-4 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="stylesheet.css">
    <title>Boxes</title>
</head>
<body>
    <div class="block" id="block">
        <div class="big" style="background-color: grey">
            <div class="small" id="small-1" style="background-color:orange"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: black">
            <div class="small" id="small-2" style="background-color: yellow"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: blue">
            <div class="small" id="small-3" style="background-color: green"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: purple">
            <div class="small" id="small-4" style="background-color: pink"></div>
        </div>
    </div>
</body>
</html>

Can anybody help me with this? It seems pretty obvious and basic, but somehow doesn't work.

TylerH
  • 20,799
  • 66
  • 75
  • 101
l.legren
  • 161
  • 1
  • 2
  • 13

2 Answers2

1

justify-content and align-items should be placed on the container level, so the #small's don't have to be that props, but .big.

I create a pen as example: https://codepen.io/alecell-the-lessful/pen/qBZeBEx

[EDIT] I just realise that I don't answer your question, and maybe that link helps you: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

The point is that you should use item level selectors such as align-self and margin to reach the desired behavior.

As above I provide a pen to example: https://codepen.io/alecell-the-lessful/pen/zYqgYvd

Alecell
  • 568
  • 6
  • 19
1

Edits:

div.block:nth-child(1) > div:nth-child(1) {
  align-items: start; // to vertically align to start
}
div.block:nth-child(4) > div:nth-child(1) {
  justify-content: start;// to horizontally align to start
  align-items: start; // to vertically align to start
}
div.block:nth-child(3) > div:nth-child(1) {
  justify-content: start; // to horizontally align to start
}
body{
  display:flex;
}

justify-content:

start: items are packed toward the start of the writing-mode direction.end: items are packed toward the end of the writing-mode direction.

align-items:

flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules. flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.

A Complete Guide to Flexbox

CodePen Demo

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: honeydew;
    margin: 15px;
    width: 100%;
    display: flex;

}

.big {
    height: 200px;
    width: 200px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.small {
    height: 100px;
    width: 100px;
}

.block {
    display: inline-block;
}
div.block:nth-child(1) > div:nth-child(1) {
  align-items: start; 
}
div.block:nth-child(4) > div:nth-child(1) {
  justify-content: start;
  align-items: start; 
}
div.block:nth-child(3) > div:nth-child(1) {
  justify-content: start; 
}
 
<!doctype html>
<html>
<body>
    <div class="block" id="block">
        <div class="big" style="background-color: grey">
            <div class="small" id="small-1" style="background-color:orange"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: black">
            <div class="small" id="small-2" style="background-color: yellow"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: blue">
            <div class="small" id="small-3" style="background-color: green"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: purple">
            <div class="small" id="small-4" style="background-color: pink"></div>
        </div>
    </div>
</body>
</html>
Coding Doubts
  • 55
  • 5