Another day, another HTML & CSS challenge from my course! https://www.youtube.com/watch?v=G3e-cpL7ofc
Today I learned about flexbox, another super useful technique in CSS
My Code
This code below shows both my practice for grid and flexbox.
Looks like flexbox just offers more flexibility for the individual elements, whereas grid is mor like a table (literally a grid I guess haha)
<div style="
display: grid;
grid-template-columns: 100px 100px;
">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">
div 2 <p>text</p>
</div>
</div>
<div style="
margin-top: 30px;
display: grid;
grid-template-columns: 100px 1fr 1fr;
">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2</div>
<div style="background-color: lightblue;">div 3</div>
</div>
<div style="
margin-top: 30px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 20px;
row-gap: 20px;
">
<div style="background-color: lightblue; height: 30px;">1fr</div>
<div style="background-color: lightpink; height: 20px;">1fr</div>
<div style="background-color: lightblue; height: 20px;">1fr</div>
<div style="background-color: lightpink; height: 20px;">1fr</div>
<div style="background-color: lightblue; height: 20px;">1fr</div>
<div style="background-color: lightpink; height: 20px;">1fr</div>
</div>
<div style="
margin-top: 10px;
display: flex;
flex-direction: row;
">
<div style="background-color: lightcoral;">flexbox 1</div>
<div style="background-color: lightgreen;">flexbox 2</div>
</div>
<div style="
margin-top: 10px;
display: flex;
flex-direction: row;
">
<div style="background-color: lightcoral;
width: 100px;
">flexbox 100px</div>
<div style="background-color: lightgreen;
flex: 1;
">flexbox 2</div>
</div>
<div style="
margin-top: 10px;
display: flex;
flex-direction: row;
">
<div style="background-color: lightcoral;
width: 100px;
">flexbox 100px</div>
<div style="background-color: lightgreen;
flex: 1;
">flexbox flex 1</div>
<div style="background-color: lightcoral;
flex: 2;
">flexbox flex 2</div>
</div>
<div style="
margin-top: 10px;
height: 70px;
border-width: 1px;
border-style: solid;
border-color: grey;
display: flex;
justify-content: end;
flex-direction: row;
">
<div style="background-color: lightcoral;
width: 100px;
">flexbox 100px</div>
<div style="background-color: lightgreen;
width: 100px;
">flexbox 100px</div>
<div style="background-color: lightcoral;
width: 100px;
">flexbox 100px</div>
</div>
<div style="
margin-top: 10px;
height: 70px;
border-width: 1px;
border-style: solid;
border-color: grey;
display: flex;
justify-content: space-between;
flex-direction: row;
">
<div style="background-color: lightcoral;
width: 100px;
">flexbox 100px</div>
<div style="background-color: lightgreen;
width: 100px;
">flexbox 100px</div>
<div style="background-color: lightcoral;
width: 100px;
">flexbox 100px</div>
</div>
<div style="
margin-top: 10px;
height: 70px;
border-width: 1px;
border-style: solid;
border-color: grey;
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
">
<div style="background-color: lightcoral;
width: 100px;
">flexbox 100px</div>
<div style="background-color: lightgreen;
width: 100px;
">flexbox 100px</div>
<div style="background-color: lightcoral;
width: 100px;
">flexbox 100px</div>
</div>
Top comments (0)