React / CSS - 使用弹性框浮动导航栏？

Question

This is probably a relatively simple CSS situation but now working in React and also trying to display an Image component inline in the nav things are getting difficult -

I have an animated nav I took and tweaked from https://codepen.io/littlesnippets/pen/OyxyRG and I need to float it right. I want to display my Image inline at the same horizontal position as the nav items and float it left so the whole nav looks like:

Here's what I have, which aligns everything to center:

<main className={styles.main}>

        <div className={styles.nav}>
          <Image className={styles.navIcon} src={icon} width={40} height={40} />
          <ul className={styles.snip1168}>
            <li className={styles.current}><a href="#" data-hover="Work">Work</a></li>
            <li><a href="#" data-hover="Recs">Recs</a></li>
            <li><a href="#" data-hover="Say Hi">Say Hi</a></li>
          </ul>
        </div>

CSS:

.container {
  padding: 0 2rem;
}

.main {
  min-height: 100vh;
  padding: 4rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Start custom nav */

.nav {
  margin-top: 2.4em; /* coordinates w height of line away from link, MUST BE = */
}

.snip1168 {
  text-align: center;
  text-transform: uppercase;
}
.snip1168 * {
  box-sizing: border-box;
}
.snip1168 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 1.5em;
  padding: 0;
}
.snip1168 a {
  padding: 0.5em 0;
  padding-top: 2.4em; /* height of line away from link */
  color: rgba(0, 0, 0, 1);
  position: relative;
  text-decoration: none;
}
.snip1168 a:before,
.snip1168 a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1168 a:before {
  top: 0;
  display: block;
  height: 3px;
  width: 0%;
  content: "";
  background-color: black;
}

.snip1168 a:hover:before,
.snip1168 .current a:before {
  opacity: 1;
  width: 100%;
}
.snip1168 a:hover:after,
.snip1168 .current a:after {
  max-width: 100%;
}

I've tried float properties as well as justify-content options. How can I create this alignment?

 .container { padding: 0 2rem; } .main { min-height: 100vh; padding: 4rem 0; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } a { color: inherit; text-decoration: none; } * { box-sizing: border-box; } html, body { padding: 0; margin: 0; font-family: "sequel-sans-roman", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } .navIcon { display: inline-block; flex-grow: 1; } .nav { margin-top: 2.4em; /* coordinates w height of line away from link, MUST BE = */ } .snip1168 { text-align: center; text-transform: uppercase; } .snip1168 * { box-sizing: border-box; } .snip1168 li { display: inline-block; list-style: outside none none; margin: 0 1.5em; padding: 0; } .snip1168 a { padding: 0.5em 0; padding-top: 2.4em; /* height of line away from link */ color: rgba(0, 0, 0, 1); position: relative; text-decoration: none; } .snip1168 a:before, .snip1168 a:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .snip1168 a:before { top: 0; display: block; height: 3px; width: 0%; content: ""; background-color: black; } .snip1168 a:hover:before, .snip1168 .current a:before { opacity: 1; width: 100%; } .snip1168 a:hover:after, .snip1168 .current a:after { max-width: 100%; } .mainText { text-transform: uppercase; font-size: 1.1rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div className={styles.container}> <main className={styles.main}> <div className={styles.nav}> <div className={styles.navIcon}> <Image src={icon} height={40} width={40} /> </div> <ul className={styles.snip1168}> <li className={styles.current}><a href="#" data-hover="Work">Work</a></li> <li><a href="#" data-hover="Recs">Recs</a></li> <li><a href="#" data-hover="Say Hi">Say Hi</a></li> </ul> </div> </div> </div>

Answer 1

Quick solution is to set

.nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 2.4em;
  /* coordinates w height of line away from link, MUST BE = */
}

Here is a full snippet

 html, body { padding: 0; margin: 0; font-family: "sequel-sans-roman", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } .container { padding: 0 2rem; } .main { min-height: 100vh; padding: 4rem 0; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } a { color: inherit; text-decoration: none; } * { box-sizing: border-box; } .navIcon { display: inline-block; flex-grow: 1; } .nav { display: flex; justify-content: space-between; width: 100%; margin-top: 2.4em; /* coordinates w height of line away from link, MUST BE = */ } .snip1168 { text-align: center; text-transform: uppercase; } .snip1168 * { box-sizing: border-box; } .snip1168 li { display: inline-block; list-style: outside none none; margin: 0 1.5em; padding: 0; } .snip1168 a { padding: 2.4em 0 0.5em; /* height of line away from link */ color: rgba(0, 0, 0, 1); position: relative; text-decoration: none; } .snip1168 a:before, .snip1168 a:after { position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } .snip1168 a:before { top: 0; display: block; height: 3px; width: 0%; content: ""; background-color: black; } .snip1168 a:hover:before, .snip1168 .current a:before { opacity: 1; width: 100%; } .snip1168 a:hover:after, .snip1168 .current a:after { max-width: 100%; } .mainText { text-transform: uppercase; font-size: 1.1rem; }

 <div class='container'> <main class='main'> <div class='nav'> <div class='navIcon'> <img src="https://picsum.photos/40" height={40} width={40} /> </div> <ul class='snip1168'> <li class='current'><a href="#" data-hover="Work">Work</a></li> <li><a href="#" data-hover="Recs">Recs</a></li> <li><a href="#" data-hover="Say Hi">Say Hi</a></li> </ul> </div> </main> </div>

Answer 2

Here I add some borders just to show where things are. I removed CSS not relevant to the question and showed a rendered HTML set to better illustrate.

 .container { padding: 0 2rem; border: solid 1px pink; } .main { border: 1px solid green; min-height: 100vh; } a { color: inherit; text-decoration: none; } .nav { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: start; border: solid blue 1px; } .navIcon { display: block; flex-grow: 1; padding-left: 1em; } .navIcon img { display: block; width: 40px; height: 40px; border: 1px dashed red; } ul.snip1168 { width: 30%; list-style: none; display: flex; flex-direction: row; justify-content: space-around; align-items: center; text-transform: uppercase; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div class='container'> <main class='main'> <div class='nav'> <div class='navIcon'> <img src="icon" alt="myicon" /> </div> <ul class='snip1168'> <li class='current'><a href="#" data-hover="Work">Work</a></li> <li><a href="#" data-hover="Recs">Recs</a></li> <li><a href="#" data-hover="Say Hi">Say Hi</a></li> </ul> </div> </main> </div>