Working with Flexbox
The last notes
Recommended
Website hosting
If you are choosing hosting for your project, I recommend Timeweb. Modern infrastructure, a wide range of plans from starter options to high-load VPS, and responsive tech support that actually helps instead of sending template replies. I host some of my own projects there and recommend it to my clients.
Go to site Affiliate link. The price remains the same for you.All English-language materials have been translated fully automatically using the Google service
Center the responsive box horizontally and vertically
css
.aOuter {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
html
<div class = "aOuter">
<div class = "aInner"> </div>
</div> or
.aOuter {
text-align: center;
}
.aOuter: before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.aInner {
display: inline-block;
vertical-align: middle;
}
Press the footer to the bottom of the page \ container
css
.aContainer {display: flex; flex-direction: column; height: 100%;}
.aHeader {flex: 0 0 auto; }
.aBody {flex: 1 0 auto; }
.aFooter {flex: 0 0 auto; }
html
<div class = "aContainer">
<div class = "aHeader"> </div>
<div class = "aBody"> </div>
<div class = "aFooter"> </div>
</div>5 Column Flexbox Grid
Thanks for the example Paper Matthew
Stretch items to fit
ul {
display: flex;
}
ul li {
flex-basis: auto;
flex-grow: 1;
}
3 columns flexbox
div {
display: flex;
flex-wrap: wrap;
}
div> div {
flex-grow: 1;
width: 33%;
height: 100px;
}
Change the order of the blocks
.block1 {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.block2 {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
Automatically calculate the distance between flexbox columns
.container {
display: flex;
--gap: 100px;
--columns: 4;
gap: var(--gap);
flex-wrap: wrap
}
.item {
width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
}Flexbox and object-fit for img
img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
Gap between two elements with display:flexbox
.parent {
display: flex;
}
.child + .child {
margin-left: 12px;
}
Columns of the same height
.row-flex {
display: flex;
flex-flow: row wrap;
}
Flexbox: in a vertical container we push one div down and center the other
<div class = "block">
<div class = "block__middle"> middle </div>
<div class = "block__bottom"> bottom </div>
</div> .block {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.block: before {
content: '';
padding: 0;
box-sizing: border-box;
}
.block__middle,
.block__bottom {
padding: 0;
width: 100%;
box-sizing: border-box;
}
3 columns, the sides are pressed to the edges. Medium indent 20 pixels
html
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>css
.flex{
display:flex;
flex-wrap:wrap;
}
.item{
width:calc((100% - 40px) / 3);
}
.item:nth-child(3n-1){
margin:0 20px;
}Automatic n-column splitting
with flex
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; using grid
.grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 0;
}
Comments