Flexbox
Published at 2021-02-21 16:06:58 Updated on pzplUI 2.2
Containers
Containters center your div horizontally. You need to have a width specified, tougth.
You can use containers as a way to center all of your sites content.
Hello World!
Hello World!
<div class="container bg-success" style="width: 600px;">
<h1>Hello World!</h1>
</div>
<div class="container bg-success" style="text-align: center;
border-radius: 5px;
padding: 4px;
width: 600px;">
<h1>Hello World!</h1>
</div>Flexbox
<div class="flexbox">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>Singleline Columns
<div class="flexbox singleline">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<!-- ... -->
<div class="column"></div>
</div>Columns with specific size
flex-100
flex-95
Auto
flex-90
Auto
flex-85
Auto
flex-80
Auto
flex-75
Auto
Auto
flex-70
Auto
Auto
flex-65
Auto
Auto
flex-60
Auto
Auto
flex-55
Auto
Auto
flex-50
Auto
Auto
flex-45
Auto
Auto
flex-40
Auto
Auto
flex-35
Auto
Auto
flex-30
Auto
Auto
flex-25
Auto
Auto
flex-20
Auto
Auto
flex-15
Auto
Auto
flex-10
Auto
Auto
flex-5
Auto
Auto
<div class="flexbox">
<div class="column flex-100">
<p class="bg-success">flex-100</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-95">
<p class="bg-success">flex-95</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-90">
<p class="bg-success">flex-90</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-85">
<p class="bg-success">flex-85</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-80">
<p class="bg-success">flex-80</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-75">
<p class="bg-success">flex-75</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-70">
<p class="bg-success">flex-70</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-65">
<p class="bg-success">flex-65</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-60">
<p class="bg-success">flex-60</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-55">
<p class="bg-success">flex-55</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-50">
<p class="bg-success">flex-50</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-45">
<p class="bg-success">flex-45</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-40">
<p class="bg-success">flex-40</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-35">
<p class="bg-success">flex-35</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-30">
<p class="bg-success">flex-30</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-25">
<p class="bg-success">flex-25</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-20">
<p class="bg-success">flex-20</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-15">
<p class="bg-success">flex-15</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-10">
<p class="bg-success">flex-10</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>
<div class="flexbox">
<div class="column flex-5">
<p class="bg-success">flex-5</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
<div class="column">
<p class="bg-success">Auto</p>
</div>
</div>