Flexbox - Image alignment

Asked

Viewed 185 times

1

How do I leave the image in the print next to the text using Flexbox? follows the code.

inserir a descrição da imagem aqui

body {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}

header {
    display: flex;
    justify-content: center;
    height: 430px;
}

.container {
    display: flex;
    max-width: 900px;
    width: 100%;
    background-image: radial-gradient(#2a3297, #1c1f60);
}

.column{
    display: flex;
    flex-direction: column; 
}

 .clock_info {
     display: flex;
     justify-content: center;
     flex-direction: column;
     flex: 1;
 }

 .clock_info h1 {
     margin: 0;
     padding: 0;
     color: #FFFFFF;
    width: 600px;
    font-size:60px;
    text-transform: uppercase;
    text-shadow: 0px 1px 0 #000000;
 }

 .clock_info h2 {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    width: 500px;
    font-size:20px;
     margin-top: 30px;
}

.clock_img {
    margin: 0;
    padding: 0;
    flex: 1;
}

#banner{
    display:flex;
    justify-content:center;
    
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta id="viewport" name="viewport" content="width=device-width, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="../Landing Page/assets/css/style.css" />
        <title>Landing Page</title>
    </head>
    <body>

        <header id="banner">

            <div class="container column">

                <div class="clock_info">
                    <h1>New Release: Smart Watch YX</h1>
                    <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos modi sit repudiandae commodi quae nihil assumenda repellendus.</h2>
                </div>

                <div class="clock_img">
                    <img src="../Landing Page/assets/images/relogio.jpg" />
                </div>

            </div>

        </header>
        <main></main>
        <footer></footer>

    </body>
</html>

html5 css3 flexbox img

  • Is Rafael the answer solved the problem? If you have any questions, say there that I help you. If you have already decided, remember to mark the solved questions by clicking on the below of the arrows of the answer that served you. So your question is not pending without accepted answer, even though it has already been solved...

  • Solved, thank you very much.

1 answer

0

Hello, all right my darling?.

flex-Direction by default is Row ( row), you are changing it to column(column). Just switch to the following:

.column{

display: flex; 
align-items:flex-start; /*Para que o texto e imagem se alinhem pela parte de cima*/

If you want the watch image to be placed against the right corner do the following: In class

.clock_img {

margin: 0;
padding: 0;
 /*retire a propriedade flex com o valor 1*/

A hug.

Browser other questions tagged html5 css3 flexbox img

You are not signed in. Login or sign up in order to post.