Все поля равны, но некоторые поля более равны, чем другие

Question

div {
    width: 100px;
    margin: 0 auto;
}

Этот CSS горизонтально центрирует элемент блока.

Можно ли компенсировать auto пропорции полей? Например, сделать левое поле вдвое больше правого?

Answer 1

Вы можете использовать несколько пустых элементов div и «согнуть» левую сторону в два раза быстрее:

body {
  display: flex;
}

#left {
  flex: 2
}

#content {
  width:100px;
  background-color: pink;
}

#right {
  flex: 1
}

<div id="left"></div>
<div id="content">content</div>
<div id="right"></div>