Работа с Flexbox

Центрируем адаптивный блок по горизонтали и вертикали

css

.aOuter {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

html

<div class="aOuter">
  <div class="aInner"></div>
</div>

или

.aOuter{
	text-align: center;
}

.aOuter:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.aInner {
	display: inline-block;
	vertical-align: middle;
}

Прижимаем подвал к низу страницы\контейнера

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-колоночный грид на flexbox

За пример спасибо Paper Matthew

Растягиваем пункты по ширине

ul {
  display: flex;
}

ul li {
  flex-basis: auto;
  flex-grow: 1;
}

3 колонки на flexbox

div {
  display: flex;
  flex-wrap: wrap;
}

div>div {
  flex-grow: 1;
  width: 33%;
  height: 100px;
}

Меняем местами порядок следования блоков

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

Автоматический рассчет расстояния между колонками flexbox

.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 и object-fit у img

img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

Промежуток между двумя элементами с display:flexbox

.parent {
  display: flex;
}
.child + .child {
  margin-left: 12px;
}

Колонки одинаковой высоты

.row-flex {
    display: flex;
    flex-flow: row wrap;
}

Flexbox: в вертикальном контейнере один див прижимаем вниз, а другой центрируем

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

Делаем все колонки принудительно одного размера с помощью flex

У родительского элемента выставляем display:flex

У "детей" flex: 1 1 auto

3 колонки, боковые прижаты к краям. Отступ у средней 20 пикселей

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

Автоматическое разбиение на n-колонок

c помощью flex

-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;

c помощью grid

.grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 0;
}

Теги: css