flex2

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>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>

<div class="wrapper">
  <div>1</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
</div>
<div class="wrapper">
  <div>1</div>
</div>

    </body>
</html>

Stylesheet

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

.wrapper {
  display: flex;
}
.wrapper > div {
  font-size: 12pt;
  color: white;
  background: darkslategray;
  margin: .1em;
  padding: .3em;
  border-radius: 3px;
  flex: 1;
}
.wrapper:nth-child(2) > div:nth-child(1),
.wrapper:nth-child(12) > div:nth-child(2) {
  flex: 1;
  }
.wrapper:nth-child(2) > div:nth-child(2),
.wrapper:nth-child(12) > div:nth-child(1) {
  flex: 11;
  }
.wrapper:nth-child(3) > div:nth-child(1),
.wrapper:nth-child(11) > div:nth-child(2) {
  flex: 2;
  }
.wrapper:nth-child(3) > div:nth-child(2),
.wrapper:nth-child(11) > div:nth-child(1) {
  flex: 10;
  }
.wrapper:nth-child(4) > div:nth-child(1),
.wrapper:nth-child(10) > div:nth-child(2) {
  flex: 3;
  }
.wrapper:nth-child(4) > div:nth-child(2),
.wrapper:nth-child(10) > div:nth-child(1) {
  flex: 9;
  }
.wrapper:nth-child(5) > div:nth-child(1),
.wrapper:nth-child(9) > div:nth-child(2) {
  flex: 4;
  }
.wrapper:nth-child(5) > div:nth-child(2),
.wrapper:nth-child(9) > div:nth-child(1) {
  flex: 8;
  }
.wrapper:nth-child(6) > div:nth-child(1),
.wrapper:nth-child(8) > div:nth-child(2) {
  flex: 5;
  }
.wrapper:nth-child(6) > div:nth-child(2),
.wrapper:nth-child(8) > div:nth-child(1) {
  flex: 7;
  }
.wrapper:nth-child(7) > div:nth-child(1) {
  flex: 6;
  }
.wrapper:nth-child(7) > div:nth-child(2) {
  flex: 6;
  }