Creating divs inside flex-wrap
How would one make the wrapper clipping these flexible divs?
Those. doing these:
In it:
http://jsfiddle.net/frank_o/35hk7L84/1/
Like it needs to be set flex-direction: row;
, except I can't have them on the same line.
.main {
display: flex;
flex-direction: column;
/* flex-direction: row; */
}
.other {
color: white;
background: blue;
margin: 10px;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello other world</p>
</div>
</div>
source to share
Here's what you are looking for (change display
individual elements):
.main {
display: inline-flex;
flex-direction:column;
}
.other {
color: white;
background: blue;
margin: 10px;
display:table;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello other world</p>
</div>
</div>
Helpful resources: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Other: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
source to share
You can do it using the following code.
for more reference and also to generate code for flex with all properties, you can follow the following link
http://code.tutsplus.com/tutorials/an-introduction-to-the-css-flexbox-module--net-25655
http://the-echoplex.net/flexyboxes/
.main {
display: inline-flex;
flex-direction: column;
}
.other {
color: white;
background: blue;
margin: 10px;
}
<div class="main">
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello world</p>
</div>
</div>
source to share
You will get what you want and each item is a different size, shrinking as the width of the item, but not using flex.
.other {
clear:both;
color: white;
background: blue;
margin: 10px;
float: left;
}
<div class="main">
<div class="other">
<p>H</p>
</div>
<div class="other">
<p>Hello world </p>
</div>
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello world</p>
</div>
<div class="other">
<p>Hello</p>
</div>
<div class="other">
<p>Hello world12345678</p>
</div>
</div>
source to share