Верстка форм с помощью flexbox?

Question

[Alxsick]

можно ли с помощью флекбокс сверстать блоки с формами, как на картинке

без баттона мне понятно как. делаем два общих дива, один flex-direction column, другой row
а если добавлять кнопку вниз на всю длину, то не получается. смог только использовав transform x
подскажите более правильный способ.
Актуально ли сейчас использовать грид, тут бы он очень помог.
И второй вопрос, как вы видите background-image, карта земли.
Можно ли ее сдвинуть так, что бы половина она отражалась только на второй половине экрана, примерно с textarea

Comments

[Ankhena]

flex-direction column

И без column прекрасно будет, внутренние блоки по 100% ширины сами встанут в столбик.

Answer 1

[Артур Мустафин]

используйте CSS Grid, и забудьте про flexbox, он хорошо, но для таких задач подходит плохо

Answer 2

[Ankhena]

Есть прекрасные теги для группировки полей формы, fieldset
https://jsfiddle.net/ej4wbm8d/

Про карту не поняла. Возможно, установить bg position в нужное положение.

Comments

[Alxsick]

секрет решения оказался в box-sizing: border-box
а почему без него не получается не могу понять, подскажите

[Ankhena]

Alxsick, Потому что без него ширина считается по другому и в результате блоки не влезают.
https://developer.mozilla.org/en-US/docs/Web/CSS/b...
или https://webref.ru/css/box-sizing

Можно без него, можно заменить на расчет ширины с calc.

Answer 3

[nivaech]

Скорее всего здесь сочетения нескольких flexbox контейнеров. То есть есть основной, с flex-direction: column, в который помещаются еще два контейнера: первый для обеих верхних форм, второй для кнопки, которые уже расположены вертикально. В этом контейнере для форм flex-direction: row, и плюс еще два контейнера внутри - один для левой части с тремя формами, и один для правой, для формы сообщений.