Move last element to bottom of container with the rest centered
I'm trying to get my menu centered using flexbox centering in the middle of the bar while the last element is pushed to the bottom of the container.
Here is my JSfiddle.
I've tried with align-self flex-end with no success and
li:last-child {
margin-top: auto;
}
That aligns my the last element to the bottom but pushes the rest of the items to the other end of the container.
html css css3 flexbox
edited Nov 18 '18 at 18:27
LGSon
69.8k84584
asked Nov 18 '18 at 17:49
indiehjaertaindiehjaerta
7910
add a comment |
I'm trying to get my menu centered using flexbox centering in the middle of the bar while the last element is pushed to the bottom of the container.
Here is my JSfiddle.
I've tried with align-self flex-end with no success and
li:last-child {
margin-top: auto;
}
That aligns my the last element to the bottom but pushes the rest of the items to the other end of the container.
html css css3 flexbox
edited Nov 18 '18 at 18:27
LGSon
69.8k84584
asked Nov 18 '18 at 17:49
indiehjaertaindiehjaerta
7910
Remove thepadding, the last<li>` have the samepaddingas the others`
– Tico
Nov 18 '18 at 17:54
1
If you addli:first-child { margin-top: auto; }it will work though
– LGSon
Nov 18 '18 at 18:16
1
Possible duplicate of stackoverflow.com/questions/32551291/…
– LGSon
Nov 18 '18 at 18:27
wow, thanks dunno how I missed that
– indiehjaerta
Nov 18 '18 at 19:35
add a comment |
I'm trying to get my menu centered using flexbox centering in the middle of the bar while the last element is pushed to the bottom of the container.
Here is my JSfiddle.
I've tried with align-self flex-end with no success and
li:last-child {
margin-top: auto;
}
That aligns my the last element to the bottom but pushes the rest of the items to the other end of the container.
html css css3 flexbox
edited Nov 18 '18 at 18:27
LGSon
69.8k84584
asked Nov 18 '18 at 17:49
indiehjaertaindiehjaerta
7910
I'm trying to get my menu centered using flexbox centering in the middle of the bar while the last element is pushed to the bottom of the container.
Here is my JSfiddle.
I've tried with align-self flex-end with no success and
li:last-child {
margin-top: auto;
}
That aligns my the last element to the bottom but pushes the rest of the items to the other end of the container.
html css css3 flexbox
html css css3 flexbox
edited Nov 18 '18 at 18:27
LGSon
69.8k84584
asked Nov 18 '18 at 17:49
indiehjaertaindiehjaerta
7910
edited Nov 18 '18 at 18:27
LGSon
69.8k84584
asked Nov 18 '18 at 17:49
indiehjaertaindiehjaerta
7910
edited Nov 18 '18 at 18:27
LGSon
69.8k84584
edited Nov 18 '18 at 18:27
LGSon
69.8k84584
edited Nov 18 '18 at 18:27
LGSon
69.8k84584
69.8k84584
asked Nov 18 '18 at 17:49
indiehjaertaindiehjaerta
7910
asked Nov 18 '18 at 17:49
indiehjaertaindiehjaerta
7910
asked Nov 18 '18 at 17:49
indiehjaertaindiehjaerta
7910
7910
Remove thepadding, the last<li>` have the samepaddingas the others`
– Tico
Nov 18 '18 at 17:54
1
If you addli:first-child { margin-top: auto; }it will work though
– LGSon
Nov 18 '18 at 18:16
1
Possible duplicate of stackoverflow.com/questions/32551291/…
– LGSon
Nov 18 '18 at 18:27
wow, thanks dunno how I missed that
– indiehjaerta
Nov 18 '18 at 19:35
add a comment |
Remove thepadding, the last<li>` have the samepaddingas the others`
– Tico
Nov 18 '18 at 17:54
1
If you addli:first-child { margin-top: auto; }it will work though
– LGSon
Nov 18 '18 at 18:16
1
Possible duplicate of stackoverflow.com/questions/32551291/…
– LGSon
Nov 18 '18 at 18:27
wow, thanks dunno how I missed that
– indiehjaerta
Nov 18 '18 at 19:35
Remove the
padding, the last <li>` have the same padding as the others`– Tico
Nov 18 '18 at 17:54
Remove the
padding, the last <li>` have the same padding as the others`– Tico
Nov 18 '18 at 17:54
1
1
If you add
li:first-child { margin-top: auto; } it will work though– LGSon
Nov 18 '18 at 18:16
If you add
li:first-child { margin-top: auto; } it will work though– LGSon
Nov 18 '18 at 18:16
1
1
Possible duplicate of stackoverflow.com/questions/32551291/…
– LGSon
Nov 18 '18 at 18:27
Possible duplicate of stackoverflow.com/questions/32551291/…
– LGSon
Nov 18 '18 at 18:27
wow, thanks dunno how I missed that
– indiehjaerta
Nov 18 '18 at 19:35
wow, thanks dunno how I missed that
– indiehjaerta
Nov 18 '18 at 19:35
add a comment |
2 Answers
2
active
oldest
votes
You can add another empty <li> at the beginning of the list and give him the flex-grow:1 property, and then set it to the last li as well. Here's an example
It might work without an extra element, just set the first li to have flex-grow:1. Second example here
Note that you'll have to keep your text inside the first element aligned to the bottom.
answered Nov 18 '18 at 18:43
Itay GalItay Gal
8,05252560
add a comment |
You can follow this CSS. I did this way.
ul {
height: 400px;
margin: 0;
padding: 0;
background-color: #f00;
position: relative;
}
li {
list-style: none;
color: #fff;
}
li:last-child {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}<ul>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
</ul>answered Nov 21 '18 at 12:00
Shahriyar AhmedShahriyar Ahmed
8114
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53363820%2fmove-last-li-element-to-bottom-of-container-with-the-rest-centered%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can add another empty <li> at the beginning of the list and give him the flex-grow:1 property, and then set it to the last li as well. Here's an example
It might work without an extra element, just set the first li to have flex-grow:1. Second example here
Note that you'll have to keep your text inside the first element aligned to the bottom.
answered Nov 18 '18 at 18:43
Itay GalItay Gal
8,05252560
add a comment |
You can add another empty <li> at the beginning of the list and give him the flex-grow:1 property, and then set it to the last li as well. Here's an example
It might work without an extra element, just set the first li to have flex-grow:1. Second example here
Note that you'll have to keep your text inside the first element aligned to the bottom.
answered Nov 18 '18 at 18:43
Itay GalItay Gal
8,05252560
add a comment |
You can add another empty <li> at the beginning of the list and give him the flex-grow:1 property, and then set it to the last li as well. Here's an example
It might work without an extra element, just set the first li to have flex-grow:1. Second example here
Note that you'll have to keep your text inside the first element aligned to the bottom.
answered Nov 18 '18 at 18:43
Itay GalItay Gal
8,05252560
You can add another empty <li> at the beginning of the list and give him the flex-grow:1 property, and then set it to the last li as well. Here's an example
It might work without an extra element, just set the first li to have flex-grow:1. Second example here
Note that you'll have to keep your text inside the first element aligned to the bottom.
answered Nov 18 '18 at 18:43
Itay GalItay Gal
8,05252560
edited Nov 18 '18 at 18:55
answered Nov 18 '18 at 18:43
Itay GalItay Gal
8,05252560
answered Nov 18 '18 at 18:43
Itay GalItay Gal
8,05252560
answered Nov 18 '18 at 18:43
Itay GalItay Gal
8,05252560
8,05252560
add a comment |
add a comment |
You can follow this CSS. I did this way.
ul {
height: 400px;
margin: 0;
padding: 0;
background-color: #f00;
position: relative;
}
li {
list-style: none;
color: #fff;
}
li:last-child {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}<ul>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
</ul>answered Nov 21 '18 at 12:00
Shahriyar AhmedShahriyar Ahmed
8114
add a comment |
You can follow this CSS. I did this way.
ul {
height: 400px;
margin: 0;
padding: 0;
background-color: #f00;
position: relative;
}
li {
list-style: none;
color: #fff;
}
li:last-child {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}<ul>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
</ul>answered Nov 21 '18 at 12:00
Shahriyar AhmedShahriyar Ahmed
8114
add a comment |
You can follow this CSS. I did this way.
ul {
height: 400px;
margin: 0;
padding: 0;
background-color: #f00;
position: relative;
}
li {
list-style: none;
color: #fff;
}
li:last-child {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}<ul>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
</ul>answered Nov 21 '18 at 12:00
Shahriyar AhmedShahriyar Ahmed
8114
You can follow this CSS. I did this way.
ul {
height: 400px;
margin: 0;
padding: 0;
background-color: #f00;
position: relative;
}
li {
list-style: none;
color: #fff;
}
li:last-child {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}<ul>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
</ul>ul {
height: 400px;
margin: 0;
padding: 0;
background-color: #f00;
position: relative;
}
li {
list-style: none;
color: #fff;
}
li:last-child {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}<ul>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
</ul>ul {
height: 400px;
margin: 0;
padding: 0;
background-color: #f00;
position: relative;
}
li {
list-style: none;
color: #fff;
}
li:last-child {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}<ul>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
<li>items</li>
</ul>answered Nov 21 '18 at 12:00
Shahriyar AhmedShahriyar Ahmed
8114
answered Nov 21 '18 at 12:00
Shahriyar AhmedShahriyar Ahmed
8114
answered Nov 21 '18 at 12:00
Shahriyar AhmedShahriyar Ahmed
8114
answered Nov 21 '18 at 12:00
Shahriyar AhmedShahriyar Ahmed
8114
8114
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53363820%2fmove-last-li-element-to-bottom-of-container-with-the-rest-centered%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Remove the
padding, the last<li>` have the samepaddingas the others`– Tico
Nov 18 '18 at 17:54
1
If you add
li:first-child { margin-top: auto; }it will work though– LGSon
Nov 18 '18 at 18:16
1
Possible duplicate of stackoverflow.com/questions/32551291/…
– LGSon
Nov 18 '18 at 18:27
wow, thanks dunno how I missed that
– indiehjaerta
Nov 18 '18 at 19:35