Задание межэлементного пространства во flexbox

Question

Есть сайт - https://www.figma.com/file/noqP1gzhrAlGAErPNBgknp/test?node-id=0%3A1 (tablet версия). Как задать межэлементное пространство между LOGO COMPANY и двумя квадратиками в футере с учетом того, что LOGO COMPANY И 2 квадратика находятся в одном flex-е (или как задать боковые расстояния для этого flex-а) (расстояния сбоку различные, поэтому space-between и space-around не подходят)?

Answer 1

В общем, если вы зачем-то не захотите просто скопировать слой с лого и квадратиками с фигмы и захотите всё делать руками, то можно так:

.container {
  display: flex;
  justify-content: space-between;
  height: 40px;
  width: 130px;
}
.container2 {
  width: 20px;
  height: 20px;
  display: flex;
  border: 1px solid red
}
.sq1 {
  width: 10px;
  height: 10px;
  background-color: black;
    align-self: flex-end;

}
.sq2 {
  width: 10px;
  height: 10px;
  background-color: green;
}

<div class="container">
  <div class="logo">Logo company</div>
  <div class="container2">
 <div class="sq1">+</div>
  <div class="sq2"></div>
</div>
</div>

https://jsfiddle.net/marader/mLuk5q4f/11/

БЛОГ НА HUSL

Задание межэлементного пространства во flexbox

Ответы (1 шт):