What is the best way to move the about and contact links to the right side of the navigation section?
I have tried using align-items: flex-end, however, for some reason it doesn't work.
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5px;
margin-bottom: 25px;
}
/* Navigation */
.navigation-container {
position: fixed;
top: 0;
}
.navigation-items {
display: flex;
justify-content: center;
}
.footer-items {
display: flex;
justify-content: center;
}
<!-- Container -->
<div class="container">
<!-- Navigation -->
<div class="navigation-container">
<span class="background"></span>
<!-- Results Nav-->
<span class="navigation-items" id="resultsNav">
<h3>About</h3>
<h3> • </h3>
<h3>Contact</h3>
</span>
</div>
</div>
Created a little jsfiddle for you:
https://jsfiddle.net/wrayvon/akzfuvq8/4/
Using this styling:
.container { position: relative; display: flex; margin-top: 5px; margin-bottom: 25px;}
.navigation-container { width: 100%;}
.navigation-items { display: flex; justify-content: flex-end;}
That solves it :)
I found 2 solutions:
Because you are already using position: fixed; you could just add right: 0; to your .navigation-container to make it align to the right.
.navigation-container {
position: fixed;
top: 0;
right: 0;
}
Or you can make your navigation-container element 100% wide. Then you can add some flex styles to it like this, to make the children align to the right.
.navigation-container {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: flex-end;
}
When you are using flex-direction:column then justify-content = vertical alignment and align-items = horizontal alignment.
As you can see in this example of your snippet. Align-items works as expected.
If you where adding align-items to a child of .container then you will not notice the change in alignment as the width of the child e.g .navigation-container needs to be (flex:1) to fill the width of its parent.
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5px;
margin-bottom: 25px;
align-items: flex-end;
}
/* Navigation */
.navigation-container {
position: fixed;
top: 0;
}
.navigation-items {
display: flex;
justify-content: center;
}
<!-- Container -->
<div class="container">
<!-- Navigation -->
<div class="navigation-container">
<span class="background"></span>
<!-- Results Nav-->
<span class="navigation-items" id="resultsNav">
<h3>About</h3>
<h3> • </h3>
<h3>Contact</h3>
</span>
</div>
</div>
To assign end of the div parent should have 100% width. Just add the below CSS then it should work:
.navigation-container{
width:100%;
}
.navigation-items{
justify-content: flex-end;
}
Just simply add align-items: flex-end; to the flex container.
.container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 5px;
margin-bottom: 25px;
align-items: flex-end;
}
/* Navigation */
.navigation-container {
position: fixed;
top: 0;
}
.navigation-items {
display: flex;
justify-content: center;
}
.footer-items {
display: flex;
justify-content: center;
}
<!-- Container -->
<div class="container">
<!-- Navigation -->
<div class="navigation-container">
<span class="background"></span>
<!-- Results Nav-->
<span class="navigation-items" id="resultsNav">
<h3>About</h3>
<h3> • </h3>
<h3>Contact</h3>
</span>
</div>
</div>
Related
After googling for hours, I am still stuck at this problem. Since I used flex-direction:column, to align the child divs hence, I used justify-content:center but the child divs look aligned to the left.
<div class=container>
<div class= "wrapper">
<div class = "image-float">
<img class = "profile-picture" src = "{% static 'images/image.jpg'%}">
</div>
<div>
<p>Welcome to Sparison...</p>
</div>
<div class="intro">
<h1>Copy code below and share with friends</h1>
</div>
<div class="url-container input-group">
<input type="text" id="random" class="url input-border form-control" value="">
<div class="input-group-append">
<span class="input-border input-group-append input-group-text">
<i class="far fa-copy url-copy-icon"></i></span>
</div>
</div>
</div>
</div>
The relevant CSS is below:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Montserrat;
font-size: 50px;
font-weight: bold;
background-color: var(--very-pale-blue);
width:100%;
height:100vh;
}
.container{
max-width: 100%;
height: 90vh;
margin-top: 0;
}
.wrapper{
display: flex;
flex-wrap: wrap;
max-width: 100%;
height: 90vh;
justify-content: center;
flex-direction: column;
}
.url-container .input-group {
border-radius: 10px;
width: 50%;
}
.input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 50%;
/* background-color: #1DB954; */
border-radius: 2px;
}
Above is how the page renders. every element under the wrapper div should be in the middle of the page centered vertically.
You can find more information about flex here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
.wrapper{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: 100%;
height: 90vh;
}
Link to jsfiddle:
https://jsfiddle.net/y4qra692/
Change the container width
.container {
width: 100%;
}
Then for the wrapper as you have changed the flex-direction to column you now need align-items rather than justify-content as (confusingly) when you change the direction these properties swap around:
.wrapper {
width: 100%;
display: flex;
align-items: center;
}
To make div centered you can add this code to .wrapper
.wrapper{
width: 50%;
margin:auto;
}
To make a div centered:
<section class="middle">
<div class="div">
<p>Hi</p>
</div>
</section>
Style.css
.middle {
height: 100vh; /* or height you want */
width: 100%;
position: relative;
}
.div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
i have one div class card which has a footer:
<div className='card'>
<img src={thumb2} />
<footer>
<p>Beautifull and cozy house for you and familly</p>
<span>$: 1200,00/month</span>
</footer>
</div>
and this footer of the div class card has the style:
.card footer {
background-color: #D6E4E3;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
When I use the same tag footer for the bottom of my page the style of this new tag affects the style of my tag footer who is inside of my div card. What can I do for that not to happen? How can I use a lot of tags footer and the style of each other do not overwrite?
footer {
height: 5%;
display: flex;
justify-content: center;
background-image: linear-gradient(#5665e7, #7083E5);
}
By using classes you now avoided that the styling of the bottom-page footer will affect the card-footer.
.card--footer {
background-color: #D6E4E3;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
.page--footer {
height: 5%;
display: flex;
justify-content: center;
background-image: linear-gradient(#5665e7, #7083E5);
}
<div className='card'>
<img src={thumb2} />
<footer class="card--foter">
<p>Beautifull and cozy house for you and familly</p>
<span>$: 1200,00/month</span>
</footer>
</div>
<footer class="page--footer"></footer>
You also got easy reusable styling using this approach.
div footer {
background-color: #D6E4E3;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
div footer {
background-color: #D6E4E3;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
padding: 0;
}
.card footer {
background-color: #D6E4E3;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
<div class='card'>
<img src={thumb2} />
<footer>
<p>Beautifull and cozy house for you and familly</p>
<span>$: 1200,00/month</span>
</footer>
</div>
</body>
</html>
use class instead off className
I am trying to create a scrollable file tree. Minimal code can be found below.
https://jsfiddle.net/3kLmchot/1/
Problem is when I try to add overflow-y: scroll;, to the filebrowse-outer div, the first few items are not visible at all. This problem gets worse when I add more divs.
It seems like items are added about the center of the filebrowse-outer div, so the items that are added at the bottom can be found via scrolling, but the items that are added at the top are invisible. (see the visual aid below)
item 1
item 2
center of the div
item 3
item 4
Scroll bar forms at around item 2, which makes item 1 invisible. Does anyone know why this is happening, and potential solutions?
I got it to work with the following styles, specifically removing justify-content: center; from your .flex-container that is being used by multiple divs and only applying it to the one that is for .flex-container.filebrowse-inner
.side-bar {
position: fixed;
width: 20%;
height: 200px;
display: flex;
flex-direction: column;
}
.flex-container {
display: flex;
/* justify-content: center; <-- THIS LINE IS CAUSING THE ISSUE */
align-items: center;
}
.flex-container.filebrowse-outer {
flex-direction: column;
border: 1px solid #f00;
overflow-y: scroll;
align-items: stretch;
}
.flex-container.filebrowse-inner {
flex-direction: row;
justify-content: center;
width: 100%;
padding-bottom: 15px;
text-align: left;
position: relative;
}
/* .display-container {
width: 70%;
overflow: auto;
} */
I think that you meant to have scroll bar in the external div with class 'side-bar', if yes:
.side-bar {
position: fixed;
width: 20%;
height: 200px;
display: flex;
flex-direction: column;
overflow-y:scroll;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-container.filebrowse-outer {
flex-direction: column;
border: solid;
min-height: max-content; /* For safari*/
/* overflow-y: scroll; */
align-items: stretch;
}
.flex-container.filebrowse-inner {
flex-direction: row;
width: 100%;
min-height: max-content; /* For safari*/
padding-bottom: 15px;
text-align: left;
position: relative;
}
.display-container {
width: 70%;
overflow: auto;
}
<div class="side-bar">
<div class="flex-container filebrowse-outer">
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 1!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 2!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 3!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 4!</p>
</div>
</div>
</div>
</div>
You can then move the border to 'side-bar' class.
I'm trying to put one link to each corner (left, top, right, bottom) using Flexbox
I tried top: 0 or setting flex-direction to column
.container {
position: relative;
}
.top {
display: flex;
justify-content: space-between;
}
.bottom {
display: flex;
justify-content: space-between;
flex-direction: row;
}
<div class="container">
<div class="top">
ONE
TWO
</div>
<div class="bottom">
THREE
FOUR
</div>
</div>
I expect to get one link to each corner like this screenshot:
but I got this instead
Clean and simple flexbox solution (no hacks or absolute positioning):
.container {
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* horizontal spacing */
align-content: space-between; /* vertical spacing */
}
.top, .bottom {
flex-basis: 100%; /* to force .bottom to wrap */
display: flex;
justify-content: space-between;
}
a {
background-color: orange;
}
body {
margin: 0;
background-color: lightgray;
}
<div class="container">
<div class="top">
ONE
TWO
</div>
<div class="bottom">
THREE
FOUR
</div>
</div>
For something like this, position: absolute; might be better.
.container { position: relative; }
.top-left { position: absolute; top: 0; left: 0 }
.top-right { position: absolute; top: 0; right: 0 }
.bottom-left { position: absolute; bottom: 0; left: 0 }
.bottom-right { position: absolute; bottom: 0; right: 0 }
it's because of the height on your bottom and top divs it will only occupy min-content height as default also the same for the wrapper container
this is one way how you can fix it using only flexbox :
.container {
height: 95vh;
display: flex;
flex-direction : column;
justify-content: space-between;
}
.top {
display: flex;
justify-content: space-between;
}
.bottom {
display: flex;
justify-content: space-between;
flex-direction: row;
}
<div class="container">
<div class="top">
ONE
TWO
</div>
<div class="bottom">
THREE
FOUR
</div>
</div>
You don't need to use .top & .bottom for flexbox. Flexbox can handle with less HTML code.
<style>
.container {
position: relative;
display: flex;
flex-flow: row wrap;
height: 100%;
}
.container a {
flex: 1 1 50%;
}
.container a:nth-child(2n) {
text-align: right;
}
.container a:nth-child(3),
.container a:nth-child(4) {
align-self: flex-end;
}
<div class="container">
ONE
TWO
THREE
FOUR
</div>
I created a header bar and want to place 3 items there. The first should be aligned on the left side, the second in the middle of the header and the third on the right side.
I went for this
body{
background: #eeeeee;
}
#header {
background: #ffffff;
height: 53px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.headerEle {
}
<div id="header">
<img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
<a class="headerEle" href="https://www.google.de/">Google</a>
<button class="headerEle">Logout</button>
</div>
but when using justify-content: space-between; the items don't get centered correctly. The image takes a bigger place than the small button on the right.
So the link in the middle is not centered correctly, it overlaps the right side. I want the link being in the horizontal center of the page.
You can do something like this:
body {
background: #eee;
}
#header {
background: #fff;
height: 53px;
display: flex;
/*flex-direction: row; not necessary, by default*/
align-items: center;
justify-content: space-between;
}
#header > span {flex: 1} /* each 33.33% of the parent's width */
img {display: block; max-width: 100%; max-height: 100vh} /* responsiveness; "display: block" removes bottom margin/whitespace */
.link {
display: flex;
justify-content: center; /* horizontally centered */
}
.btn {
display: flex;
justify-content: flex-end; /* placed far right */
}
<div id="header">
<span>
<img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
</span>
<span class="link">
<a class="headerEle" href="https://www.google.de/">Google</a>
</span>
<span class="btn">
<button class="headerEle">Logout</button>
</span>
</div>
You can use absolute positioning for the <a> element to exactly center the link on the header:
body{
background: #eeeeee;
}
#header {
background: #ffffff;
height: 53px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position:relative;
}
#header a {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
<div id="header">
<img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
<a class="headerEle" href="https://www.google.de/">Google</a>
<button class="headerEle">Logout</button>
</div>
Is this what you are looking to do?
body{
background: #eeeeee;
}
#header {
background: #ffffff;
height: 53px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
#header > div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
text-align: center;
}
<div id="header">
<div>
<img class="headerEle" src="https://cdn.discordapp.com/attachments/316916526760591362/390814093340311565/unknown.png">
</div>
<div>
<a class="headerEle" href="https://www.google.de/">Google</a>
</div>
<div>
<button class="headerEle">Logout</button>
</div>
</div>