Problems working with Flexbox

Question

Problems working with Flexbox

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Hello, guys, I'm starting to work with flexbox, but I'm having a problem making a menu, following the css code:

.header{
width:  100%;
height: 100vh;
background-image: url(../img/backgrounds/bg1.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

.header .header_content{
    max-width: 1366px;
    margin: 0 auto;
    display: flex;
    /*justify-content: space-between;*/
}
.header .header_content .logo{
    flex-basis: 247px;
    padding: 20px;
    width: 207px;
}

.header .header_content .header_content_nav{
    flex-basis: calc(100% - 247px);
    display: flex;
    justify-content: flex-end;
}
.header_content_nav .menu{
    display: flex;
    align-items: stretch;
}
.header_content_nav .menu li{
    list-style: none;
    display: flex;
    align-items: center; 
    margin: 0 15px;

}
.header_content_nav .menu li a{
    color: #ffffff;
    height: 100%;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration:  none;
    font-size: 0.9em;
}



.header_content_nav .social_telefone{
    display: flex;
    align-items: stretch;
 }

HTML:

<header class="header">
            <div class="header_content">

                <div class="logo">
                    <a>
                        <img src="logo_med.png" width="207"/>
                    </a>
                </div>
                <!--FECHA DIV LOGO-->
                <nav class="header_content_nav">
                       <ul class="social_telefone">
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                        </ul>-->
                        <ul class="menu">
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                        </ul>
                </nav>
            </div>
        </header>

It's just wrong, the social is left and not on the menu! wanted something like this:

Thank you!

html5 css3 menu flexbox

asked by anonymous 03.06.2018 / 00:32

2 answers

1

The code that you put in is not enough to reproduce the problem, I'll leave you a code to base yourself on.

This site explains flexbox usage well

header, header * {
  display: flex;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}

header {
  padding: 10px;
  line-height: 50px;
  background: #000;
}

header img {
  height: 50px;
}

header nav ul {
  list-style: none;
}

header nav ul li a {
  text-decoration: none;
  color: #FFF
}

<header>
  <img src="http://www.cubejs.org/docs/images/placeholder_200x100.svg"><nav><ul><li><ahref="./">link</a></li>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
    </ul>
  </nav>
  
  <nav>
    <ul>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
    </ul>
  </nav>
</header>

03.06.2018 / 02:53

How to play a background audio? Javascript function does not work

score 1 · Accepted Answer

The best path is always the flexbox and / or grids , unless the end user of your system needs something compatible with old browsers ... I did not quite understand the purpose of the question, if you want reproducing the result of the image can do this ...

body {
  margin: 0;
}
.header_content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #555;
}
.header_content_nav {
  display: flex;
  flex-direction:column;
  align-items: flex-end;
}
.header_content_nav ul {
  list-style: none;
  margin:0;
  padding:0;
}
.header_content_nav ul li a {
  text-decoration: none;
  color: white;
  font-size: 10px;
}
.social_telefone {
  display: flex;
  justify-content: space-between;
  width: 170px;
}
.menu {
  display: flex;
  justify-content: space-between;
  height: 20px;
  align-items: flex-end;
  width: 250px;
}

<header class="header">
            <div class="header_content">

                <div class="logo">
                    <a>
                        <img src="https://fakeimg.pl/185x60/"/></a></div><!--FECHADIVLOGO--><navclass="header_content_nav">
                       <ul class="social_telefone">
                           <li><a href="./">FACEBOOK</a></li>
                           <li><a href="./">TELEFONE</a></li>
                           <li><a href="./">LOGIN</a></li>
                        </ul>
                        <ul class="menu">
                           <li><a href="./">HOME</a></li>
                           <li><a href="./">SERVIÇOS</a></li>
                           <li><a href="./">BLOG</a></li>
                           <li><a href="./">PRODUTOS</a></li>
                           <li><a href="./">CONTATO</a></li>
                        </ul>
                </nav>
            </div>
        </header>