I have a flexbox based item that displays an image and grows the second div based on the content inside. However, i would like to place some link beneath the heading text and a line break isn't working and i would like a solution that isn't a line break. The page looks like this https://jsfiddle.net/mrah1psg/
and this is the code
#main {
width: 1200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
}
#main div {
min-width: 200px;
height: 50px;
}
.mt{
margin-top:0px;
}
.grow-this{
display: flex;
flex-grow: 7 !important;
}
<h1>FlexBox</h1>
<div id="main">
<div style="background-color:coral;">
<img src="https://images.unsplash.com/photo-1558543936-49604317cd3b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" width="200px" height="200px" /></div>
<div class="grow-this" style="background-color:lightblue;">
<h3 class="mt">Such a great title here that is flexible and sets width</h3>
An Address</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">Very Good</div>
</div>
I would like this link An Address to be displayed just beneath the title. How can i display the link beneath the title?
Related
I'm working with formatting some divs with a flex box and thought that justify-content: space-between is the best way to do it. But, I'm running into an issue when the browser resolution changes the items become misaligned. For example if I shrink the browser size the items will wrap onto the next line which is fine since I have flex-wrap: wrap, but on the new line that is created the contents are spread between. Is it possible to remove the justify-content every time the items wrap? Sorry for the poor explanation, I'll provide a jsfiddle. Change the fiddle to 483px and the items will wrap and be placed on the next line, but instead of space between I want the items to be placed next to each other.
http://jsfiddle.net/xut5cqhw/46/
.container {
position: relative;
height: 150px;
width: 40%;
display: flex;
justify-content:space-between;
flex-wrap: wrap;
background-color: black;
}
.content {
height: 50px;
width: 50px;
margin-top: 10px;
background-color: yellow;
}
<div class = "container">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>
I have a div with two contents: an image (on top) and text (on bottom).
Height of image plus height of the text is bigger than the height of the parent.
I want an image to shrink, so the whole text will be visible.
So - now it looks like this:
And I want it to look like this:
How to achieve this?
I tried it with display: flex and flex-shrink or flex-grow, but it's not working.
Solution with flex will be much appreciated :)
Here's a codepen with an example:
https://codepen.io/anon/pen/zQXyLb
And here's code used:
<html>
<head></head>
<body style="background: yellow;">
<div style="
width: 150px;
height: 150px;
background: #ddd;
overflow: hidden;
display: flex;
flex-direction: column;
">
<div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/skull_1f480.png">
</div>
<div>
<div>Here i have some text</div>
<div>which is multiline</div>
<div>and it should make</div>
<div>the skull smaller</div>
</div>
</div>
</body>
</html>
Instead of img tag try div with background-image.
flex: is short form of: flex-grow, flex-shrink, flex-basis.
0 0 auto means that element will take just as much space as needed.
1 1 auto means that element will take all available space — so image takes box size minus text size. And text is always visible.
.box {
display: flex;
flex-direction: column;
margin-bottom: 20px;
width: 150px;
height: 150px;
background: #ddd;
}
.image {
flex: 1 1 auto;
background: url(https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/skull_1f480.png) 0 0 no-repeat;
background-size: contain;
}
.text {
flex: 0 0 auto;
}
<div class="box">
<div class="image"></div>
<div class="text">
<div>Here I have some text</div>
<div>which is multiline</div>
<div>and it should make</div>
<div>the skull smaller</div>
</div>
</div>
<div class="box">
<div class="image"></div>
<div class="text">
<div>Here I have small text</div>
</div>
</div>
You can also keep image in the HTMl if you inbricate flex boxes to allow img container to shrink and img understand max-height:100%;
body {
background-color: #a3d5d3;
}
[class],
[class]>div {
display: flex;
flex-direction: column;
overflow: hidden;
}
img {
max-height: 100%;
margin-right: auto;
}
[class]>div[id] {
flex-grow: 1;
flex-shrink: 0;
}
<div class style="
width: 150px;
height: 150px;
background: #ddd;
">
<div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/skull_1f480.png">
</div>
<div id>
<div>Here i have some text</div>
<div>which is multiline</div>
<div>and it should make</div>
<div>the skull smaller</div>
</div>
</div>
Resize the image using css.
img{
max-width:50px;
}
The above code should make the image flexible and allow it to be smaller.
Also you can put variable height to the parent div, i.e.
<div style="
width: 150px;
max-height: 250px; //added this part
background: #ddd;
overflow: hidden;
display: flex;
flex-direction: column;
">
But this way the image will stay large but the parent's height will increase. Allowing the text to appear in the enlarged div.
I have a flex container which contains an img flex item.
I want this img to disregard its intrinsic height (90px) so that the height may shrink to match the sibling's flex item height (as per the default align-items: stretch style).
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
.content {
width: 200px;
height: 50px;
background-color: hotPink;
}
<div class="container">
<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content"></div>
</div>
</div>
We can see the desired behaviour if we swap the img for a div:
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
.dynamicHeightContent {
width: 120px;
height: 100%;
background-color: green;
}
.content {
width: 200px;
height: 50px;
background-color: hotPink;
}
<div class="container">
<div class="item">
<div class="dynamicHeightContent"></div>
</div>
<div class="item">
<div class="content"></div>
</div>
</div>
I have tried min-height: 0 on the img, to no avail.
What is the special behaviour that applies to img but not div?
How can we opt out of img's special behaviour so that it behaves like other flex items (such as div)? If there isn't a way to opt-out, is there a recommended workaround?
Note that whilst the img won't shrink its height, it does appear to grow:
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
.content {
width: 200px;
height: 300px;
background-color: hotPink;
}
<div class="container">
<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content"></div>
</div>
</div>
Note: I'm happy to disregard the img's aspect ratio. I plan to avoid skewing the img via object-fit: cover.
Note that in your example, the item is the flex item and not content - you should check the strech behaviour of item here.
How can we opt out of img's special behaviour so that it behaves like
other flex items (such as div)?
It behaves like other flex items - <img> may not be very useful as a flex item but the stretch behaviour works fine:
if the image has more height than item, the item stretches to the height of the image
if the image has less height than item, the image stretches to the height of the content breaking its aspect ratio.
See demo below:
.container {
border: 1px solid;
display: flex;
}
.item {
background: cadetblue;
}
.content {
width: 200px;
background-color: hotPink;
}
img {
display: block;
}
<h2>Small content</h2>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content">some text here some text here some text here </div>
</div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
</div>
</div>
I have tried min-height: 0 on the img, to no avail.
The min-height: 0 is given to a column flexbox along the flex direction to override the default auto behaviour (for row direction the property is min-width) - this doesn't work in the cross axis.
You can see details and some examples of this below:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow
Why don't flex items shrink past content size?
Wrapping image in a container
Now wrap the <img> in a div and see the same situation - the stretch behaviour is again good:
.container {
border: 1px solid;
display: flex;
}
.item {
background: cadetblue;
}
.content {
width: 200px;
background-color: hotPink;
}
img {
display: block;
}
<h2>Small content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here </div>
</div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
</div>
</div>
The difference now is that you can use object-fit successfully on the image now (this does not work properlly if it is a flex item):
.container {
border: 1px solid;
display: flex;
}
.item {
background: cadetblue;
}
.content {
width: 200px;
background-color: hotPink;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<h2>Small content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here </div>
</div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
</div>
</div>
I want this img to disregard its intrinsic height (90px) so that the
height may shrink to match the sibling's flex item height
The only way to disregard the image height is to use positioning on the image wrapper:
position the image absolutely with respect to its wrapper,
you can either give a width to the image wrapper or give flex: 1 on item to get half of the available width horizontally.
See demo below:
.container {
border: 1px solid;
display: flex;
}
.item {
background: cadetblue;
flex: 1; /* equal width for items */
}
.content {
width: 200px;
background-color: hotPink;
}
.item:first-child { /* image container */
position: relative;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute; /* position absolutely */
top: 0;
left: 0;
}
<h2>Small content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here </div>
</div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
<div class="item">
<div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
</div>
</div>
I think you are looking at this the wrong way.
The image itself is 90px high which means the content of the flex item has a height of 90px(because your image is the flex item). So your div on the right side is matching the image height because it is higher than the div's height and not the other way around.
Think of it as if you have set the height of the flex item(image) to 90px. So it won't shrink pass it unless you set it to a smaller height. Even though you didn't explicitly set the image height to 90px but it is 90px naturally so it is implicitly set which causes the confusion. So while it will stretch beyond 90px in height it won't go under it because that's the height of the flex item content.
In the case where you swapped it for a div and it works like you imagined is because there is no height set on the .item div which is the flex item.
while this is not the answer you are asking, but the div and img actually behave the same, that is if there is content taller than the height, it grows the height
example:
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
.dynamicHeightContent {
width: 120px;
height: 100%;
background-color: green;
}
.content {
width: 200px;
height: 50px;
background-color: hotPink;
}
<div class="container">
<div class="item">
<div class="dynamicHeightContent">
akhsdjahskd<br>
ajkhsdkjhasd<br>
ajshdkahsd<br>
ajsgdjgad<br>
ajshdasjdh<br>
</div>
</div>
<div class="item">
<div class="content"></div>
</div>
</div>
since you insist that object-fit should solve it, you can try this, as you can see, object-fit only works if we set the height and width, otherwise the browser will try to make it "keep aspect ratio", just try to remove the height or width from the css (one at a time), you will see this effect
.container {
border: 1px solid;
display: flex;
}
.item {
border: 1px solid;
}
img.item {
height: 50px;
width: 200px;
object-fit: cover;
}
.content {
width: 200px;
height: 50px;
background-color: hotPink;
}
<div class="container">
<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
<div class="item">
<div class="content"></div>
</div>
</div>
I have 2 spans inside a div:
html:
<div class="main">
<span class="title"> Name</span>
<span class="values">/sys/fs/cgroup/sys/fs/</span>
</div>
here is how it looks:
http://jsfiddle.net/tdrgz1yj/
as you can see the size and volume title getting pushed down when I have long text for Name field. Also I cannot increase the width any more cause in actual app, the Volume field goes out of focus.
Is there a way I can align the Name, Size and Volume fields all in one line even after applying the word-break prop?
Can I make it look something like with css?
Thanks!
Yes. Just add display: flex to the .parent
Example
If you want to move the long text to the same line with the "Name" title, set display: flex to the .main as well.
Example 2
I suggest using span only to wrap inline elements. Instead, use divs :
.parent {
padding: 20px 10px;
margin: 0 0 20px;
display: flex;
width: 100%;
box-sizing: border-box;
}
.parent div {
margin-left: 20px;
}
.main {
flex-basis: 200px;
flex-grow: 1;
flex-shrink: 0;
display: flex;
}
.title {
margin-right: 20px;
display: inline-block;
}
.values {
word-break: break-word;
}
<div class="parent">
<div class="main">
<div class="title">Name:</div>
<div class="values">/sys/fs/cgroup/sys/fs//sys/fs/cgroup/sys/fs//sys/fs/cgroup/sys/fs/</div>
</div>
<div class="main">
<div class="title">Size:</div>
<div class="values">223k</div>
</div>
<div class="main">
<div class="title">Volume:</div>
<div class="values">111</div>
</div>
</div>
I don't find a way to have a vertical alignment of div which wrap to a second column on overflow...
I have a div with a fixed height, inside I have a dynamicaly variable number of texts each wrapped in a div with a fixed width.
I want to display texts in vertical alignment. If there is not enough space, a second column shall be used.
I tried with float and display: inline-block but the element are not below each other.
I think it will be easier to understand with a picture:
A pure CSS solution will be the best!
Here are the base html code of the problem:
<div class="container" style="height: 70px; background-color: lightblue;">
<div style="width: 100px;">Alsace</div>
<div style="width: 100px;">Bretagne</div>
<div style="width: 100px;">Centre</div>
<div style="width: 100px;">Lorraine</div>
<div style="width: 100px;">Picardie</div>
</div>
Context: on the left of the main div, I have a country map with different county which can be selected, when a county is selected I want to display it's name close to the map. That's why I want the texts the closest to the left side.
Even better method:
.container {
display: flex;
flex-flow: column wrap;
}
Thanks to #Roberrrt
This can be done with display: flex;
Demo: https://jsfiddle.net/88p36j74/
You set the wrapper height to 'item height' x 'vertical item count'.
.container {
display: flex;
flex-direction: column;
align-content: flex-start;
flex-wrap: wrap;
height: 250px;/* 5 items x 50px = 250px*/
}
.container div {
height: 50px;
width: 100px;
background: red;
}
You could use column-count. 1
.container {
height: 90px;
background-color: lightblue;
column-count: 2;
column-fill: auto;
}
.container>div { width: 100px; height: 20px; }
<div class="container">
<div>Alsace</div>
<div>Bretagne</div>
<div>Centre</div>
<div>Lorraine</div>
<div>Picardie</div>
</div>
1 column-count support
Bonjour =)
You need to wrap your divs in two other divs, representing the columns you want.
This would give something like:
<div class="container" style="height: 70px; background-color: lightblue;">
<div class="column" style="float:left;">
<div style="width: 100px;">Alsace</div>
<div style="width: 100px;">Bretagne</div>
<div style="width: 100px;">Centre</div>
<div style="width: 100px;">Lorraine</div>
</div>
<div class="column" style="float:left;">
<div style="width: 100px;">Picardie</div>
</div>
</div>
Something like that should work, you may need to add fixed width on both divs though.