Flexbox css header

user_12779127 0
Viewed 124

I need to create a header. Screenshot: enter image description here

I need to transform pictures like show arrows. I tried to use justify-content(properties: space-between) and align-content(flex-end), but without successful. The pictures didn't move with any properties. What's problem? I just started learning CSS flexbox and realize that I'm missing something. Code:

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

header {
  display: flex;
}


.logo {
  display: flex;
}

nav {
  display: flex;
  align-self: center;
}

.search {
  display: flex;
  align-self: center;
}
<div class="content">

  <header>

<div class="logo">
  <img src="https://habrastorage.org/webt/uv/ld/0c/uvld0cdesbfdoy0pljighvv9kfu.png">
</div>

<div class="search">
  <img src="https://habrastorage.org/webt/g-/ng/kq/g-ngkqbwayj14www_8xz8to94by.png">
</div>

<nav>
  <img src="https://habrastorage.org/webt/nq/gn/07/nqgn07phf2raavnq8lyw5rvzrzu.png">
  <img src="https://habrastorage.org/webt/oo/lp/jm/oolpjmmcimo017xocx6srwzvioy.png">
  <img src="https://habrastorage.org/webt/m7/qw/ic/m7qwichzqecuno-maehtl4ccv2y.png">
  <img src="https://habrastorage.org/webt/ux/-2/yi/ux-2yixiyw5lt1djhkl0txaxk3i.png">
</nav>

  </header>
</div>

flexbox css html
3 Answers

It is because the .search class does have enough width to align itself to the end. You have to add width: 100% to the search class.

From

.search {
  display: flex;
  align-self: center;
}

To

.search {
  display: flex;
  align-self: center;
  width: 100%;
}
user_81024920

Add justify-content: space-between to header:

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

}

header {
display: flex;
justify-content: space-between  
}


.logo {
display: flex;

}

nav {
display: flex;
align-self: center;
}

.search {
display: flex;
align-self: center;
}
<div class="content"> 

    <header>    

        <div class="logo">
            <img src="https://habrastorage.org/webt/uv/ld/0c/uvld0cdesbfdoy0pljighvv9kfu.png">
        </div>

        <div class="search">
            <img src="https://habrastorage.org/webt/g-/ng/kq/g-ngkqbwayj14www_8xz8to94by.png">
        </div>

        <nav>
            <img src="https://habrastorage.org/webt/nq/gn/07/nqgn07phf2raavnq8lyw5rvzrzu.png">
            <img src="https://habrastorage.org/webt/oo/lp/jm/oolpjmmcimo017xocx6srwzvioy.png">
            <img src="https://habrastorage.org/webt/m7/qw/ic/m7qwichzqecuno-maehtl4ccv2y.png">
            <img src="https://habrastorage.org/webt/ux/-2/yi/ux-2yixiyw5lt1djhkl0txaxk3i.png">
        </nav>

    </header>
</div>

user_86101270

You should add one line in header class like below :

justify-content: space-between;

It will Re-Arrange all item by keeping space between elements inside of flex-box.

user_75119040
Related