Working with Flexbox

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;
}

Теги: css