I am working on creating a footer for my app where there are 3 main components. The current footer container is:
.footer-container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: $bar-color;
Each child element has
display: inline-block
And it produces the vertical alignment that I am looking for:
However, I am looking to center the 3 components equally across the footer. The flexbox space-between option looked like it would fit best, therefore I tried it. In terms of horizontal alignment, it is perfect, however when I add
display: flex;
align-items: center;
to the footer-container class it moves the first item down. Like this:
I'm not sure why this is occurring. How would I fix it?
A flexbox has two main axes. You are aligning items along one axis of the flex container with align-items, but you also need to include the justify-content property for aligning along the other main axis of the flex container. That is why you see the uneven row.
When you specify both axes of the container with CSS properties justify-content and align-items, using space-between works as expected. Flexbox docs
html, body {
margin: 0;
padding: 0;
background: #111;
}
:root {
--footer-color: #000;
}
.footer-container {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: var(--footer-color);
}
.footer-container p {
display: inline-block;
color: #FFF;
}
<html>
<body>
<div class="footer-container">
<p>Connected</p>
<p>12:00:59 AM</p>
<p>Version 0.0.1 (Latest Version)</p>
</div>
</body>
</html>
Related
I want my ReactModal to sit at the bottom of the viewport, but it's sitting right underneath the Results, and all I've tried so far has failed to correct the problem. I know this is a common issue and there are many solutions online, but there is something about how I've got my CSS set up that is not allowing the flex-grow property to work the way I expect it to. Any ideas?
JSX:
<div className='App'>
<div className='main-content'>
<Header/>
<Results results={testData}/>
</div>
<ReactModal/>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
.App {
text-align: center;
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 1.5rem;
align-content: center;
min-height: 100vh;
}
.main-content {
flex-grow: 1;
}
flex-grow specifies how much of the remaining space in the flex container should be assigned to the item. If your trying to place the ReactModal to the bottom of the viewport you would probably want to use the example below.
Edited
Codepen Example
If you look at the css file, you would add this:
position: fixed;
bottom: 0;
To your ReactModal component and it would place it to the bottom of the page. You would not use flex-grow because it is totally useless in this situation.
Hope this helps.
So I'm using flexbox to create the grid unfortunately, I'm a little stuck as to how to make the divs stack on top of each other. This is what it looks like when I hide overflow:auto and add position relative to the carddiv. I believe the divs are stacking on top but they don't look the right way.
this is what it looks like:
Image Link
https://imgur.com/a/1KsJDh7
What I want it to look like is this:
Except positon:absolute makes everything disappear.
I'm new to css/html so I'm not exactly sure what I'm doing wrong.
https://imgur.com/a/mrLsTdX
App.css
* {
/*overflow:auto*/
}
.App {
/*display: flex;*/
/*flex-wrap: wrap;*/
}
Card.css
.container{
background-color: yellow;
display: flex;
flex-flow: column;
text-align: center;
position: relative;
margin: 10% 10% 10%;
}
.cardDiv {
height: 100vh;
position: absolute;
}
.cardPicture {
background-color: blue;
height: 50vh;
}
.cardDescription {
background-color: green;
height: 50vh;
}
However, without position:absolute it looks like this which is what I want it to look like except it doesn't stack. I assume the first version is stacked which is why it only shows one div?
The code below is for the second image link:
https://imgur.com/a/mrLsTdX
App.css
* {
overflow:auto
}
.App {
/*display: flex;*/
/*flex-wrap: wrap;*/
}
Card.css
.container{
background-color: yellow;
display: flex;
flex-flow: column;
text-align: center;
position: relative;
margin: 10% 10% 10%;
}
.cardDiv {
height: 100vh;
}
.cardPicture {
background-color: blue;
height: 50vh;
}
.cardDescription {
background-color: green;
height: 50vh;
}
The cardDivs are being generated through a map function that is inserting the divs.
The html looks like this:
<div className='container'>
<div className="cardDiv">
<div className="cardPicture"></div>
<div className="cardDescription"></div>
</div>
</div>
Does anyone have any idea on what I could do make the divs stack up without disappearing?
I think the issue is the combination of a flex container and flex items that have been set to absolute positioning. When you set position: absolute on .cardDiv it takes all the cardDiv elements out of the flex flow, and without any width or content, the cardDiv's disappear. As an experiment, take your first CSS block and add a width (say, 50px) to .cardDiv. You should see the cards reappear, stacked and taking up 50 pixels horizontally.
When you set a element to display: flex or display: inline-flex, all the direct children of that element become flex items. You can see all the things that does to the children by default here, and the purpose of the various flex properties are there to manipulate how the children will be displayed along the axis you specify. If you set one of these flex-items to absolute positioning, however, it takes that element out of that flex configuration.
If I understand what you want correctly, I'm not sure you need the container to be flex at all. Try taking the flex properties out of the container, setting the cardDivs to position:absolute and setting width and height to conform to how much of the screen you want filled.
.container {
position: relative;
margin: 1rem;
}
.cardDiv {
position: absolute;
width: 100%;
height: 100vh;
}
.cardPicture {
background-color: blue;
height: 50%;
}
.cardDescription {
background-color: green;
height: 50%;
}
Let me know if this is not what you were looking for-- I figure you can adjust it to how you want the cards to appear. But that's them stacked and split 50-50 between picture and description.
I'm new to css and even newer to flex.
I couldn't find an answer, so I started a new one..
I have the following container and item:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
color: rgb(51, 51, 51);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
This way I get 2 items on both sides (one left and one right).
I would like to know how to do the following:
The left item, will be on the left as before. From the point it ends, to the point the container ends - I with the right element to be centered.
The left item, will be on the left as before. The right item will be 10px left from the right end of the container.
Thanks!
The solution to this problem is using nested flexboxes. Get rid of the display: block; on .item - you can't mix flex and block display rules like that.
What you want to do is set up series of containers:
one top level flex container
two equally sized flex containers inside of the the top level container
Markup will look like this:
<main class="container">
<section class="left-container">
<div class="item"></div>
</section>
<section class="right-container">
<div class="item"></div>
</section>
</main>
In the CSS layer, you give the top-level .container flex and then justify-content: space-between which pushes the containers to the sides.
.container {
display: flex;
justify-content: space-between;
}
In the two nested containers, you need to make them both display: flex; as well. Now you can control the positioning of your .item elements like you want. align-items: center controls the vertical axis so .left-container gets only that positioning while the right container gets justify-content: center; to control the vertical alignment.
.left-container {
background-color: darkgray;
display: flex;
align-items: center;
height: 200px;
width: 50%;
}
.right-container {
background-color: lightgray;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
width: 50%;
}
Styling on the item is pretty simple - I just gave height and width for demo purposes. They aren't necessary. If you want to do precise tweaks, use margin on .item to push slightly from these standards.
.item {
background-color: red;
height: 100px;
width: 100px;
}
Codepen:
https://codepen.io/staypuftman/pen/PmLyNM
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 5 years ago.
So i'm using CSS flex to create vertically centered Modal popups ( align-items: center; ). The issue is that when the Modal is taller than the viewport (and is scrollable), the Flex prioritizes the 'centered-ness' and thus makes the top of the modal inaccessible.
Has anyone found ways around this? I could use a media query to make all Modals flex-start aligned, however i still want smaller modals to be vertically centered.
I had thought of trying to make the modal flex-shrink; to always fit 100% of the viewport, but it needs to scroll (and allow content to fit in further down the page) so not sure!
.outer {
display: flex;
align-items: center;
}
Thanks to #Pete for answering this:
The solution was setting max-height: 100%; and overflow: auto; (i had previously had overflow: visible; which caused issue.
I also found another method:
by placing the following flex properties on the 'outer outer' container (in this case, we're using ReactModal, so there's ReactModalPortal).
So we do
```.ReactModalPortal {
display: flex;
align-items: flex-start;
.innerContainer {
display: flex;
align-items: center;
}
}
```
i suppose by putting flex-start on the parent, it always ensures the content 'begins' at the top of the window.
Here you go
.parent{
top:50px;
}
.parent,
.child {
position: relative;
width: 50px;
height: 50px;
margin: auto;
background: #CCC;
}
.child {
position: relative;
width: 25px;
height: 100px;
margin: auto;
background: #000;
top: 50%;
transform: translate(0, -50%);
}
<div class="parent">
<div class="child"></div>
</div>
Is there a other way to put an HTML element to the bottom except :
position: absolute;
bottom: 0;
and at the parent element:
position: relative
...or setting the margin so that the element fits exactly at the bottom?
Well, you can also use position: fixed; bottom: 0;, which will stick the element to the bottom of the window. That means it won't even scroll with the rest of the page.
When you use that for a full-width footer or the like (the most likely use case), you'd then need to add a margin to the rest of the page content so that it doesn't get hidden behind (or hide) the footer.
Other than that you're pretty much stuck with the options you mentioned.
Full documentation on the position property can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
You can also use position: fixed
.elem {
position: fixed;
bottom: 0;
}
Or you can use Flex then set your element to align-self: flex-end
e.g.
.container {
height: 150px;
width: 150px;
display: flex;
display: -webkit-flex;
-webkit-flex-direction: row;
flex-direction: row;
border: 1px solid red;
}
.container div {
-webkit-align-self: flex-end;
align-self: flex-end
}
Fiddle