flex

This example shows a nested grid.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  ERROR
no CSS flex support
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK

HTML input

<html>
    <head>
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div class="wrapper">
          <div>1
          
            <div class="wrapper">
              <div>1</div>
              <div>2</div>
              <div>3</div>
            </div>
            <div class="wrapper">
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
            </div>
            <div class="wrapper">
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
            </div>    
          
          </div>
          <div>2</div>
          <div>3</div>
        </div>
        <div class="wrapper">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
        </div>
        <div class="wrapper">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
        </div>
    </body>
</html>

Stylesheet

@import url("../styles/a4.css");

.wrapper {
  display: flex;
}

.wrapper > div {
  font-size: 40px;
  color: white;
  background: hotpink;
  margin: 0.1em;
  padding: 0.3em;
  border-radius: 3px;
  flex: 1;
}

.wrapper .wrapper > div {
  background: pink;
  color: hotpink;
}