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