I am trying to achieve this (my Figma mockup):
Where as I keep getting this in my real coding (text is dummy):
This is my (S)CSS for the page:
.navbarcont {
margin-top: 2em;
display: flex;
background-color: hsl(206, 97%, 13%);
border-radius: 34px;
width: 80vw;
height: 3em;
margin-left: auto;
margin-right: auto;
.links {
display: flex;
justify-content: flex-start;
margin-left: 2em;
align-items: center;
}
ul {
display: inherit;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.langcont {
display: inherit;
justify-content: flex-end;
align-items: center;
}
}
And this is my React HTML:
<div className="navbarcont">
<div className="links">
<ul> {/*TODO: Remember to put icons before the a tags! (USE BOOTSTRAP ICONS!) */}
<li>
Hello
</li>
<li>
Hello
</li>
<li>
Hello
</li>
</ul>
</div>
<div className="langcont">
<div className="langtext">
<p>Language Select</p>
</div>
</div>
</div>
I really do not know where I am going wrong, or why I cannot use justify-content: flex-end; on the langcont class.
Thanks a lot for your help.
You need an additional justify-content in the navbarcontent-class
.navbarcont {
...
justify-content: space-between;
}
This will add space between the two divs and should display your elements like intended.
You have to use justify-content: space-between property on .navbarcont
.navbarcont {
display: flex;
justify-content: space-between;
...
}
Related
I'm learning how to utilize flex and just started running into issues for after the flexbox is completed...
#initial {
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
}
#initial .menu {
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
margin: 15px auto 15px auto;
width: 1100px;
border: 1px solid rgba(245, 245, 245, 0.699);
border-radius: 50px;
line-height: 2rem;
font-size: 1.1rem;
overflow: hidden;
}
#initial .menu .menuItem {
display: flex;
flex: 1;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-evenly;
}
#initial .menu .menuItem:hover {
background-color: #FDB000;
color: black;
cursor: pointer;
display: flex;
flex: 1;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-evenly;
}
<div id="initial">
<div class="menu">
<div id="initialMenuHeader" class="menuItem" onclick="menuCollapsable(this)">Δ</div>
<div id="initialMenuHVQ" class="menuItem" onclick="initialHVQ()">Hivecoin</div>
<div id="initialMenuRVN" class="menuItem" onclick="initialRVN()">Ravencoin</div>
<div id="initialMenuAVN" class="menuItem" onclick="initialAVN()">Avian</div>
</div>
<div class="body">
<h1>NAME OF POOL GOES HERE</h1>
<p class="intro">¡Intro crap will go here!</p>
</div>
</div>
As it stands, my .menu looks like this. Please note that the image is uncensored and includes expletives
Everything I could find online suggests that when the flex-box is completed, it should go back to the normal flow (e.g. not floating).
Please let me know what I'm doing wrong and/or missing.
JSFiddle of my code (added some things that I didn't include above like body for background-color and color
Since you make #initial as flex, and by default flex-direction set to row your menu align with with your body. If your want menu & body in 2 lines add below css:
#initial{
flex-direction: column;
}
Here is how it looks like: https://gyazo.com/77de215669cf2d9cd3ca35a0e064c7bf
I'm not sure why the last box isn't in the center. This is my css code:
.recipe1{
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.recipe2{
border-radius: 10px;
box-shadow: 0px 5px 20px rgb(71,71,71);
margin: 20px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
background: white;
align-items: center;
min-width: 50%;
}
HTML:
<div className="recipe1">
<div className="recipe2">
<h1 className="display-4 p-3">{title}</h1>
<ul> {/*Ingredients is an array of objects, so need to iterate through it with map to display*/}
{ingredients.map(ingredient => (
<li className="lead">{ingredient.text}</li>
))}
</ul>
<p>Calories: {Math.floor(calories)}g</p>
<img className={style.image} src={image} alt="Cannot display :("></img>
</div>
</div>
I'm using react and bootstrap so there's some other stuff in there that looks different.
I'm trying to tidy up my code and I have a menu that I would like to organise a little better.
Is there a way of aligning the menu at the start, end or or center while having the last item in the menu aligned to the end?
I've currently stripped out everything and kept the basics. If I remove margin-top: auto from the last div, all items are aligned in the center as stated in the .menu css.
If I keep margin-top: auto from the last div, the last div is aligned where I want it but the other items are aligned at the top and not where it's supposed to.
Here's my code:
HTML
<div class="header">
<div class="one">one</div>
<div class="two">two</div>
</div>
<div class="menu">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
CSS
.header{
height:70px;
background: red;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.header .one {
background: blue;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
.header .two {
background: green;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
.menu {
width:70px;
height: 100vh;
background: blue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.three {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.menu div:last-of-type {
margin-top: auto;
}
Here it is in action: Fiddle
Add the following and this will work. You may want to add a padding to match your header, in this case 70px.
.menu {
padding-top: 70px;
}
.menu div {
margin-top: auto;
margin-bottom: auto;
}
.menu div:last-of-type {
margin-top: auto;
margin-bottom: 0;
}
I have created a sub-container, containing two items which I would like to display as flex-direction: row with justify-content: space-between. I can't seem to get it to work.
HTML:
<body>
<div class="container">
<div class="randqg">
<div class="title">Random Quote Generator</div>
<div class="subcontainer">
<i class="fa fa-quote-left fa-3x" aria-hidden="true"></i>
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
</div>
<blockquote id="text">Original Text</blockquote>
<div class="subcontainer">
<span id="author">author</span>
<i class="fa fa-quote-left" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
<script src="https://use.fontawesome.com/02b956c77d.js"></script>
CSS:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: blue;
}
.randqg {
display: flex;
align-items: center;
min-height: 24em;
justify-content: center;
flex-direction: column;
width: 500px;
height: 50%;
border: 5px solid red;
}
.title {
}
.subcontainer{
width: 80%;
height: 80%;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: auto;
}
JS Fiddle: https://jsfiddle.net/3qx8aw44/
I have checked with dev tools that justify-content is applied to the sub-container, so I don't think it a typo error.
I thought it might be an issue of there not being enough free space to distribute between the items. So changed width to be less than 100%.
I checked
It's because you are using display block, you can't use display block, and give flex property like justify-content in the same div, you need to use display flex:
.subcontainer{
width: 80%;
height: 80%;
flex-direction: column;
justify-content: space-between;
align-items: center;
display: flex; /* added */
}
I want to center a div with flex boxes, but don't want it to collapse.
#forum {
display: flex;
flex-direction: column;
align-items: center;
}
.forum__layout__container {
display: flex;
flex-direction: column;
max-width: 960px;
margin-top: 30px;
}
here the HTML ...
<div id="forum">
<div class="forum__layout__container">
...
</div>
</div>
The problem: forum__layout__container collapses. I want it to fill the screen.
Thanks.
EDIT:
Thanks for your attempts, but my problem is my max-width ... It makes my container collapse, which I don't desire !
To use the whole screen for a column, you need to specify the height. When then using justify-content, the flexbox will automatically spread the content.
#forum {
display: flex;
flex-direction: column;
align-items: center;
}
.forum__layout__container {
display: flex;
flex-direction: column;
max-width: 960px;
margin-top: 30px;
height: 100vh;
justify-content: space-around;
}
p {
margin: 0;
}
<div id="forum">
<div class="forum__layout__container">
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
</div>