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.
Related
I'm having a vertical list of several items. Every item is a two column layout made with flexbox. The left column has a fixed width. The right column contains arbitrary text and should take all the available space.
When the windows gets narrower, I still want a two column layout. Here the second column should get smaller and the text inside should wrap.
When the windows gets even narrower (second column is roughly the same size as the first column), I want the second column to move under the first.
I simply gave the first column a fixed width and put flex-wrap: wrap on the container. The problem is, that the flex-wrap already kicks in when the text in the right column is more than one line. It "has priority over" the text-wrap within the second column.
How can I create the layout described above?
I created a codepen with my issue to play around with: https://codepen.io/maxwell89/pen/PoWrBzJ.
main {
border: thin solid black;
}
article {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
article header {
margin-right: 2em;
width: 5em;
background-color: red;
}
article section {
background-color: blue;
}
<body>
<main>
<article>
<header>Header1</header>
<section>iaOIsadjio jiasdj asd you asda sad iaeojrasod aosidjasdjias diojsadiojas oidjasjio dasijod asd</section>
</article>
<article>
<header>Header2</header>
<section>Something short</section>
</article>
</main>
</body>
Try resizing the browser window and you see that the first item wraps way too early.
You need to set the flex-basis of the second element to be equal to the width of the first one. Doing this, you will trigger the wrap when that width cannot fit inside the container.
main {
border: thin solid black;
}
article {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
article header {
margin-right: 2em;
width: 5em;
background-color: red;
}
article section {
background-color: blue;
flex-basis: 5em;
flex-grow: 1;
}
<main>
<article>
<header>Header1</header>
<section>iaOIsadjio jiasdj asd you asda sad iaeojrasod aosidjasdjias diojsadiojas oidjasjio dasijod asd</section>
</article>
<article>
<header>Header2</header>
<section>Something short</section>
</article>
</main>
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.
This question already has answers here:
How to align groups of buttons on single row with Flex only?
(2 answers)
How to Center and Right-align on a row with CSS Flex only
(3 answers)
Closed 5 years ago.
I have a codepen of my header. How can I align the image to the right of my div?
I have tried justify-content: flex-end and align-items: flex-end
With the given code sample, and to right align the image in its parent, the align-items: flex-end is a flex container property and won't have any effect in the right rule.
The appropriate property for a flex item would be align-self, though as the direction is row, this will still not work since align-* properties affect the cross axis (vertically).
A simple solution is to remove align-items: flex-end from the right rule and instead make the div-container--right a flex container, use justify-content: flex-end to push its child, the image, to the right. That will work with the rest of the rules, and your original layout kept.
Stack snippet
.main-container{
background-color: white;
flex: 1;
display: flex;
flex-direction: row;
}
.left{
flex: 2;
background-color:white;
}
.right {
flex: 2;
/*align-items: flex-end; removed */
}
.div-container {
background-color: #90C3D4;
height: 100px;
}
.div-container--left {
border-bottom-left-radius: 10px;
padding-left: 10px;
margin-left: 10px;
}
.div-container--right {
border-bottom-right-radius: 10px;
padding-right: 10px;
margin-right: 10px;
display: flex; /* added */
justify-content: flex-end; /* changed */
align-items: flex-start; /* added, to avoid image to stretch */
}
<div class='main-container'>
<div class="left">
<div class='div-container div-container--left'>
<img src="http://www.mharrisweb.co.uk/images/calendarIcon.png" width="100" />
</div>
<div class='picker-container'>
</div>
</div>
<div class="right">
<div class='div-container div-container--right'>
<img src="http://www.mharrisweb.co.uk/images/logoGreen.png" width="100" />
</div>
<div class='picker-container'>
image above align right
</div>
</div>
</div>
Besides the above, here is a few more ways to align flex items:
How to align groups of buttons on single row with Flex only?
How to Center and Right-align on a row with CSS Flex only
Center and right align flexbox elements
Right align out the Float Property
The way I see it you have 2 options.
remove flex:2 from the .right class and add margin-left:auto;
to the .right class add display: flex, align-items: flex-end; flex-direction: column (you also have that text that would need to be moved inside a class wrapper as the immediate child of the .right class.
I prefer option 1.
An additional option to the good answer from Sten is to use absolute position. Example:
.right{
position:absolute;
right:0;
}
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 ;)
Take a look at this example
It has a flexbox container with flex-flow: row wrap; to wrap all items. This is almost what I want.
When it starts to wrap, item number 6 wraps to the second line:
1 2 3 4 5
6
But always I want to wrap at least two items when it starts to wrap so you'll never have a single items on a line:
1 2 3 4
5 6
While not the most elegant solution, you could wrap the last two elements in another flexbox:
<html>
<head>
<style>
.flex {
display: flex;
flex-wrap: wrap;
}
.flex > div {
flex: 1 0 auto;
padding: 20px;
text-align: center;
}
.flex .flex {
padding: 0;
flex-grow: 2;
}
</style>
</head>
<body>
<div class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="flex">
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
See a pen here: https://codepen.io/anon/pen/prodVd
I figured out a way to do it for inline Elements, however it will behave inconsistently across browsers when used with inline-blocks. Still not a solution, but maybe somebody can figure out a way to make it behave with inline-block elements.
.item {
display: inline;
}
.item::before {
content: ' ';
font-size: 0;
}
.item:last-child::before {
content: '';
}
Here is a Fiddle with it in action.
Here's an approach that should work under the constraint that the width of the element is fixed
Assuming the width is 50px:
.container {
display: flex;
flex-flow: row wrap;
}
.flex-item: {
width: 50px;
display: block;
}
.flex-item:nth-child(even) {
translateX(100%)
margin-left: -100px;
}
.flex-item:nth-child(odd) {
margin-right: 50px;
}
The trick is to basically move the "footprint" of every 2nd element into its predecessor (negative margin), still display it in its original place (translate) and having the predecessor eat the remaining space (positive margin) for the purpose of row-breaking.
You can try to wrap 2 sibling elements with flex container
Based on https://stackoverflow.com/a/30431565/6884587 which did not work due to syntactical and logical reasons, I figured out how to do it for preknown same width items.
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
/* gap: 5px <-- can be used for spacing */
}
.flex-item: {
width: 50px;
display: block;
}
.flex-item:last-child {
margin-left: -50px; /* consider gap in this value, if applicable */
}
.flex-item:nth-last-child(2) {
margin-right: 50px; /* consider gap in this value, if applicable */}
This way, the last and the next to last item literally end on the same pixel, causing them to wrap line together.
For not preknown, but same width items it is a little more complex, since setting the margin to a percentage value is based on the item parent's width.