I'm trying to use flexbox within a bootstrap grid to make a thin menu with items vertically centered but it isn't working. I've attempted to use the styles presented in this demo, but apparently i've still got something incorrect.
Markup
<section class="container secondary-header">
<div class="row">
<div class="col-xs-6">
<nav class="secondary-header__nav">
<ul class="secondary-nav__list-items">
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
</ul>
</nav>
</div>
<div class="col-xs-6"> </div>
</div>
</section>
SCSS
.secondary-header {
height: 60px;
background-color: #2bf;
}
.secondary-nav {
&__list-items {
display: flex;
align-items: center;
justify-content: space-between;
}
&__nav {
height: 60px;
display: flex;
}
&__list-items {
list-style-type: none;
}
&__list-item {
border: 1px solid;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
// height: 60px;
}
&__list-item {
display: inline;
color: #fff;
}
}
The problem is .secondary-nav__list-items is your flex-parent, but it's height doesn't consume the height of .secondary-header which has the blue background, and is where you want the items within .secondary-nav__list-items to be centered.
You could either make sure everything between .secondary-header and .secondary-nav__list-items has height 100%, so that .secondary-nav__list-items will be as tall as .secondary-header, or just move the height/background to .secondary-nav__list-items instead.
.secondary-nav__list-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.secondary-nav__nav {
height: 60px;
display: flex;
}
.secondary-nav__list-items {
list-style-type: none;
height: 60px;
background-color: #2bf;
}
.secondary-nav__list-item {
border: 1px solid;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.secondary-nav__list-item {
display: inline;
color: #fff;
}
<section class="container secondary-header">
<div class="row">
<div class="col-xs-6">
<nav class="secondary-header__nav">
<ul class="secondary-nav__list-items">
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
<li class="secondary-nav__list-item">
<a class="secondary-nav__link">Option</a>
</li>
</ul>
</nav>
</div>
<div class="col-xs-6"> </div>
</div>
</section>
Related
i have a section, and inside of it an ul with 4 li. In each li a div that are going to be cards. I want to centralize the text inside the div and put it closer to the bottom.
I tried using float: left, and then change the position with margin top and left, but i cannot centralize it.
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
Add these to .cardd2
display: flex;
align-items: center;
justify-content: space-evenly;
take note of them young padawan, you're gonna use it a lot
also add margin-bottom: 1vh; for separation
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
display: flex;
align-items: center;
justify-content: space-evenly;
margin-bottom: 1vh;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
I think that this is the code that you want.
I assume that you need to have the text inside lis to be centered vertically and want it to be a bit down to the bottom.
.cards2{
text-align: center;
}
.list2{
list-style: none;
}
.list2 li{
display: inline-block;
}
.cardd2{
width: 200px;
height: 300px;
background-color: rgb(107, 255, 240);
display: flex;
align-content: center;
margin: 10px;
justify-content: center;
}
.list2 p{
text-align: center;
display: flex;
margin-top:100%;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Add the following to .cardd2:
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Maybe Like this:-
* {
padding: 0px;
margin: 0px;
}
.list2 {
display: flex;
positition: absloute;
align items: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
I'm having an issue with my header, on the .container element when I apply flex the child flex-justify doesn't work, but when I remove it I can't align them center.
* {
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
header {
background: inherit;
border-bottom: 1px solid var(--border);
padding: 1rem 0rem;
background: pink;
}
/*
Remove the flex to preview
*/
header .container{
display: flex;
align-items: center;
}
.right {
display: flex;
align-items: center;
justify-content: flex-end;
background: green;
}
.left {
display: flex;
align-items: center;
justify-content: flex-start;
background: red;
}
<header>
<div class="container">
<div class="logo left">
<a href="#">
MYLOGO(IMG)
</a>
</div>
<nav class="right">
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
</nav>
</div>
</header>
So basically I want a container with flex to align center and its child one justify end and one right.
Simply do this:
header .container {
display: flex;
align-items: center;
justify-content: space-between;
/* this will put the logo.left at the left and .right at the right */
}
* {
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
header {
background: inherit;
border-bottom: 1px solid var(--border);
padding: 1rem 0rem;
background: pink;
}
/*
Remove the flex to preview
*/
header .container{
display: flex;
align-items: center;
justify-content: space-between;
}
.right {
display: flex;
align-items: center;
justify-content: flex-end;
background: green;
}
.left {
display: flex;
align-items: center;
justify-content: flex-start;
background: red;
}
<header>
<div class="container">
<div class="logo left">
<a href="#">
MYLOGO(IMG)
</a>
</div>
<nav class="right">
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
<a class="nav-link" href="">
NAV ITEM
</a>
</nav>
</div>
</header>
#Its Fragilis recommended that I add display flex and justify space around, but because I was using bootstrap it showed some margin on the bottom and left. to fix that you need to add this code:
.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after{
content: none !important;
}
I am not new to flex but I am not able to vertically align the content of the navbar to the center in my code.
<nav className="nav navbar">
<h3> Logo </h3>
<ul className= "nav-link1">
<li className="nav-item1 ">
<Link to="/">Home</Link>
</li>
<li className="nav-item1 ">
<Link to="/button">Button</Link>
</li>
<li className="nav-item1 ">
<Link to="/text">Text</Link>
</li>
</ul>
</nav>
and my CSS is:
.nav{
display: flex;
justify-content: center;
align-items: center;
min-height: 10vh;
background: rgb(250, 172, 3);
color: aliceblue;
}
.nav-link1{
width: 50%;
display: flex;
justify-content:space-between;
align-items: center;
list-style: none;
}
and I also have bootstrap imported into the project.
Any help would be appreciated !!! Thank you.
Replace class with className if using react.
.nav{
display: flex;
flex:1;
justify-content: center;
align-items: center;
min-height: 10vh;
background: rgb(250, 172, 3);
color: aliceblue;
}
.nav-link1{
width: 50%;
display: flex;
flex-direction:row;
justify-content:space-between;
align-items: center;
list-style: none;
}
<nav class="nav">
<h3> Logo </h3>
<ul class= "nav-link1">
<li class="nav-item1 ">
<Link to="/">Home</Link>
</li>
<li class="nav-item1 ">
<Link to="/button">Button</Link>
</li>
<li class="nav-item1 ">
<Link to="/text">Text</Link>
</li>
</ul>
</nav>
In bootstrap, there is a padding-bottom given to the ul element.
Add margin-bottom: 0 to your .nav-link1 class and it will be aligned vertically.
I'm trying to add a dropdown to a Navbar, however, when hovering on the dropdown button (Kieli, in my case), center alignment pushes the rest of the items out of the way. I have attached a snippet with an example of my problem.
.Navbar {
display: flex;
height: 10vh;
background-color: lightgray;
justify-content: space-between;
align-items: center;
}
.Navbar-menu {
display: flex;
}
.Navbar-dropdown {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
}
.Navbar-dropdownMenu {
display: none;
}
.Navbar-dropdown:hover .Navbar-dropdownMenu {
display: flex;
flex-direction: column;
}
<nav class="Navbar">
<a class="Navbar-brand Navbar-link" href="./">Brand</a>
<div class="Navbar-menu">
<a class="Navbar-link Text-uppercase" href="./">Link 1</a>
<a class="Navbar-link Text-uppercase" href="./">Link 2</a>
<div class="Navbar-dropdown">
<button class="Navbar-dropdownBtn">Kieli</button>
<div class="Navbar-dropdownMenu">
<a class="Navbar-link" href="../en-fi/">Suomi</a>
<a class="Navbar-link" href="../en-gb/">Englanti</a>
</div>
</div>
</div>
</nav>
The content is pushed because your dropdown menu is in your Navbar-dropdown. On hover you're displaying the dropdown content and as it takes vertical space it pushes the content.
To avoid that, you have to set the dropdown content position to absolute.
Don't forget to set the position of the Navbar-dropdown to relative.
.Navbar {
display: flex;
height: 10vh;
background-color: lightgray;
justify-content: space-between;
align-items: center;
}
.Navbar-menu {
display: flex;
}
.Navbar-dropdown {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
position: relative;
border: 1px solid red;
}
.Navbar-dropdownMenu {
background-color: lightgray;
display: none;
position: absolute;
top: 20px;
right: 0;
}
.Navbar-dropdown:hover .Navbar-dropdownMenu {
display: flex;
flex-direction: column;
}
<nav class="Navbar">
<a class="Navbar-brand Navbar-link" href="./">Brand</a>
<div class="Navbar-menu">
<a class="Navbar-link Text-uppercase" href="./">Link 1</a>
<a class="Navbar-link Text-uppercase" href="./">Link 2</a>
<div class="Navbar-dropdown">
<button class="Navbar-dropdownBtn">Kieli</button>
<div class="Navbar-dropdownMenu">
<a class="Navbar-link" href="../en-fi/">Suomi</a>
<a class="Navbar-link" href="../en-gb/">Englanti</a>
</div>
</div>
</div>
</nav>
The text should be aligned like this is how I want
Now this is what i get:
Below is my html and css3 code. I am using twitter bootstrap3.
ul.connect{display:inline-block;list-style-type:none;margin:0px;padding:0px;}
ul.connect li{display:inline-block; padding-right:2px;}
ul.connect li a{display:inlineblock;background:url("cfo/images/sprite1.png") no-repeat;width:25px; height:25px;}
.test {font-size:10px;color:#333;}
<ul class="connect">
<li class="fb"><span class="test">CONNECT WITH US</span></li>
<li class="twtr"></li>
<li class="gogpls"></li>
<li class="lnkin"></li>
<li class="wifi"></li>
</ul>
For easy align the items vertical centre, I used display flex property. For more detail guide read centring css complete guide in https://css-tricks.com/centering-css-complete-guide/
ul.connect {
list-style: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 0;
margin: 0;
}
ul.connect li {
padding-right: 2px;
}
ul.connect li a {
display: block;
width: 25px;
height: 25px;
border-radius: 50%;
background: red url("cfo/images/sprite1.png") no-repeat;
}
ul.connect li.fb {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
ul.connect .test {
font-size: 10px;
color: #333;
padding-right: 2px;
}
<ul class="connect">
<li class="fb"><span class="test">CONNECT WITH US</span>
</li>
<li class="twtr">
</li>
<li class="gogpls">
</li>
<li class="lnkin">
</li>
<li class="wifi">
</li>
</ul>
try setting the text line height to the same height as your icons.
.test {
line-height: 25px;
}
should resolve your issues