Trouble Having CSS Order (Flex Box) Work in an Email

Flexbox order property not working to order elements?

To move the site-branding to the center, set nav1's order property to -1.

Since the default is 0, this will move it to the beginning and leave the site-branding in the middle.

Note, I didn't use all your media queries here, just show the simplest how-to.

Stack snippet

.site-header {  display: flex;}
.site-branding {  text-align: center;  flex: 1 0 auto;}
.nav1 {  order: -1;}

<header id="masthead" class="site-header">
  <div class="site-branding">    <div class="site-branding-text">      <p class="site-title"><a href="http://localhost/wordpress/" rel="home">Treehouse</a></p>      <p class="site-description">Its an awesome website</p>    </div>  </div>
  <!-- .site-branding -->  <nav id="site-navigation" class="main-navigation nav2">    <div class="menu-toggle">      <div id="sidebar-btn">        <span></span>        <span></span>        <span></span>      </div>    </div>    <div class="menu-primary-menu-links-container">      <ul id="primary-menu" class="menu">        <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-167"><a href="http://localhost/wordpress/">Home</a></li>        <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li>        <li id="menu-item-1987" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-218 current_page_item menu-item-has-children menu-item-1987"><a href="http://localhost/wordpress/gallery/">Gallery</a>          <button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>          <ul class="sub-menu">            <li id="menu-item-1988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"><a href="http://localhost/wordpress/book-a-workshop/">Book A Workshop</a></li>          </ul>        </li>      </ul>    </div>  </nav>
  <!-- #site-navigation -->  <nav id="site-navigation" class="main-navigation nav1">    <div class="menu-toggle">      <div id="sidebar-btn">        <span></span>        <span></span>        <span></span>      </div>    </div>    <div class="menu-primary-menu-links-container">      <ul id="primary-menu" class="menu">        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-167"><a href="http://localhost/wordpress/">Home</a></li>        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li>        <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-218 current_page_item menu-item-has-children menu-item-1987"><a href="http://localhost/wordpress/gallery/">Gallery</a>          <button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>          <ul class="sub-menu">            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"><a href="http://localhost/wordpress/book-a-workshop/">Book A Workshop</a></li>          </ul>        </li>      </ul>    </div>  </nav>  <!-- #site-navigation --></header>

My css flexbox is not working on any browser

The display: flex property only applies to the direct children elements within the flex container. I'm guessing that you want the list items to also be "flexed" so in order to do that - you need to apply display flex to the ul as well as the nav.

In other words - the nav bar applies display flex to ONLY the div containing the image image and the ul. In order to align and space out the list items - the ul needs to also be a flex container. I am using space-around to space out the list items - but obviously you might need to alter the styling to suit your needs.

*{
    margin: 0px;
    padding: 0px;
}
/* Navigation Bar */
#navbar{
    display: flex;
    align-items: center;
    flex-direction: row;
    top: 0px;
}

#navbar ul{
    display: flex;
    align-items: center;
    flex-direction: row;
    top: 0px;
    list-style: none;
    flex-grow: 1;
    justify-content: space-between;
    margin-left: 32px
}

<nav id="navbar">
   <div id="logo">
       <img src="logo.png" alt="MyOnlineMeal.com">
    </div>
    <ul>
       <li class="item"><a href="#home">Home</a></li>
       <li class="item"><a href="#services-container">Services</a></li>
       <li class="item"><a href="#client-section">Our Clients</a></li>
       <li class="item"><a href="#contact">Contact Us</a></li>
     </ul>
 </nav>

Can't center button within a HTML form using flexbox - code inside

For a flex solution, you have some options. It truly just depends on the extent of your design. Here are a few:

.button-center {
  display: flex;
  justify-content: center;
  /* text-align: center; ~ non-flex solution */
}

form.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
} 

See it working here:

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
  background-color: #eee;
  color: black;
}

.button-center {
  display: flex;
  justify-content: center;
  /*text-align: center;*/
}

form.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
} 

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-weight: 900;
  font-size: 1em;
  padding: 20px 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid grey;
  position: sticky;
}

ul {
  flex-grow: 1;
  max-width: 30%;
  display: flex;
  justify-content: space-around;
  text-decoration: none;
}

img {
  display: flex;
  width: 40vw;
}

ul li {
  display: inline;
  text-decoration: none;
  display: flex;
}

.nav-links a {
  text-decoration: none;
  color: black;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  font-weight: 700;
  padding: 20px;
}

input[type="email"] {
  padding: 5px 10px;
  margin: 10px 0px;
  border: solid 1px black;
  width: 350px;
}

input[type="submit"] {}

@media (max-width: 700px) {
  header {
    font-size: 1em;
  }
  nav {
    display: flex;
    flex-direction: column;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
  }
}

<html>

<body>
  <header>
    <nav class="Navbar">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
      <ul class="nav-links">
        <li><a href="#" class="link">Features</a></li>
        <li><a href="#" class="link">How It Works</a></li>
        <li><a href="#" class="link">Pricing</a></li>
      </ul>
    </nav>
  </header>
  <section class="hero">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form class="email-form">
      <div class="email-form">
        <label for="email"></label>
        <input type="email" name="email" id="email" placeholder="Enter your email address" required>
      </div>
      <div class="button-center">
        <input class="sub-button" type="submit" value="GET STARTED">
      </div>
    </form>
  </section>
</body>

</html>

Why is my Flexbox layout not working properly in Safari 15 and in Chrome?

Couple of problems:

1. if you want both columns to be 50% width on all screen sizes, you need to set flex:1 1 50% on both the p and the img tags.
2. if you want the img tag to scale up and down instead of always being it's full size, you need to set width:100%;height:auto on it.
3. if you want to center the two elements vertically all you need is align-items:center on their container (where display:flex is defined) and not use any vertical padding on them

As a matter of personal preference I would set display:block on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.

Code:

<div class="container4">
  <p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
  <img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>

<style>
.container4 {
  font-size: 40px;
  display: flex;
  align-items: center;
  gap: 50px;
}
.element4 {
  padding-left: 50px;
  flex: 1 1 50%;
}

.element4-2 {
  padding-right: 50px;
  flex: 1 1 50%;
  width:100%;height:auto;
}
</style>

Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)

---

Related Topics