So I am doing a navigation menu in CSS, but I can't seem to get it correctly.
I have 4 li elements inside a ul. I want the space between these elements to resize responsively, depending on the size of the window.
I thought about using the margin-right property with like a 10% value, so the elements would spread apart more if the window is bigger. Long story short this method doesn't work and I wanted to see if anyone knows how I can make it work. I'll leave the important code beneath.
#links li{
margin-right: 10%;
}
#navbar li{
display: inline-block;
}
.container-nav{
width: 85%;
margin: auto;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
}
<nav id="navbar">
<div class="container-nav">
<ul id="links">
<li>Inicio</li>
<li>¿Quiénes somos?</li>
<li>Servicio</li>
<li>Contacto</li>
</ul>
</div>
Thanks a lot for the help!
If you set the style for links to be
#links{
display: flex;
justify-content: space-between;
}
This code is setting the Links ul to be a flex container and spacing the elements evenly
https://codepen.io/adamjamesturner/pen/MWYNxrx
EDIT:
The issue with your code is you need to set the ul to be a flex-container which then, by default, has a flex-direction: row and so gives the behaviour you desire.
Related
i want the items in flexbox not to come out of flexbox when the div's width next to flexbox is increased.
consider i have a flexbox container which has items such as svg, input field and div with simple text. Next to this flexbox container i have one side panel. This side panel can be resized..meaning when user drags the side panel sideways its width either increases or decreases. In doing so, the flexbox container is shrunk and hence the items in flexbox come out of it...how can i avoid it? how can i make sure that even when the sidepanel is dragged the flexbox items should stay intact?
.wrapper {
display: flex;
flex-grow: 1;
}
.items_container {
position: relative;
width: 40px;
height: 40px;
top: 16px;
margin-left: 16px;
padding-left: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;}}
.items_container.expanded .search_input_field {
display: flex;
align-items: center;
}
<div class="wrapper">
<div class="items_container expanded">
<div class="search_input_field">
<Svgsearch/><input type=text/>
</div>
</div>
<div>dropdown to be added</div>
</div>
Could someone help me with it? thanks.
You can use flex-wrap to make the items drop down to another row if they are larger than their container:
display: flex;
flex-wrap: wrap;
Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
If you want the items to remain on one line then i would give them percentage widths.
I have three columns within the flex box container, two visible and one hidden. The first two have very little content; the third one has several pages of content. I want all three to be initially vertically centered, but since the third one will overflow off the page, I want it (when made visible) to end up filling to the top of the page and then scrolling down. How can I have centred items in the flex box that overflow naturally in this way?
What's happening now in my code below is that when the third column is made visible, it overflows off the top and bottom of the page, without scroll, so that its impossible to read the first part of the content.
HTML:
<div class="flex-container">
<div class="column column-left">
column one
</div>
<div class="column column-right">
column two
</div>
<div class="column-hidden column" data-id="1">
column three
</div>
</div>
CSS:
body{
margin:0;
}
html, body{
height: 100%;
}
.flex-container{
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.column{
padding: 0 1em 0 1em;
}
.column-left{
display: visible;
}
.column-right{
display: visible;
border: none;
text-align: left;
}
.column-hidden{
display: none;
}
Javascript:
//clicking on button does the following to show hidden column
$('.column-left').removeClass('column-left').addClass('column-hidden');
$('.column-right').removeClass('column-right').addClass('column-left');
$(".column[data-id='" + id + "']").addClass('column-right').removeClass('column-hidden');
Played a bit with your code. I rearranged align-items from .flex-container to .column, which is also display: flex;. For scrolling I think you should have additional absolutely positioned container for the content.. I used P.
Sample here http://codepen.io/vkjgr/pen/gpqLLZ
p.s. Some hints about your code. flex-direction's initial value is row, so you don't have to write it. And visible is not a property of display ;)
Apparently, you can only have block elements (inline, inline-block, float nothing works) inside a flex item container? Thats just weird and doesn't seem useful unless I'm doing it completely wrong?
Here is the pen: http://codepen.io/iaezzy/pen/GggVxe
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-direction: column;
}
.fill-height-or-more > div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
You might have to increase the preview pane height for the flexbox to work.
Edited for clarity: I'm not talking about the flex items themselves, but the elements INSIDE the flex item. In the codepen above, you'll see h2 and p bordered, they have the float declaration, but don't float.
You have set display: flex on both section as well as div.
If section acts as a container, you give display: flex to the section and leave the div as flex-items. Then the ps and h1s will float.
Fiddle: http://jsfiddle.net/abhitalks/zb12n2dk/
.fill-height-or-more {
display: flex;
flex-direction: column;
...
}
.fill-height-or-more > div {
flex: 1;
...
}
.some-area > div p {
width: 40%;
float: left;
...
}
Flex items are always rendered as blocks because flex layout only makes sense in a block-like layout. There are a few differences between flex items and block-level boxes which are covered in sections 3 and 4 of the spec, one being that flex items cannot float either, again because this would disrupt the flex layout (and conversely, neither can outside floats intrude into a flex layout).
You can apply different values of display to flex items (and hide them altogether with display: none), but this will only have the effect of establishing various formatting contexts for the children of the flex items, not the items themselves.
This includes display: flex, as you're demonstrating; what happens then is that the flex items become flex containers for their own children, which makes those children flex items in your nested flex formatting contexts. Because of this, floating those children won't work.
Note that in order to establish a flex layout, you only need to set display: flex on the flex container, not its children. All the children of a flex container that are not display: none will automatically be made flex items.
for displaing inline elements inside flex dispaly, there is anther solution to use display: inline-table however it does not seem it support float as well but you can workarwond this by wrapping it with anther div or something
check the following jsfiddle https://jsfiddle.net/reda84/eesuxLgu/
.row{
width:100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > .col {
display: flex;
box-sizing: border-box;
width:50%;
float:left;
flex-direction: column;
border:1px solid #333;
min-height:100px;
padding:15px
}
.tag{
background: #1b8fe7;
color:#fff;
padding:5px 10px;
display: inline-table;
margin:0px 5px 5px 0;
}
For people trying to display inline element inside a flex container and finding this page, you just need to wrap your content one level higher in a flex element.
Example:
Not
<label style="display:flex">
A block label from a form <br>
<i>This idiomatic element is a block box and not its inline default</span>
</label>
but
<div style="display:flex">
<label>
A block label from a form <br>
<i>This idiomatic is an inline box and does not become a block</i>
</label>
</div>
I added center-vertically to <div class="col-lg-6 col-lg-offset-3"> in the services section but this doesn't seem to work. I tried a couple of other things as well but to no success.
center-vertically contains:
display: table-cell;
text-align: center;
vertical-align: middle;
Check out the live version here (just go to the services section to check out the tabs) if you inspect element on the column the tabs are in you will see a little bit of extra space on the right.
parent should have:
parent {
display: table;
}
child:
child {
display: table-cell;
vertical-align: middle;
margin: 0 auto; // if you want horizontal centering too
}
UPDATE
To horizontally center your UL inside of the column:
<ul class="nav nav-tabs" style="display: inline-block;margin: 0 auto;">
Your UL has full width. display: inline-block will trim it and margin: 0 auto will center it inside the parent.
I am working on a web application (asp.net mvc3)
I have a Main div. I want to add lots of div inside that main div.
But I want them to be like this: Divs should appear next to each others on a line, and when there is no more space left, the next div will wrap to a new line.
(Similar to writing a text, when there is no more space on this line the next word will wrap to a new line)
I tried to use display: inline; to make the appear next to each others, but how can I make them wrap when they reach the end of the Main div?
Is there a way to do it without hard coding the positions? because divs are added dynamically so i don't know how big will they be or their number
Thanks
Try display: inline-block - http://jsfiddle.net/7FJRr/1/
UPDATE If IE7 is still a concern:
div {
display: inline-block;
zoom: 1;
*display: inline;
}
It's possible to do it with the help of flex.
display: flex;
flex-wrap: wrap;
For example:
.flex{
width: 5rem;
background: yellow;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex > div{
width: 2rem;
background: black;
color: white;
margin-top: 1rem;
margin-bottom: 1rem;
}
<div class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Is this what you mean?
http://jsbin.com/uzoruq/edit#javascript,html,live
I used float:left to arrange the content divs
I am not aware of solutions that will wrap a div but this will put the divs inline
EDIT
If you are willing to use spans you could do this:
http://jsbin.com/uzoruq/2/edit
I used display:inline for the spans.