Flex

This example shows a CSS flex layout.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  UNSUPPORTED
no CSS flex support
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  ERROR
OK OK with issues Error Unsupported

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;
}