Align flex items

Hello,

Is this proper way to align flex items, one item to the left and rest to do right?

https://codepen.io/marklenon95/pen/OxgYQq

Hi there marklenon95,

personally, I would not use flex at all, or all those classes or nothing. :unhappy:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#main-nav {
    position:fixed; 
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding: 1em 1.25em;
    margin: 0;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.5);
    font-family: Merriweather, serif;
    color: #fff;
 }

#main-nav  span {
    float:left;
    font-size: 2em;
    font-weight: bold;
 }

#main-nav  ul {
   float: right;
   padding: 0;
   margin: 0;
   list-style-type: none;
 }

#main-nav  li {
    display: inline-block;
 }

#main-nav a {
    padding: 0.555em;
    font-size: 1.125em;
    color: #fff;
    text-decoration: none;
 }
</style>

</head>
<body> 

<div id="main-nav">
 <span>Logo Here</span>
  <ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#menu">Menu</a></li>
   <li><a href="#reservations">Reservations</a></li>
   <li><a href="#info">Info</a></li>
  </ul>
</div>

</body>
</html>

Also, I am not an advocator of “position: fixed” navigation. :wonky:

Why does it need to be in continuous view, taking up valuable space? :shifty:
If your are going to target sections you can also target the navigation. :biggrin:

Here is a basic example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS "target" Test</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

#container {
    max-width: 30em;
    padding: 2em;
    margin: auto;
    border: 0.062em solid #999;
    background-color: #fff;
    text-align: right;
 }

h1 {
    text-align: center;
 }

h2, p {
    text-align: left;
 }

#nav {
    padding: 0;
    margin: 2em 0;
    list-style: none;
    text-align: center;
 }

#nav li {
    display: inline;
    margin: 0 1em;
 }

#nav a {
    color: #000;
 }

#link1, #link2, #link3, 
#link4, #link5 {
    display: none;
    padding: 2em;
    border: 0.062em solid #999;
 }

#link1:target, #link2:target, #link3:target, 
#link4:target, #link5:target {
    display: block;
    animation: highlight 3s forwards;
 }

@keyframes highlight {
from {
      background-color: rgba( 128, 128, 128, 0.4 );
  }
to   {
      background-color: rgba( 255, 255, 255, 0.0 );
  }
 }
</style>

</head>
<body> 

<div id="container">
 <h1>Target Test</h1>
 <ul id="nav">
  <li><a href="#link1">link 1</a></li>
  <li><a href="#link2">link 2</a></li>
  <li><a href="#link3">link 3</a></li>
  <li><a href="#link4">link 4</a></li>
  <li><a href="#link5">link 5</a></li>
 </ul>
 <div id="link1">
  <h2>Content One</h2>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
    bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
    posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
    Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
    sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
    nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
    odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
    Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
    purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
  </p>
  <a href="#container">top</a>
 </div>
 <div id="link2">
  <h2>Content Two</h2>
   <p>
    Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
    purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. 
    Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius, 
    nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
    penatibus et magnis dis linkturient montes, nascetur ridiculus mus. Curabitur tristique 
    varius ullamcorper.
  </p>
  <a href="#container">top</a>
 </div>
 <div id="link3">
  <h2>Content Three</h2>
   <p>
    Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non 
    vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu. 
    Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat. 
    Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
    augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam. 
    Phasellus malesuada libero felis, non elementum ex tincidunt eget. Quisque cursus arcu vel 
    diam consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
  </p>
  <a href="#container">top</a>
 </div>
 <div id="link4">
  <h2>Content Four</h2>
   <p>
    In sapien massa, feugiat ut magna eu, hendrerit porttitor justo. In vitae massa ipsum. 
    Aliquam feugiat tortor sed diam facilisis, et molestie dolor blandit. Pellentesque non lectus 
    odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. Duis congue dignissim ante ut 
    consequat. Sed nec sagittis neque, quis vehicula urna. Fusce laoreet interdum ligula vel 
    finibus. Nunc odio purus, dapibus sit amet orci eget, congue eleifend erat. Quisque porttitor 
    imperdiet ullamcorper. Aenean non orci nec magna tempor porta at id ipsum.
   </p>
  <a href="#container">top</a>
 </div>
 <div id="link5">
  <h2>Content Five</h2>
   <p>
    Cras euismod euismod nibh, nec hendrerit ante efficitur id. Donec sit amet interdum mauris. 
    Maecenas pellentesque, sem a commodo tincidunt, quam ex viverra nibh, non consectetur 
    odio quam et velit. Nulla eu risus quis magna suscipit malesuada vel quis nisi. Cras suscipit 
    nulla vitae ante rhoncus, id elementum nisi interdum. Integer sem quam, tincidunt nec quam 
    ac, lobortis volutpat ipsum. Curabitur nec turpis viverra, eleifend arcu non, egestas felis. 
    Etiam a eros felis. Aliquam nec ullamcorper enim. Donec sit amet commodo ante, vitae 
    consectetur sem. Proin ut luctus dolor. Integer lectus massa, maximus nec urna non, 
    ullamcorper hendrerit mi. 
   </p>
  <a href="#container">top</a>
 </div>
</div>

</body>
</html>

coothead

3 Likes

No you just need to use a right auto margin on the first item and that will soak up the extra space and push the rest to the right.

Note also that you have width:100% and padding 20px each side on your nav making it 40px too wide. Just use left:0 and right:0 and no width (or use box-sizing:border-box as in Cootheads example).

Here is the revised css:

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.main-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  list-style-type: none;
  align-items:center;
}
.nav-item a {
  padding: 10px;
  font-size: 1.125em;
  color: white;
  text-decoration: none;
}

.nav-item {
  font-family: 'Merriweather', serif;
}
.nav-item:first-of-type {
 margin-right:auto;
}
.logo {
  font-size: 2em;
  color: white;
  font-weight: bold;
  cursor: default;
}

Coothead makes some good points about fixed navs and they are generally a pain.:slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.