Flex возможно ли?

Question

[Антон Плашкевич]

Нужно сделать так как показано на скрине, пробовал по разному на флексах, именно нужно на флексах , если это возможно, спасибо буду благодарен за помощь

Comments

[Hyubert]

а у вас что получилось?

[Антон Плашкевич]

Hyubert, сделал wrapper для headera , там img соответственно и input. все это display: flex , justify-content: cetnter, flex-direction: column, но суть в том что всё оказывается под низом а марджинами кидать в крайний угол хедера я не очень хочу

Answer 1

[Дмитрий]

Пример

Comments

[Антон Плашкевич]

спасибо, а каков принцип ? ибо код у меня не чем не отлечается только вместо <h1> у меня <img> в dive -

<header>
        <div class="flex-header-conteiner">
            <div class="flex-image">
                <img src="img/header_img.png" alt="header">
            </div>
            <div class="flex-btn">
                <input type="text" placeholder="Логин">
                <input type="text" placeholder="Пароль">
                <input type="submit" value="вход">
            </div> 
        </div>
</header>

вот как-то так

[Дмитрий]

Антон Плашкевич, родителю (header__form-wrap) задаем display: flex; justify-content: space-between;. Для child (header__form) - margin-left: auto; - чтобы прижать вправо

[Дмитрий]

Антон Плашкевич, + у вас общий родитель для формы и тайтла.

[Антон Плашкевич]

Дмитрий, я так понимаю из-за общего родителя img и inputov за-за этого у флексы ругались? нужно что-то вроде токого?

<header>
     <div class="header_btn_wrapper">
           <div class="flex_btn">
                   <input type="text" placeholder="111111">
                   <input type="text" placeholder="111111">
            </div>
     </div>
      <div class="header_background">
            <img src=".......">
      </div>
</header>

ну и соответственно wrappery даю flex а дочернему margin-left auto

[Дмитрий]

Антон Плашкевич, Да

[Антон Плашкевич]

Дмитрий, понял спасибо