Menu
I'm working with a framework developed in-house which depends on a certain structure to our HTML. And one of the tricky things is that each row needs its own container with its own classes and data attributes.
So here's the problem. Without drastically changing the DOM, how can I make the flex box below render essentially like an HTML table would? Or is a table the only way? The solution will have to work in both IE11 and Chrome.
I'm trying to make it look like this...
Column A | Column B | Column C 1 | 2 | 3 section { display: flex; flex-wrap: wrap; } section .col { flex: 1 1 auto; } section .line-break { flex-basis: 100%; width: 0px; height: 0px; overflow: hidden; }<html> <head> </head> <body> <section> <header> <div class="col">Column A</div> <div class="col">Column B</div> <div class="col">Column C</div> </header> <div class="line-break"></div> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div> </section> </body> </html>
760
For modern browsers, we all can use flexbox to create responsive tables! If you want to know more about flexbox, you can always view the superb guide from CSSTricks! First, this is what we want to do: Desktop, tablet and mobile version of this table.
The Flexbox model is more powerful than display table. Flexbox supports layouts for right to left languages for example. And yes indeed, flexbox is a bit complex and that's an entry barrier. Float and clearfix layouts are a (clever) hack, somehow in the same way table layouts are a hack, flexbox is meant for layout.
If you want to use flexbox to create a simple graph visualization, all you need to do is to set align-items of the container to flex-end and define a height for each bar. flex-end will make sure that the bars are anchored to the bottom of the graph.
header, .row { display: flex; /* aligns all child elements (flex items) in a row */ } .col { flex: 1; /* distributes space on the line equally among items */ }<section> <header> <div class="col">Column A</div> <div class="col">Column B</div> <div class="col">Column C</div> </header> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div> </section>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
