unCommented rules in ./cflex3.css
Switch the Element-Width's
the examples below start swtiching at a width of 1024px
@media screen and (min-width:1024px) {
/* Style */
}
lower than the 1024px-viewport, all elements are ruled to 100% width
On an element you can use flexbox by adding a the class .cflex and all inner elements will follow it.
You only have to choose what width you need and add those specific class to that child element
css: uncomment the classes cflex and cf_50
.cflex{
display:flex;
flex-flow: row wrap;
}
.cf_50{
flex:1 1 50%;
flex:1 1 calc( 100% / 2 );
}
html: add the class cflex to a div and cf_50 to the paragraph
<div class="cflex">
<p class="cf_50">lorem ipsum …</p>
<p class="cf_50">lorem ipsum …</p>
</div>
result
50%
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
50%
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
html: add the classes cflex and cf_50 to two enclosing div's
<div class="cflex">
<div class="cf_50">
<p>lorem ipsum</p>
</div>
<div class="cf_50>
<p>lorem ipsum</p>
</div>
</div>
result
50%
50%