MarMan29 MarMan29 - 2 months ago 24
CSS Question

right align two flex containers

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>

Answer

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>


You can find more info in these resources:

Codrops

CSS Tricks

Flexbox Cheatsheet


Playground:

Flexbox Froggy

Comments