I am playing with flexbox
of CSS. I am trying to create a nav menu. I want the first item of the menu to be in the left most and rest of the item to be in the center. Currently I have everything in center. To align content in center I am using justify-content: center
with container.
But I dont know I can align a particualr item in flex-box
. I tried to float
it but since float
are not meant for alignment and also float does not work with flexbox items. Is there any way/workaround to achieve this? Thanks. Here's the pen to play.
body{
background: #e0f080;
color: white;
font-weight: bold;
font-size: 1em;
}
.flex-container {
display: -webkit-flex;
display: flex;
background-color: tomato;
color: white;
font-weight: bold;
font-size: 1em;
justify-content: center;
}
.flex-item{
align-content: space-around;
margin: 10px;
border: 2px solid white;
padding: 5px;
}
.menu{
order: -1;
align-self: start;
font-size: 3em;
}
Use positioning - add position: relative
to the flex-container
and apply this to menu
:
position: absolute;
top: 0;
left: 0;
I also removed one invalid property that you were using (align-self: start
) to clean it up - demo below:
body {
background: #e0f080;
color: white;
font-weight: bold;
font-size: 1em;
}
.flex-container {
display: -webkit-flex;
display: flex;
background-color: tomato;
color: white;
font-weight: bold;
font-size: 1em;
justify-content: center;
position: relative;
}
.flex-item {
align-content: space-around;
margin: 10px;
border: 2px solid white;
padding: 5px;
}
.menu {
order: -1;
font-size: 3em;
position: absolute;
top: 0;
left: 0;
}
<div class="flex-container">
<div class="menu">
<span>≡<span>
</div>
<a class="flex-item">item 1</a>
<a class="flex-item">item 2</a>
<a class="flex-item">item 3</a>
</div>
for flex-direction: row (default) you should set margin-right: auto to align the child to the left.
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: flex-end;
}
.block {
width: 50px;
background: tomato;
}
.justify-start {
margin-right: auto;
}
<div class="container">
<div class="block justify-start"></div>
<div class="block"></div>
</div>
try this code and let me know if u want u can also go to this link https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With