Monday

How do I position child elements on opposite side of parent with flexbox in css

2:32 PM alignment, css, flexbox, html, search No comments

Issue

I'm working on the header for a website. My logo is on the right side, I want to put my search bar on the left. I'm coding in css and am trying to use flexbox.

I've tried a lot of things. Here's my html:

 <body>
      <header>
        <div class="logo">
          <logo picture/>
        </div>
        <div class="search-set">
            <form id="s-bar-holder" role="search">
              <input type="query" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site."/>
            </form>
        </div>
        <div></div>
      </header>
      <main></main>
    </body>

Here's my css:

header {
    display: flex;
    background-color: rgb(78,78,78);
    margin-top: -8px;
    margin-left: -7px;
    margin-right: -8px;
    height: 60px;
    width: auto;
    
     
}
.logo {
  height: 60px;
  width: 300px;
  overflow: hidden;
  display: flex;
  align-self: flex-start;
}
.logo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-set {
    display: flex;
    align-self: flex-end;
}
#search-bar {
    background-color: rgb(78,78,78);
    border: none;
    color: rgb(230,230,230);
    outline: none;
    height: 58px;
    width: 200px;
    display: flex;
    justify-content: wrap;

Thanks.

Solution

I tried to make header section something similiar what you want. Please go through the code and run snippet on full page.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
  }

body{
    background: rgb(235, 235, 235);
    
  }
header {
    display: flex;
    background-color: rgb(78,78,78);
    height: 60px;
    width: auto;    
}

.container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo p{
    font-size: 30px;
    font-weight: 800;
    margin: 5px;
    margin-right: 50px;
}

#search-bar {
    background-color: rgb(78,78,78);
    border: none;
    color: rgb(230,230,230);
    outline: none;
    height: 58px;
    display: flex;
    justify-content: wrap;
    margin-left: 50px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="q4.css" />
    <title>Flexbox</title>
  </head>
  <body>
    <header>
    <div class="container">
        <div class="search-set">
            <form id="s-bar-holder" role="search">
              <input type="query" id="search-bar" name="q" placeholder="Search..." aria-label="Search the site."/>
            </form>
        </div>

        <div class="logo">
            <p>LOGO</p>
        </div>
        
    </div>
    </header>
  </body>
</html>

Answered By - ArthPatel02

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Monday

How do I position child elements on opposite side of parent with flexbox in css

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels