I'm having trouble aligning two elements in a flex box:
What I want to happen is to have the "help" div to the very right then just left of that the "XX" div. I'm new to flex containers usually floating one elements right after the other would give the desired affect. Does anyone know how I can achieve this?
<html>
<head>
<style>
body {
margin:0;
padding:0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position:relative;
border-style: solid;
border-width: 1px;
height:36px;
padding:0;
margin:0;
background-color:black;
}
#menuContainer {
position:relative;
background-color:grey;
border-style: solid;
border-width: 1px;
padding:0;
width:96%;
height:98%;
margin: 0 auto;
display: flex;
}
#hh {
position:relative;
display:flex;
align-self: center;
font-size:14px;
width:80px;
border-style: solid;
border-width: 1px;
height:50%;
margin-left:auto;
}
#pp {
position:relative;
display:flex;
height:70%;
width:36px;
align-self: center;
justify-content: center;
margin-left: auto;
background-color:white;
border-style: solid;
border-width: 1px;
padding:0;
}
</style>
</head>
<body>
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp"> XX</div>
</div>
</body>
</html>
JUSTIFY CONTENT
You are looking for the property value flex-end used in justify-content. Also remove the margin-left: auto; as it is not needed.
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position: relative;
border-style: solid;
border-width: 1px;
height: 36px;
padding: 0;
margin: 0;
background-color: black;
}
#menuContainer {
position: relative;
background-color: grey;
border-style: solid;
border-width: 1px;
padding: 0;
width: 96%;
height: 98%;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
#hh {
position: relative;
display: flex;
align-self: center;
font-size: 14px;
width: 80px;
border-style: solid;
border-width: 1px;
height: 50%;
}
#pp {
position: relative;
display: flex;
height: 70%;
width: 36px;
align-self: center;
justify-content: center;
background-color: white;
border-style: solid;
border-width: 1px;
padding: 0;
}
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp">XX</div>
</div>
ORDER
To change the ordering like you ask in the comments, you will use the property order. It's pretty straight forward. The order default value of flex-items is 0. You can either use negative or positive values, such as -1, -2, 1, 2 etc.
You can either set this property in your first or second item, with different values depending which you prefer to change, they will both get the same result.
Declaring it in your first item using a positive value:
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position: relative;
border-style: solid;
border-width: 1px;
height: 36px;
padding: 0;
margin: 0;
background-color: black;
}
#menuContainer {
position: relative;
background-color: grey;
border-style: solid;
border-width: 1px;
padding: 0;
width: 96%;
height: 98%;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
#hh {
position: relative;
display: flex;
align-self: center;
font-size: 14px;
width: 80px;
border-style: solid;
border-width: 1px;
height: 50%;
order: 1;
}
#pp {
position: relative;
display: flex;
height: 70%;
width: 36px;
align-self: center;
justify-content: center;
background-color: white;
border-style: solid;
border-width: 1px;
padding: 0;
}
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp">XX</div>
</div>
Declaring it in the second one using a negative value:
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position: relative;
border-style: solid;
border-width: 1px;
height: 36px;
padding: 0;
margin: 0;
background-color: black;
}
#menuContainer {
position: relative;
background-color: grey;
border-style: solid;
border-width: 1px;
padding: 0;
width: 96%;
height: 98%;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
#hh {
position: relative;
display: flex;
align-self: center;
font-size: 14px;
width: 80px;
border-style: solid;
border-width: 1px;
height: 50%;
}
#pp {
position: relative;
display: flex;
height: 70%;
width: 36px;
align-self: center;
justify-content: center;
background-color: white;
border-style: solid;
border-width: 1px;
padding: 0;
order: -1;
}
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp">XX</div>
</div>
Simple order change interaction:
Note: Clicking the anchor element will change every odd flex item's order to -1.
body {
margin: 0;
}
a {
font-size: 2em;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -30%);
background-color: white;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-around;
/* Default Value */
}
.flex-item {
counter-increment: flex-items;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
.flex-container:target .flex-item:nth-child(odd) {
order: -1;
}
Change Order
<section id="flex-container" class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
FURTHER EXPLANATION:
justify-content property accepts 5 different values:
flex-start, which is the default.
flex-end
center
space-between
space-around
flex-start
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: flex-start; /* Default Value */
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
flex-end
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: flex-end;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
center
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: center;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
space-between
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-between;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
space-around
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-around;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
SUMMARY:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
background-color: peachpuff;
display: flex;
height: calc(20vh - .5em);
justify-content: flex-start;
margin-bottom: .5em;
position: relative;
}
.flex-container:nth-child(2) {
justify-content: flex-end;
}
.flex-container:nth-child(3) {
justify-content: center;
}
.flex-container:nth-child(4) {
justify-content: space-around;
}
.flex-container:nth-child(5) {
justify-content: space-between;
}
.flex-container::after {
position: absolute;
display: flex;
content: attr(data-justify-content);
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
font-size: 3em;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 20%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
color: rgba(0, 0, 0, .3);
}
<section class="flex-container" data-justify-content="flex-start">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="flex-end">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="center">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="space-around">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="space-between">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
MORE INFO:
You can find more info in these resources:
Codrops
CSS Tricks
Flexbox Cheatsheet
Stack Overflow Michael_B's Flexbox Post
Playground:
Flexbox Froggy
Related
The purple Navbar at the top of the page pushes the container "container2" off screen. Is there any possible way I can make it so the "container2" div does not overflow with the proper padding of 5px at the bottom?
#import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
/*QuickReset*/ * { box-sizing: border-box; margin: 0; }
html {
height: 100%;
width: 100%
}
body {
background: black;
height: 100%;
position: relative;
overflow: hidden;
}
.navbar {
background: purple;
padding: 1em;
width: 100%;
position: relative;
top: 0;
}
.navbar .logo {
text-decoration: none;
font-family: 'Gugi', cursive;
font-weight: bold;
font-size: 1.5em;
color: white;
}
.navbar .container {
display: grid;
grid-template-columns: 100px auto;
justify-content: unset;
}
.navbar nav {
display: flex;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
}
.container2 {
display: flex;
width: 100%;
height: 100%;
position: relative;
gap: 5px;
padding: 5px;
}
.one,
.two {
border: 3px solid green;
border-radius: 5px;
}
.one { width: 10%; background: red; }
.two { width: 90%; background: blue; }
<div class="navbar">
<div class="container">
<a class="logo" href="#">Logo</a>
</div>
</div>
<div class="container2">
<div class="one">
</div>
<div class="two">
</div>
</div>
Resulting Page
I am new to HTML and CSS so any helps greatly appreciated.
Stack overflow wants more content besides code but im not too sure what else to add.
Remove overflow: hidden from body:
#import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
/*QuickReset*/
* {
box-sizing: border-box;
margin: 0;
}
html {
height: 100%;
width: 100%
}
body {
background: black;
height: 100%;
position: relative;
/*overflow: hidden;*/
}
.navbar {
background: purple;
padding: 1em;
width: 100%;
position: relative;
top: 0;
}
.navbar .logo {
text-decoration: none;
font-family: 'Gugi', cursive;
font-weight: bold;
font-size: 1.5em;
color: white;
}
.navbar .container {
display: grid;
grid-template-columns: 100px auto;
justify-content: unset;
}
.navbar nav {
display: flex;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
}
.container2 {
display: flex;
width: 100%;
height: 100%;
position: relative;
gap: 5px;
padding: 5px;
}
.one,
.two {
border: 3px solid green;
border-radius: 5px;
}
.one {
width: 10%;
background: red;
}
.two {
width: 90%;
background: blue;
}
<div class="navbar">
<div class="container">
<a class="logo" href="#">Logo</a>
</div>
</div>
<div class="container2">
<div class="one">
</div>
<div class="two">
</div>
</div>
#import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
/*QuickReset*/ * { box-sizing: border-box; margin: 0; }
body {
background: black;
height: 100vh;
position: relative;
overflow: hidden;
}
.navbar {
background: purple;
padding: 1em;
width: 100%;
position: relative;
top: 0;
height: 20%;
}
.navbar .logo {
text-decoration: none;
font-family: 'Gugi', cursive;
font-weight: bold;
font-size: 1.5em;
color: white;
}
.navbar .container {
display: grid;
grid-template-columns: 100px auto;
justify-content: unset;
}
.navbar nav {
display: flex;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
}
.container2 {
display: flex;
width: 100%;
height: 80%;
position: relative;
gap: 5px;
padding: 5px;
}
.one,
.two {
border: 3px solid green;
border-radius: 5px;
}
.one { width: 10%; background: red; }
.two { width: 90%; background: blue; }
<div class="navbar">
<div class="container">
<a class="logo" href="#">Logo</a>
</div>
</div>
<div class="container2">
<div class="one">
</div>
<div class="two">
</div>
</div>
you should divide the height of navbar and container 2
Quick question. Does transition work if I hover over a child to target another child, or one separate div with another separate div?
I can only get transition to work if I put the children in a container and hover over the parent. What are the rules to this?
Example 1 (Doesn't work):
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
.underline {
width: 0px;
height: 2px;
background-color: black;
transition: 0.4s;
}
h2:hover .underline {
width: 165px;
}
<body>
<h2>Hover Over Me</h2>
<div class="underline"></div>
</body>
Example 2 (Doesn't work)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
}
.underline {
width: 0px;
height: 2px;
background-color: black;
transition: 0.4s;
}
h2:hover .underline {
width: 165px;
}
<body>
<div class="container">
<h2>Hover Over Me</h2>
<div class="underline"></div>
</div>
</body>
Example 3 (Works)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
}
.underline {
width: 0px;
height: 2px;
background-color: black;
transition: 0.4s;
}
.container:hover .underline {
width: 165px;
}
<body>
<div class="container">
<h2>Hover Over Me</h2>
<div class="underline"></div>
</div>
</body>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180px;
height: 50px;
}
.underline {
width: 0px;
height: 2px;
background-color: black;
transition:0.4s;
}
h2:hover + .underline {
width: 165px;
}
<body>
<div class="container">
<h2>Hover Over Me</h2>
<div class="underline"></div>
</div>
</body>
You can check This for css selectors
I have this setup https://codepen.io/saraLance/pen/LYGevXW and I have a couple of problems.
the header covers more than the parent width.
Scroll works weird, it seems to stop after the button play, and then I have to scroll again.
I have tried to fix the scroll problem making the header fixed position: fixed; width: 100% but the header covers more than the parent div.
I also have no idea why screen height it's not the same that it's parent screens.
Ideally sit-container should be after header and header should be fixed.
div {
width: auto;
}
.screens {
background: green;
height: 100vh;
display: flex;
overflow-x: hidden;
overflow-y: auto;
}
.screen {
background: red;
}
.header {
border: solid 1px black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
padding: 12px;
background: white;
}
.sit-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1rem;
overflow: auto;
}
.strip {
width: 100vw;
}
.view {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
min-height: 300px;
min-width: 300px;
animation-delay: 0.2s;
overflow-y: scroll;
flex-direction: column;
}
.view-1 {
height: 300px;
width: 300px;
flex: 0 0 auto;
margin: 0 auto;
margin-top: 1rem;
border: solid 1px black;
}
.button-section {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 1rem;
width: 100%;
}
.play-button {
height: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
color: black;
border: 1px solid black;
text-decoration: none;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
font-style: normal;
font-weight: normal;
text-align: center;
text-transform: uppercase;
margin: 1rem;
}
.quit-button {
color: black;
text-decoration: none;
font-size: 1.2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<div class="screens">
<div class="screen">
<div class="header">
<div class="div-1">Div-1</div>
<div class="div-1">Div-2</div>
</div>
<div class="sit-container">
<div class="strip">
<div class="view">
<div class="view-1">View-1</div>
<div class="view-1">View-2</div>
<div class="view-1">View-3</div>
<div class="view-1">View-4</div>
</div>
</div>
<div class="button-section">
<a class="play-button">Play</a>
<a class="quit-button">Quit</a>
</div>
</div>
</div>
</div>
</body>
</html>
screens class should be width: auto and overflow-x:hidden should be on button-section
See output in full screen
div {
width: auto;
}
#media (min-width: 768px) {
width:35%;
margin:auto;
}
.screens {
background: green;
height:"auto";
display: flex;
}
.screen {
background: red;
}
.header {
border: solid 1px black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
padding: 12px;
background: white;
}
.sit-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1rem;
overflow: auto;
}
.strip {
width: 100vw;
#media (min-width: 768px) {
width: 35vw;
}
}
.view {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
min-height: 300px;
min-width: 300px;
animation-delay: 0.2s;
overflow-y: scroll;
flex-direction: column;
}
.view-1{
height: 300px;
width: 300px;
flex: 0 0 auto;
margin: 0 auto;
margin-top: 1rem;
border: solid 1px black;
}
.button-section{
display: flex;
flex-direction: column;
text-align: center;
margin-top: 1rem;
width: 100%;
overflow-x:hidden;
}
.play-button {
height: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
color: black;
border: 1px solid black;
text-decoration: none;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
font-style: normal;
font-weight: normal;
text-align: center;
text-transform: uppercase;
margin: 1rem;
}
.quit-button {
color: black;
text-decoration: none;
font-size: 1.2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid black;
}
<div class="screens">
<div class="screen">
<div class="header">
<div class="div-1">Div-1</div>
<div class="div-1">Div-2</div>
</div>
<div class="sit-container">
<div class="strip">
<div class="view">
<div class="view-1">View-1</div>
<div class="view-1">View-2</div>
<div class="view-1">View-3</div>
<div class="view-1">View-4</div>
</div>
</div>
<div class="button-section">
<a class="play-button">Play</a>
<a class="quit-button">Quit</a>
</div>
</div>
</div>
</div>
With the code below I created a mobile menu button .container inside my .navigation. All this works fine so far.
However, I want that the .bars inside the mobile menu button to be vertically centered. I tried to go with vertical-align: center; but could not make it work.
What do I have to change in my code so the .bars in the mobile menu button .container get vertically centered?
You can also find my code here
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
vertical-align: center;
}
.bar1, .bar2, .bar3 {
height: 10%;
width: 100%;
background-color: #333;
margin-top: 8%;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>
Because you are already using flexbox, add the following styles to bars:
display: flex;
justify-content: center;
flex-direction: column;
and add margin: 4% 0 for the bar1,bar2 and bar3
See demo below:
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.bar1,
.bar2,
.bar3 {
height: 10%;
width: 100%;
background-color: #333;
margin: 4% 0;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>
The easiest way would be to use display: flex; on .bars; Then flex-direction: column; and justify-content: center;
.bars {
height: 100%;
width: 100%;
/* new stuff here: */
display: flex;
flex-direction: column;
justify-content: center;
}
This will work, but the bars won't look quite right because .bar1 has a margin-top of 8%. If you only apply margin-top to .bar2 and .bar3 then it will look right.
.bar2, .bar3 {
margin-top: 8%;
}
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
/* new stuff here: */
display: flex;
flex-direction: column;
justify-content: center;
}
.bar1, .bar2, .bar3 {
height: 10%;
width: 100%;
background-color: #333;
}
.bar2, .bar3 {
margin-top: 8%;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>
You can use display:flex
.bars {
display: flex;
align-items: center;
flex-wrap: wrap;
}
I've got a header menu which I'm trying to make responsive using CSS flex.
The flex functionality works fine, but the height of the items are always huge for some reason.
The code I'm using is below (the borders are just there to show the elements heights).
The height of the title <div> should shrink to match that of the <p> element. Anybody know how to do this?
#header {
background: #526272;
width: 100%;
max-width: 100vw;
height:auto;
position: fixed;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
align-items: center;
color:white;
}
html {
margin: 0;
font-family: 'Raleway', sans-serif;
}
body {
margin: 0;
}
#title {
text-align: center;
padding: 1em;
vertical-align: middle;
font-family: 'Oswald', sans-serif;
font-size: 2em;
border-right: solid red;
width: auto;
height: auto;
}
p {
border-right: solid blue;
}
#menuBar {
height: 100%;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
#social {
height: auto;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
<body>
<div id="header">
<div id="title"><p>EXAMPLE SITE NAME</p></div>
<div id="menuBar"><p>Menu</p>
</div>
<div id="social"><p>Socials</p></div>
</div>
</body>
You have padding: 1em on the div.title container. That creates a lot of space on all four sides.
Try this instead:
.title { padding: 0 1em; } /* padding only on the left and right */
Also, p elements come with default margins set by the browser. Make this adjustment:
p { margin: 0; }
#header {
background: #526272;
width: 100%;
max-width: 100vw;
height: auto;
position: fixed;
text-align: center;
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: center;
color: white;
}
html {
margin: 0;
font-family: 'Raleway', sans-serif;
}
body {
margin: 0;
}
#title {
text-align: center;
padding: 0 1em; /* adjusted */
vertical-align: middle;
font-family: 'Oswald', sans-serif;
font-size: 2em;
border-right: solid red;
width: auto;
height: auto;
}
p {
margin: 0; /* new */
border-right: solid blue;
}
#menuBar {
height: 100%;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
#social {
height: auto;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
<div id="header">
<div id="title">
<p>EXAMPLE SITE NAME</p>
</div>
<div id="menuBar">
<p>Menu</p>
</div>
<div id="social">
<p>Socials</p>
</div>
</div>