Background

This tutorial shows you how to create a simple comic layout using HTML wtih a little flexbox.

This is a wide textbox above a wide panel. Both the textbox and panel are 100% of the width. The textbox is actually above the panel, rather than with it, so that resizing the window will not make it cover up regions of the panel.

A dragon flew across the sky.

While we may think of textboxes as within a comics panel, the textbox here is actually above the panel, rather than with it, so that a taller panel at narrow widths will not make it cover up regions of the panel.

View the panel below on a small device or resize your browser to a narrow width, and look at what happens with a bunch more text. The textbox gets taller but there the dragon remains visible.

After a long day, the dragon flew across the sky and headed towards home. It did not find the wizard it had been looking for, but it hoped to find it the next day.

Here is the code with some explanatory comments. You’ll see that I’m using a center class with justify-content to center the SVG dragon image horizontally and align-items to center the image vertically.

 
  
 
 
 
/* the container */
flex-comic {
    display: flex;
    flex-wrap: wrap;
}
/* for this particular type of textbox,
give it no bottom border since the panel
will hae a top border. */

.flex-textbox.top {
    border-bottom-width: 0px;
}
/* textbox styles */
.flex-textbox {
    border: 3px solid black;
    border-bottom-width: 3px;
    display: block;
    z-index: 3;
    background-color: white;
    text-align: center;
}
/* give both panel and textbox uniform width */
.flex-panel, .flex-textbox {
    width: 100%;
    max-width: 768px;
    margin: 0px auto;
}
/* text within narrative block */
.flex-textbox p {
  margin: 0px;
  padding: 10px;
  background-color: white;
  text-align: center;
  position: relative;
  z-index: 2;
  font-family: 'Kalam';
}
/* styles for the panel containing the image */
.flex-panel {
    border: 3px solid black;
    min-height: 200px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
/* if panel has the lightblue class, 
give it a lightblue background */
.flex-panel.lightblue {
    background-color: lightblue;
}
/* if panel has center class, 
center the image vertically 
and horizontally. */
.flex-panel.center {
  justify-content: center;
  align-items: center;
}

I hope you found that helpful. My next post will demonstrate how we can use flexbox to handle more complex layouts.