'Responsive letterblocks with CSS Flexbox

With using flexbox I am trying to create the right lay-out on screens with min-width of 1024 (using @media query). The assignment says we should do it with the flex (shorthand) property but I can't seem to figure out how. The flex-items should however grow by expanding the viewport.

Next to that when I set the flex-flow to row-wrap in the media query it only shows two flex-items per row instead of all three. I tried setting a width on the container element but that didn't help. For the assignment I am not allowed to use Grid or Table. And the since the letters define a acronym they should be in two seperate div's.

Hopefully I have been able to give an accurate description of the desired result (see pictures below for the desired result) Any help would be much appreciated!

Code: Codepen

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="nederlandversteend.css" type="text/css">
    <title>Nederland versteend</title>
</head>
<body>

    <!-- Image Gallery -->
        <section>
            <h2 id="natuurfoto's">Foot's van onze natuur</h2>
            <div>
                <img src="https://images.unsplash.com/photo-1560217324-b389178b26bd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Zonsondergang met vogels in de lucht">
                <img src="https://images.unsplash.com/photo-1555450222-03ea2be21212?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Dal met rivier">
                <img  src="https://images.unsplash.com/photo-1550779351-a69c377c8893?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Een veld met bloemen">
                <img  src="https://images.unsplash.com/photo-1517382848528-40b248d69782?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Laan in het bos">
            </div>
        </section>
        
            <!-- Horizontal line -->
    <hr>
    
        <!--Textblocks-->
    <section class="textblock-container">
        <!-- First acronym -->
            <div class="textblock-wrapper">
                <div class="textblock-square">
                    <div class="textblock-circle">
                        L
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        O
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        I
                    </div>
                </div>
            </div>
            <!-- 2nd acronym -->
            <div class="textblock-wrapper">
                <div class="textblock-square">
                    <div class="textblock-circle">
                        L
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        O
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        I
                    </div>
                </div>
        </div>
    </section>
  </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Oswald&family=Roboto&display=swap');

/* General styles */
html {
    box-sizing: border-box;
  }

body {
    font-family: 'Roboto', sans-serif;
    margin: 0 1.5rem;
}

    @media only screen and (min-width:1440px) {
    body {
        inline-size: 1200px;
        margin: 0 auto;
    }
      
}/* Gallery */
.image-container {
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    padding-block-end: 10px;
}

img {
    inline-size: 100%;
}

img:nth-child(n+2):nth-child(-n+3) {
    opacity: 0.5;
}

    @media only screen and (min-width:768px) {
        img {
            inline-size: 49.7%;
        }
    }

    @media only screen and (min-width:1024px) {
        img {
            inline-size: 24.69%;
        }
    }

/* Horizontal line */
hr {
    border-image: linear-gradient(to right, black, white, black) 1;
}

/*Textblocks*/
.textblock-container {
  display: flex;
  justify-content: space-between;
}

.textblock-wrapper {
  display: flex;
  flex-flow: column wrap;
}

.textblock-square {
    display: flex;
    flex: auto;
    block-size: 30vw;
    inline-size: 30vw;
    border:1px solid black;
    padding:10px;
    border-radius: 15%;
    background-color: blue;
    margin-block-end: 5px;
}

.textblock-circle{
    block-size: 30vw;
    inline-size: 30vw;
    border-radius: 75%;
    background-color: lightgrey; 
    text-align: center;
    line-height: 30vw;
    font-family: 'Oswald', sans-serif;
    font-size: 8vw;
}

@media only screen and (min-width: 1024px) {
  .textblock-wrapper {
    display: flex;
    flex-flow: row wrap;
  }

  .textblock-square {
    flex: auto;
  }

320px 1024px

htmlcssflexbox


Solution 1:[1]

You could change the flex-direction of .textblock-container to 'column' in @media query. I adjusted the inline-size of .textblock-square as well. See below:

@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Oswald&family=Roboto&display=swap');

/* General styles */
html {
    box-sizing: border-box;
  }

body {
    font-family: 'Roboto', sans-serif;
    margin: 0 1.5rem;
}

    @media only screen and (min-width:1440px) {
    body {
        inline-size: 1200px;
        margin: 0 auto;
    }
      
}/* Gallery */
.image-container {
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    padding-block-end: 10px;
}

img {
    inline-size: 100%;
}

img:nth-child(n+2):nth-child(-n+3) {
    opacity: 0.5;
}

    @media only screen and (min-width:768px) {
        img {
            inline-size: 49.7%;
        }
    }

    @media only screen and (min-width:1024px) {
        img {
            inline-size: 24.69%;
        }
    }

/* Horizontal line */
hr {
    border-image: linear-gradient(to right, black, white, black) 1;
}

/*Textblocks*/
.textblock-container {
  display: flex;
  justify-content: space-between;
}

.textblock-wrapper {
  display: flex;
  flex-flow: column wrap;
}

.textblock-square {
    display: flex;
    flex: auto;
    block-size: 30vw;
    inline-size: 30vw;
    border:1px solid black;
    padding:10px;
    border-radius: 15%;
    background-color: blue;
    margin-block-end: 5px;
}

.textblock-circle{
    block-size: 30vw;
    inline-size: 30vw;
    border-radius: 75%;
    background-color: lightgrey; 
    text-align: center;
    line-height: 30vw;
    font-family: 'Oswald', sans-serif;
    font-size: 8vw;
}

@media only screen and (min-width: 1024px) {
  .textblock-wrapper {
    display: flex;
    flex-flow: row wrap;
  }

  .textblock-container{
    flex-direction: column;
  }
  .textblock-square {
    flex: auto;
    inline-size: 10vw;
  }
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="nederlandversteend.css" type="text/css">
    <title>Nederland versteend</title>
</head>
<body>

    <!-- Image Gallery -->
        <section>
            <h2 id="natuurfoto's">Foot's van onze natuur</h2>
            <div>
                <img src="https://images.unsplash.com/photo-1560217324-b389178b26bd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Zonsondergang met vogels in de lucht">
                <img src="https://images.unsplash.com/photo-1555450222-03ea2be21212?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Dal met rivier">
                <img  src="https://images.unsplash.com/photo-1550779351-a69c377c8893?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Een veld met bloemen">
                <img  src="https://images.unsplash.com/photo-1517382848528-40b248d69782?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Laan in het bos">
            </div>
        </section>
        
            <!-- Horizontal line -->
    <hr>
    
        <!--Textblocks-->
    <section class="textblock-container">
        <!-- First acronym -->
            <div class="textblock-wrapper">
                <div class="textblock-square">
                    <div class="textblock-circle">
                        L
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        O
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        I
                    </div>
                </div>
            </div>
            <!-- 2nd acronym -->
            <div class="textblock-wrapper">
                <div class="textblock-square">
                    <div class="textblock-circle">
                        L
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        O
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        I
                    </div>
                </div>
        </div>
    </section>
  </body>
</html>

Solution 2:[2]

I made you such a layout... What has changed - a heading appeared above the blocks. The blocks themselves are adaptive to you, since a flex wrap was added, and all blocks are in the same parent container, which will allow for better mobile adaptation. The content of the blue blocks has been adjusted. Adjusted to fit the image. You can set the necessary indents between the blocks at your discretion.

@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Oswald&family=Roboto&display=swap');

/* General styles */
html {
    box-sizing: border-box;
  }

body {
    font-family: 'Roboto', sans-serif;
    margin: 0 1.5rem;
}

    @media only screen and (min-width:1440px) {
    body {
        inline-size: 1200px;
        margin: 0 auto;
    }
      
}/* Gallery */
.image-container {
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    padding-block-end: 10px;
}

.images {
  display: flex;
  flex-wrap: wrap;
}

img {
    inline-size: 100%;
}

img:nth-child(n+2):nth-child(-n+3) {
    opacity: 0.5;
}

    @media only screen and (min-width:768px) {
        img {
            inline-size: 49.7%;
        }
    }

    @media only screen and (min-width:1024px) {
        img {
            inline-size: 24.69%;
        }
    }

/* Horizontal line */
hr {
    border-image: linear-gradient(to right, black, white, black) 1;
}

/*Textblocks*/
.textblock-container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.textblock-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.textblock-square {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: auto;
    block-size: 30vw;
    inline-size: 30vw;
    border:1px solid black;
    padding:10px;
    border-radius: 15%;
    background-color: blue;
    margin-block-end: 5px;
}

.textblock-circle{
    block-size: 30vw;
    inline-size: 30vw;
    border-radius: 75%;
    background-color: lightgrey; 
    text-align: center;
    line-height: 30vw;
    font-family: 'Oswald', sans-serif;
    font-size: 8vw;
}

@media only screen and (min-width: 1024px) {
  .textblock-wrapper {
    display: flex;
    flex-flow: row wrap;
  }

  .textblock-square {
    flex: auto;
  }
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="nederlandversteend.css" type="text/css">
    <title>Nederland versteend</title>
</head>
<body>

    <!-- Image Gallery -->
        <section>
            <h2 id="natuurfoto's">Foot's van onze natuur</h2>
            <div class="images">
                <img src="https://images.unsplash.com/photo-1560217324-b389178b26bd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Zonsondergang met vogels in de lucht">
                <img src="https://images.unsplash.com/photo-1555450222-03ea2be21212?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Dal met rivier">
                <img  src="https://images.unsplash.com/photo-1550779351-a69c377c8893?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Een veld met bloemen">
                <img  src="https://images.unsplash.com/photo-1517382848528-40b248d69782?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Laan in het bos">
            </div>
        </section>
        
            <!-- Horizontal line -->
    <hr>
    
        <!--Textblocks-->
    <section class="textblock-container">
    <h2 id="blocks">This is wrap blocks</h2>
        <!-- First acronym -->
            <div class="textblock-wrapper">
                <div class="textblock-square">
                    <div class="textblock-circle">
                        L
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        O
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        I
                    </div>
                </div>
          
   
                <div class="textblock-square">
                    <div class="textblock-circle">
                        L
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        O
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        I
                    </div>
                </div>
        </div>
    </section>

Solution 3:[3]

Thanks for jumping in. Your answers were helpful. I have managed to create the result I wanted by altering the CSS as below. For full page see Codepen

/*Textblocks*/
.textblock-container {
    display: flex;
    flex: 1 0 50%;
  }
  
.textblock-wrapper {
    display: flex;
    flex: 1 0 50%;
    flex-flow: column wrap;
  }
  
.textblock-square {
    display: flex;
    border: 2px solid #000;
    padding:10px;
    border-radius: 15%;
    background-color: #0000ff;
    margin-inline-end: 2px;
    margin-block-end: 2px;
  }
  
.textblock-circle{
    flex: 75%;
    border-radius: 75%;
    background-color: #D3D3D3; 
    border: 1px solid #000;
    text-align: center;
    line-height: 28vw;
    font-family: 'Oswald', sans-serif;
    font-size: 8vw;
  }
  
  @media only screen and (min-width: 1024px) {
    .textblock-container{
        flex-direction: column;
      }
    .textblock-wrapper {
      display: flex;
      flex-flow: row wrap;
    }
    .textblock-square {
      flex: auto;
    }
  }

HTML

    <!--Textblocks-->
    <section>
        <h2>Letterblokjes</h2>
    <!-- First acronym -->
        <div class="textblock-container">
            <div class="textblock-wrapper">
                <div class="textblock-square">
                    <div class="textblock-circle">
                        L
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        O
                    </div>
                </div>
                <div class="textblock-square">
                    <div class="textblock-circle">
                        I
                    </div>
                </div>
            </div>
        <!-- Second acronym -->
            <div class="textblock-wrapper">
                    <div class="textblock-square">
                        <div class="textblock-circle">
                            L
                        </div>
                    </div>
                    <div class="textblock-square">
                        <div class="textblock-circle">
                            O
                        </div>
                    </div>
                    <div class="textblock-square">
                        <div class="textblock-circle">
                            I
                        </div>
                    </div>
            </div>
        </div>
    </section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kev Rob
Solution 2 s.kuznetsov
Solution 3 Ron1986

Related Questions