Make div go under in flex container - html

Question

I'm trying to implement the following responsive behaviour for a navbar.
Here is the result I want on large screens:
And on small screens (Iphone 8 and similar):
I created the navbar using flexbox and the possible solution I have in mind is using flex-wrap: wrap; but I need to find a way to only make the two links (with tmp class) go down when the screen is small and keep the logo and the "S'inscrire" link up when the screen is small.
I'm not sure if flexbox is the best way to achieve that but it's what I tried, I'm open to any better solution.
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.navigation__items {
display: flex;
justify-content: space-between;
}
.tmp {}
.navigation__item {
list-style: none;
}
.navigation__item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.navigation__item a:active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media only screen and (max-width: 500px) {
.navigation__items {
margin-top: 25px;
width: 100%;
}
}
<nav class="navigation">
<img src="./assets/images/logo/Reservia.svg" alt="Logo Reservia" />
<ul class="navigation__items">
<div class="tmp">
<li class="navigation__item">Hébergements</li>
<li class="navigation__item">Activités</li>
</div>
<li class="navigation__item subscribe">
S'inscrire
</li>
</ul>
</nav>
PS: the div with "tmp" class doesn't originally exist in the code, I added it just to indicate the idea I have in mind.

Answer 1

Pay attention to your html structure of the <ul> tag. Inside you put the <div> tag, separating the third <li> tag from the first two. This is not correct and it is not a valid html structure. It's a crutch.
In my example, I set up the list structure correctly. All three <li> tags are now children of the <ul> tag.
Now about the main thing.
The very principle of the transfer of the third <li> tag (subscribe class) is based on absolute positioning.
Wrapping the first two <li> tags is triggered at 767px width.
And yet, in my example, I did not use other types of display, such as grid, table, block, etc. Only flex is used.
Also, the underline on click is adjusted.
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.navigation img { /*for test*/
width: 100px;
}
.navigation__items {
display: flex;
justify-content: space-between;
padding: 0;
}
.navigation__item {
list-style: none;
}
.navigation__item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.navigation__item a:active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media (max-width: 500px) {
.navigation__items {
margin-top: 25px;
/*width: 100%;*/
}
}
#media (max-width: 767px) {
.navigation {
position: relative;
}
.navigation__items {
width: 100%;
}
.navigation__item a {
display: flex;
justify-content: center;
padding: 11px 0;
}
.navigation__item {
flex: auto;
text-align: center;
}
.navigation__item.subscribe {
position: absolute;
top: 0;
right: 0;
}
.navigation__item a:active {
border-top: unset;
border-bottom: 2px solid #0065fc;
}
}
<nav class="navigation">
<img src="https://i.ibb.co/LDTTHj3/2021-01-18-13-00-56.png" alt="Logo Reservia" />
<ul class="navigation__items">
<li class="navigation__item">Hébergements</li>
<li class="navigation__item">Activités</li>
<li class="navigation__item subscribe">S'inscrire</li>
</ul>
</nav>

Answer 2

So, this is the layout and how things could be grouped, right? (small-screen-first of course)
You can totally do this with grid as well - but here's how I'd do it with flex-box;
you can use flex's order
and A few margin: autos in there.
https://codepen.io/sheriffderek/pen/a16a64f1910cbd05116dd1a9ae37a372?editors=1100
/* reset included */
* {
box-sizing: border-box;
}
header {
/* probably has a column in it */
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.logo {
display: block;
}
.thing {
display: block;
margin-left: auto; /* trick */
}
.site-menu {
width: 100%;
display: flex;
flex-direction: row;
}
.link {
display: block;
flex-basis: 50%;
}
#media (min-width: 600px) {
header {
justify-content: flex-end;
}
.logo {
margin-right: auto; /* trick */
}
.thing {
order: 5;
margin-left: unset; /* override */
}
.site-menu {
width: auto;
}
}
header {
border: 4px solid dodgerblue;
}
.logo {
border: 4px solid orange;
padding: 10px;
}
.thing {
border: 4px solid yellow;
padding: 10px;
}
.site-menu {
border: 4px solid lime;
}
.link {
border: 4px solid #ff0066;
padding: 10px;
}
<header>
<a class='logo'>
SVG LOGO
</a>
<a class='thing'>
thing
</a>
<nav class='site-menu'>
<a class='link'>
link 1
</a>
<a class='link'>
link 2
</a>
</nav>
</header>

Answer 3

Possible Solution:
Change position and layout properties
In mobile, I've changed the parent navigation element's display and position property to block and relative.As a result, the banner and navigation__items element would not come under flexbox modal.
Now we want the temp element to take 100% width, for this, I've changed the flex property to 0 0 100%.
To show the 'subscribe' button on the top right corner, add its position property to absolute.
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.navigation__items {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
padding: 0;
}
.tmp {
display: flex;
flex-wrap: nowrap;
}
.tmp .navigation__item {
flex: 0 0 50%;
}
.navigation__item {
list-style: none;
}
.navigation__item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.navigation__item a:active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media screen and (max-width: 767.98px) {
.navigation {
display: block;
position: relative;
}
.tmp {
flex: 0 0 100%;
}
.subscribe {
position: absolute;
top: 0;
right: 0;
}
}
<nav class="navigation">
<img src="./assets/images/logo/Reservia.svg" alt="Logo Reservia" />
<ul class="navigation__items">
<div class="tmp">
<li class="navigation__item">Hébergements</li>
<li class="navigation__item">Activités</li>
</div>
<li class="navigation__item subscribe">
S'inscrire
</li>
</ul>
</nav>

Answer 4

Just add flex-direction: column-reverse; to .navigation__items class in media queries:
#media only screen and (max-width: 500px) {
.navigation__items {
flex-direction: column-reverse;
}
}
Codepen: https://codepen.io/manaskhandelwal1/pen/rNMqpoY?editors=1100

Answer 5

I recommend using CSS grid, it is easy, and you can specify, when content should wrap to next line...
nav {
display: grid;
grid-template-rows: auto;
/* aligning and more stuff... */
}
#media only screen and (max-width: 800px) {
nav {
grid-template-rows: auto auto;
}
}
More information about grids here: https://www.w3schools.com/css/css_grid.asp

Answer 6

I recommend using the position property. Try the code below
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
/* Add position to the parent element so the position of tmp class falls to this parent*/
position: relative;
}
/* ... code ... */
/*
Add this code in the media query. Giving .tmp a position property will pull it out of the flex box, meaning flex box won't have an effect on it
*/
.tmp {
/* Make this class position absolute Think of it as absolute to the navigation div */
position: absolute;
/* Position it -20px or something below the navigation div. You can play around with this. */
bottom: -20px
/* left from 50% of the navigation tag */
left: 50%;
/* Pull it back by 50% of its own size on x-axis to center it perfectly */
transform: translateX(-50%);
}
You need the transform property to center it, Otherwise it will be 50% off the screen. Hope this helps 🙂

Answer 7

Tell me this works pal ,
* {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.logo {
display: block;
}
.thing {
display: block;
margin-left: auto; /* trick */
}
.site-menu {
width: 100%;
display: flex;
flex-direction: row;
}
.link {
display: block;
flex-basis: 50%;
}
#media (min-width: 600px) {
header {
justify-content: flex-end;
}
.logo {
margin-right: auto; /* trick */
}
.thing {
order: 5;
margin-left: unset; /* override */
}
.site-menu {
width: auto;
}
}
.thing {
display: block;
margin-left: auto; /* trick */
}
.logo {
border: 4px solid orange;
padding: 10px;
}
.link {
padding: 10px;
text-align: center;
border-top: 4px solid transparent;
}
.link:active {
border-top: 4px solid #007cff;
padding: 10px;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<header>
<a class='logo' >
Fancy Text
</a>
<a class='thing' >
thing
</a>
<nav class='site-menu'>
<a class='link' >
link 1
</a>
<a class='link' >
link 2
</a>
</nav>
</header>

Answer 8

There are a few methods to answer your question, but first let me suggest something.
Please reformat your html
You have a div in your ul.
The div cuts the ul as 2 lis come within it while 1 is placed outside it. This is not valid HTML. Your elements should be positioned in a proper hierarchy.
Nevertheless here’s the code you need:
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.navigation img {
width: 100px;
}
.navigation-items {
display: flex;
justify-content: space-between;
padding: 0;
}
.navigation-item {
list-style: none;
}
.navigation-item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.navigation-item a:hover {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media (max-width: 600px) {
.navigation-items {
margin-top: 25px;
/*width: 100%;*/
}
}
#media (max-width: 700px) {
.navigation {
position: relative;
}
.navigation-items {
width: 100%;
}
.navigation-item a {
display: flex;
justify-content: center;
padding: 11px 0;
}
.navigation-item {
flex: auto;
text-align: center;
}
.navigation-item.subscribe {
position: absolute;
top: 0;
right: 0;
}
.navigation-item a:active {
border-top: unset;
border-bottom: 2px solid #0065fc;
}
}
<nav class="navigation">
<img src="https://i.ibb.co/LDTTHj3/2021-01-18-13-00-56.png" alt="Logo Reservia" />
<ul class="navigation-items">
<li class="navigation-item"><u>Hébergements</u></li>
<li class="navigation-item"><u>Activités</u></li>
<li class="navigation-item subscribe"><u>S'inscrire</u></li>
</ul>
</nav>

Answer 9

I have created a solution using flexbox as you wanted - HTML is also simplified - 'tmp' container no longer required.
.navigation {
display: flex;
align-items: center;
}
.navigation__items {
display: flex;
margin-left:auto;
}
.navigation__item {
list-style: none;
}
.navigation__item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.navigation__item a:active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media only screen and (max-width: 500px) {
.navigation {
flex-wrap:wrap;
}
.navigation__items {
margin-top: 25px;
width: 100%;
order:3;
}
.navigation__items li {
width:50%;
}
.navigation__items_alt {
margin-left:auto;
order:2;
}
}
<nav class="navigation">
<img src="./assets/images/logo/Reservia.svg" alt="Logo Reservia" />
<ul class="navigation__items">
<li class="navigation__item">Hébergements</li>
<li class="navigation__item">Activités</li>
</ul>
<ul class="navigation__items_alt">
<li class="navigation__item subscribe">
S'inscrire
</li>
</ul>
</nav>

Answer 10

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
}
a{
text-decoration: none;
color: #0065fc;
}
.header{
margin:auto;
width:90%;
display: flex;
height: 4rem;
justify-content: space-between;
}
.logo{
display: inline-flex;
vertical-align: middle;
font-size: 2rem;
}
.logo img{
padding:.25rem;
height: 4rem;
justify-content: center;
}
.nav{
display: inline-flex;
flex-direction: row-reverse;
}
ul{
display: inline-flex;
margin-right: 0;
list-style:none;
}
ul li a{
text-decoration: none;
display: inline-flex;
padding-left: 2.5rem;
padding-right: 2.5rem;
line-height:4rem ;
margin-right: 0;
border-top: 2px solid #0065fc;
}
#media only screen and (max-width: 800px) {
.nav2{
display: flex;
width: 100%;
position: absolute;
margin-top: 4rem;
justify-content:space-evenly;
}
.nav2 li a{
border-top: none;
border-bottom: 2px solid #0065fc;
}
}
<div class="header">
<div class="logo">
Reservia
</div>
<div class="nav">
<ul>
<li>S'inscrire</li>
</ul>
<ul class="nav2">
<li>Hébergements</li>
<li>Activités</li>
</ul>
</div>
</div>
Steps to think:
Breaking One Menu to Two Lists
Rearranging second list using media query.
I hope this helps. Only flex is used. No Grid

Answer 11

You can try code below. its all about structuring your html code and using flexbox.
Change or adjust css properties according to your code. I hope this helps you. Good luck.
/* `XHTML, HTML4, HTML5 Reset
-------------------------------*/
a,b,body,div,li,nav,ol,span,ul{border:0;margin:0;padding:0;font-size:100%}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{font-family:'Open Sans',sans-serif;font-size:15px;font-weight:400;height:100%;background-color:#f7f7f7;color:#212121}nav{display:block}ol,ul{list-style:none}li{display:list-item}a{color:inherit;text-decoration:none}button{font-family:'Open Sans',sans-serif;border:0;margin:0;padding:0;outline:0}
/*main css starts*/
.mainNav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.navItems {
display: flex;
width: 100%;
margin-top: 15px;
}
.navItems > li {
width: 50%;
text-align: center;
}
.mainNav .logo {
font-family: cursive;
font-size: 2.5em;
font-weight: bold;
color: #0065fc;
}
#media (min-width: 768px) {
.mainNav {
align-items: baseline;
}
.mainNav .subs {
order: 3;
padding: 5px 15px;
}
.mainNav .logo {
flex: 1;
}
.navItems {
width: auto;
}
.navItems > li {
width: auto;
padding: 5px 15px;
}
}
<nav class="mainNav">
<a class="logo" href="#">Reservia</a>
<a class="subs" href="#">S'inscrire</a>
<ul class="navItems">
<li>Hébergements</li>
<li>Activités</li>
</ul>
</nav>

Answer 12

Grid is often more powerful than flexbox for non-trivial layouts where it allows you to achieve the same result with less code and without redundant wrapper elements.
Your problem could be solved reasonably with flexbox, but why not challenge the assumption of the question and do it using grid, perhaps it will fit you better. Here is a super clean and simple grid solution:
I started with restructuring your HTML:
<nav>
<img alt="Logo Reservica"/>
<a>S'inscrire</a>
<ul>
<li><a>Hébergements</a></li>
<li><a>Activités</a></li>
</ul>
</nav>
Then I created a grid with 2 columns:
nav {
display: grid;
grid-template-columns: 1fr auto;
}
This puts the img and a into the 1. and 2. column of the 1. row, and the ul ends up in the 1. column of the 2. row. We stretch the ul over both columns and the core of the mobile layout is done:
ul {
grid-column: 1/3;
}
To make this work for desktop, we change the grid to have 3 columns. Then we move the ul to the 2. column of the 1. row. That's it!
#media (min-width: 600px) {
nav {
grid-template-columns: 1fr auto auto;
}
ul {
grid-row: 1;
grid-column: 2;
}
}
Here is a working example:
nav {
display: grid;
grid-template-columns: 1fr auto;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
grid-column: 1/3;
display: flex;
justify-content: space-evenly;
}
#media (min-width: 600px) {
nav {
grid-template-columns: 1fr auto auto;
}
ul {
grid-row: 1;
grid-column: 2;
}
li {
padding-right: 20px;
}
}
<nav>
<img alt="Logo Reservica"/>
<a>S'inscrire</a>
<ul>
<li><a>Hébergements</a></li>
<li><a>Activités</a></li>
</ul>
</nav>
I intentionally use bare HTML with minimal styling in the example to not distract you from the actual solution. If you want to understand grid better, MDN is a great resource: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Answer 13

.flex-container {
}
.flex-container-left > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
float:left;
}
.flex-container-right > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
float:right;
}
.flex-container-left .bottom{
float:right;
}
#media only screen and (max-width: 500px) {
.flex-container {
display: flex;
flex-direction: column;
width: 100%;
}
.flex-container-right{
width:100%;
}
}
<div class="flex-container">
<div class="flex-container-left">
<div>1</div>
<div class="bottom">4</div>
</div>
<div class="flex-container-right">
<div>3</div>
<div>2</div>
</div>
</div>
Here is the screenshot of Desktop view :
500px width screen size view :
.navigation {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.navigation img {
width: 100px;
}
.navigation__items {
display: flex;
justify-content: space-between;
padding: 0;
}
.navigation__item {
list-style: none;
}
.navigation__item a {
text-decoration: none;
color: inherit;
padding: 11px 40px;
}
.subscribe {
color: #0065fc;
font-weight: bold;
}
#media (max-width: 500px) {
.navigation__items {
margin-top: 25px;
/*width: 100%;*/
}
}
#media (max-width: 767px) {
.navigation {
position: relative;
}
.navigation__items {
width: 100%;
}
.navigation__item a {
display: flex;
justify-content: center;
padding: 11px 0;
}
.navigation__item {
flex: auto;
text-align: center;
}
.navigation__item.subscribe {
position: absolute;
top: 0;
right: 0;
}
.navigation__item .active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-bottom: 2px solid #0065fc;
}
}
#media(min-width: 768px){
.navigation__item .active {
text-decoration: none;
color: #0065fc;
font-weight: bold;
border-top: 2px solid #0065fc;
}
}
<nav class="navigation">
<img src="https://i.ibb.co/LDTTHj3/2021-01-18-13-00-56.png" alt="Logo Reservia" />
<ul class="navigation__items">
<li class="navigation__item"><a class="active" href="#">Hébergements</a></li>
<li class="navigation__item">Activités</li>
<li class="navigation__item subscribe">S'inscrire</li>
</ul>
</nav>
I would like to thank scooterlord
I had done the source code by his help. Here his answer on this post
I hope this source code would help you.
Desktop View :
Android View :