Dark Mode Toggle
Flexbox is just another tool that you can add to your web development arsenal.
It takes all the work out of structuring a page with multiple columns. No more left, right, middle , inner-left or inner-third and sitting with a calculator figuring margins and padding.
We used two methods for creating columns on this mini site.
The front page and the four columns use a slighlty different method than was used on the interior pages.
CSS cards are a popular design element used to display content in a visually appealing and organized manner.
They are versatile and can be used for various purposes such as showcasing products, presenting information or previewing articles.
The four columns(cards) on the front page were quite a bear using conventional CSS. Not so with flexbox.
We have 4 equal cards nested in a card-container division.
If you want text to flow around your images, use conventional CSS properties like float and text-align inside child containers.
In this example <div class="card"></div> are your child containers.
The width of the cards on the front page were set using flex: 1; which tells the browser to create columns or cards of equal size and allow them to shrink and grow as needed.
The interior pages use different code because the wrap procedure isn't as demanding.
The front page and its 4 cards needed to wrap to two columns, thus we used a media query to change their width to 50% and force them to wrap.
div.card-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 10dvw;
gap: 2dvw;
position: relative;
z-index: -10;
}
/* Card container */
.card {
flex :1;
position:relative;
background: white;
border-radius: 1rem;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
overflow: hidden;
max-width: 300px;
transition: transform 0.2s ease;
}
4 cards front <div class="card-container"> <div class="card"> </div> <div class="card"> </div> <div class="card"> </div> < div class="card"> </div> </div>
The width of the interior pages was set using flex: 1; which tells the browser to create columns or cards of equal size and allow them to shrink and grow as needed.
The code on the right defines the modern design page.
This page uses:
div.flex-container .column-2 {
flex : 2; /* 2 times the size of default width */
padding: 0
}
<div class="column-2">
</div>
This tells the browser to make the left column 2 times the width of the default width of flex:1.
div.flex-container {
display: flex;
flex-wrap : wrap;
justify-content : space-between;
gap: 2dvw;
padding : .5dvw 10dvw;
}
div.flex-container .column {
flex : 1;
padding: 0
}
3 columns modern-design page <div class="flex-container"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>