~Codes for the Examples~
2/5/2024
Table of Contents
margin: auto - for Simple Centering
justify-content: space-between | gap | flex-wrap
justify-content: space-between
margin: auto - for Simple Centering
<div class="parent">
<div class="child"> 1 </div>
<div class="child"> 2 </div>
<div class="child"> 3 </div>
<div class="child"> 4 </div>
</div>
.parent {
display: flex;
height: 300px; /* This can be anything */
}
.child {
width: 100px; /* This can be anything */
height: 100px; /* This can be anything */
margin: auto; /* This is what centers everything */
background-color: #F60;
}
Flex-direction: column
<div class="container">
<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
<div class="box"> 4 </div>
</div>
CSS
.container {
flex-direction: column;
height: 500px;
}
.box {
width: 100px; /* This can be anything */
height: 100px; /* This can be anything */
margin: auto; /* This is what centers everything */
background-color:#F60;
}
Justify-content:space-between | gap |flex-wrap
<div class="container">
<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
<div class="box"> 4 </div>
<div class="box"> 5 </div>
<div class="box"> 6 </div>
<div class="box"> 7 </div>
<div class="box"> 8 </div>
<div class="box"> 9 </div>
<div class="box"> 10 </div>
</div>
.box {
width: 100px; /* This can be anything */
height: 100px; /* This can be anything */
margin: auto; /* This is what centers everything */
background-color:#F60;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 5px;
}
.container>* {
flex: 1 1 125px;
}
Justify-content: flex-end
HTML
<div class="container">
<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
<div class="box"> 4 </div>
</div>
.box {
width: 100px; /* This can be anything */
height: 100px; /* This can be anything */
background-color:#F60;
}
.container {
display: flex;
justify-content: flex-end;
gap: 5px;
}
Justify-content: space-between
<div class="container">
<div class="box"> 1 </div>
<div class="box"> 2 </div>
<div class="box"> 3 </div>
<div class="box"> 4 </div>
</div>
.box {
width: 100px; /* This can be anything */
height: 100px; /* This can be anything */
background-color:#F60;
}
.container {
display: flex;
justify-content: space-between;
gap: 5px;
}
Align -Items Example One
HTML
<ul class="container flex-start">
<li class="flex-item">flex-start</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="container flex-end">
<li class="flex-item">flex-end</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="container center">
<li class="flex-item">center<br>
~</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="container baseline">
<li class="flex-item">baseline<br>
~</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
<ul class="container stretch">
<li class="flex-item">stretch</li>
<li class="flex-item">3</li>
<li class="flex-item">4<br>5</li>
<li class="flex-item">6</li>
</ul>
.container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
float: left;
}
.flex-start {
-webkit-align-items: flex-start;
align-items: flex-start;
}
.flex-end {
-webkit-align-items: flex-end;
align-items: flex-end;
}
.flex-end li {
background: gold;
}
.center {
-webkit-align-items: center;
align-items: center;
}
.center li {
background: blue;
}
.baseline {
-webkit-align-items: baseline;
align-items: baseline;
}
.baseline li {
background: green;
}
.stretch {
-webkit-align-items: stretch;
align-items: stretch;
}
.stretch li {
background: maroon;
}
.flex-item {
background: indigo;
padding: 5px;
width: 50px;
margin: 5px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 1em;
text-align: center;
}
Align -Items HTML and CSS Example Two
<div class="container" >
<div class= "box1">YELLOW</div>
<div class= "box2">BLUE</div>
<div class= "box3">EXTRA LONG TEXT IN PURPLE DIV</div>
</div>
.container {
width: 220px;
height: 300px;
border: 1px solid black;
display: flex;
align-items: center;
}
.box1 {
background-color:yellow;
min-height:30px;
}
.box2 {
background-color:blue;
min-height:50px;
}
.box3 {
background-color:purple;
min-height:190px;
}
.container >* {
flex: 1;
border: 1px solid black;
display: flex;
align-items: center;
}
Flex: grow | shrink | basis
<div class="container" >
<div class= "box1">BLACK</div>
<div class= "box2">BLUE</div>
<div class= "box3">EXTRA LONG TEXT IN PURPLE DIV</div>
</div>
.container {
border: 1px solid black;
display: flex;
}
.box1 {
background-color:black;
flex-grow: 3;
flex-shrink: 1;
flex-basis: auto;
}
.box2 {
background-color:blue;
flex-grow: 2;
flex-shrink: 1;
flex-basis: 300;
}
.box3 {
background-color:purple;
flex-grow: 5;
flex-shrink: 1;
flex-basis: 150;
}
.container >* {
color: white;
}
Order
<div class="container" >
<div class= "box1">BLACK</div>
<div class= "box2">BLUE</div>
<div class= "box3">EXTRA LONG TEXT IN PURPLE DIV</div>
</div>
.container {
border: 1px solid black;
display: flex;
}
.box1 {
background-color:black;
flex: 3 1 auto;
order: 2;
}
.box2 {
background-color:blue;
flex-grow: 2;
flex-shrink: 1;
flex-basis: 300;
order: 3;
}
.box3 {
background-color:purple;
flex-grow: 5;
flex-shrink: 1;
flex-basis: 150;
order: 1;
}
.container >* {
color: white;
}