I'm trying to achieve the following layout with dynamic content:
code:
.container {
display: flex;
flex-direction:row;
justify-content:space-between;
}
<div class="container">
<span>Published</span>
<span>Song title</span>
<span>Edit song</span>
</div>
What would be the best way to go about it, taking into account that sometimes the texts in each span don't always appear, I want they layout to be fixed so that even if one of the texts doesn't appear they always remain in the same place. Thanks!
The original code above I tried with display:flex doesn't work because when the text doesn't appear the grid collapses.
add the following css
.container {
display: flex;
flex-direction:row;
justify-content:space-between;
}
https://jsfiddle.net/hxazcg71/
Related
I come often across with this scenario, where i have i.e. 2 flex-children, with property flex-direction row. so they are first shown side by side with a gap between them (margin-right).
And by resize, as soon as there is not enough space left for both, flex-wrap moves the second child under the first one, so i don't need the margin-right from 1. item anymore.
Can i dynamically set the margins depends on the "wrap" status?
Fiddle: https://jsfiddle.net/ejmhxztd/
Fiddle Note: You should resize the window (reduce width) and see the wrapped case. If you continue reducing the width, you will see that the text of the first child will also split into 2 lines, since the margin-right is there and takes space.
.parent {
display:flex;
flex-direction:row;
flex-wrap:wrap
}
.child1 {
margin-right:300px
}
<div class="parent">
<span class="child1">Child1 Text</span>
<span class="child2">Child2 Text</span>
</div>
I know this is an old issue, but you can use "column-gap" and "row-gap" to define gaps only in some direction.
For example:
.class{
display: flex;
align-items: center;
column-gap: 10px;
flex-wrap: wrap-reverse;
flex-direction: row;
}
In this case, the gap will only affect in columns.
You can try to use CSS-grid for this:
.parent {
display:grid;
grid-column-gap:300px;
grid-template-columns:repeat(auto-fit,minmax(100px,max-content));
}
.parent > * {
border:1px solid;
}
<div class="parent">
<span class="child1">Child1 Text</span>
<span class="child2">Child2 Text</span>
</div>
I am trying to implement a card pattern (similar to material design) making use of flexbox for layout. Each card has a header and a content and uses flexbox to arrange them.
Cards have a fixed width so if a header is long it will wrap, making that header longer. The problem is I want each card in a row to look consistent, so I want each header in a row to have the same height.
The height of the card is already consistent thanks to the outer flexbox. I don't know how to make the headers' height consistent.
the basic layout is:
<div class="flex-container">
<div class="flex-item">
<div class="flex-header">
My header
</div>
<div class="flex-content">
My content
</div>
</div>
<div class="flex-item">
<div class="flex-header">
My header
</div>
<div class="flex-content">
My content
</div>
</div>
</div>
Flexbox css:
.flex-container {
display: flex;
flex-flow: row wrap;
}
.flex-item {
width: 200px;
margin: 10px;
display: flex;
flex-flow: column;
}
.flex-header {
background-color: navy;
font-size: 2em;
}
.flex-content {
}
I also have an example codepen.
The behavior you want is unique found in only one HTML Interface which is the table. In order to avoid all the gripes and lecturing from everyone about using a table for layout, try using the display properties with the values of:
table
table-row
table-cell
For use of these values read this.
CODEPEN
Add min-height in .flex-header
Example:
.flex-header {
background-color: navy;
font-size: 2em;
min-height: 80px;
}
I was looking to make a same layout as you mentioned and after reading the answers here, that it is not possible with just CSS, I tried JS solutions and found this awesome library here.
I've created a codepen example. It might help someone who's looking for the same.
All you need to do is add the library and use the following jQuery code.
$('.item-image').matchHeight({
byRow: true,
property: 'height',
target: null,
remove: false
});
Regards
I'm having a lot of trouble setting a div to appear under another div (like they do normally).
I'musing MaterializeCSS. My layout is as follows:
<div class="container valign-wrapper">
<div class="customClass"></div>
<div class="customClass"></div>
</div>
And css:
.valign-wrapper{
display: flex;
align-items: center;
}
.customClass{
margin: 0 auto;
/* text and font css */
}
However , even adding width:100% or changing display class won't make the two divs appear vertically, they appear side by side. I found out that removing valign-wrapper class will work, but my items will obviously appear at the top of the site...
If anyone has encountered the same problem I would appreciate the help!
You need to add the flex direction:
.valign-wrapper { flex-direction: column; }
That way, flex items are positioned as a column. Alternatively, if you need to go with flex-direction: row; (default), you can use
.valign-wrapper { flex-wrap: wrap; }
.customClass { flex-basis: 100%; }
to still maintain the row style but have your two items wrap and eventually positioned above each other.
Even though the post is from 2013, it still teaches the magic of flexbox in a nice way and I can just recommend everyone to read about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am designing a webpage in which <figure> elements are dynamically added to a flexbox. These figures each contain an image which can be of any size and aspect ratio as well as a <figcaption>. The flexbox has justify-contents: space-between, and it is my intention that it should be populated with an indefinite number of horizontally arranged, evenly-spaced figures. The following code works perfectly on Firefox (at least as far as I can tell):
<html>
<head>
<style>
div {
display: flex;
justify-content: space-between;
}
figure {
background-color: teal;
}
img {
max-width: 25vmax;
max-height: 25vmax;
}
</style>
</head>
<body>
<div>
<figure>
<img src="http://placekitten.com/g/800/600">
<figcaption>
Caption goes here
</figcaption>
</figure>
</div>
</body>
</html>
There is a script to dynamically add new figures, as demonstrated here: http://codepen.io/anon/pen/jEzyyo.
The issue is that to make room for new figures, Chrome shrinks the width of all the figures in the div (though the content of the figures is unchanged, which is what I want), and so the spacing is thrown off and images end up overlapping. How can I get around this?
Instead of
div {
display: flex;
justify-content: space-between;
}
Use this CSS:
div {
display: inline-flex;
justify-content: space-between;
}
So I have a flex-box, or more precisely only a box (display: box) since that's what Sass Compass generates.
I want it to:
base it's height on its content
make the "columns" stretch so that their backgrounds fill the entire parent
have the content of the columns vertically centered.
Like so:
see it on jsbin
The problem is that requirement 2 and requirement 3 in the list above collide. I can have the content vertically centered with box-align: center but to have the backgrounds stretch I must use box-align: stretch.
In the example above I'm using
#div1 { display: table; height: 150px; }
#div1 > div { display: table-cell; vertical-align: middle; }
The problem is that I can't specify a fixed height since the height is decided by the content of the 3rd column (lime).
Any way to solve this without javascript? Nested flex-boxes (tried but can't get to work)? display: table as above?
I don't see the need for the flex box css if you are just trying to get three columns of equal height, that grow with the content and have vertical alignment
If you just use the following structure
<div class="table">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
You can use these styles:
.table {display:table; width:100%;}
.cell {display:table-cell; vertical-align:middle; width:33.33%;}
Example