This question already has answers here:
How can I make a display:flex container expand horizontally with its wrapped contents?
(5 answers)
Closed 8 years ago.
The component I must implement looks like the tile groups on Metro :
the width of the horizontal flow of groups depends of the number of groups
each group contains a title, its width must be extended to the group content
each group contains an undetermined number of tiles arranged by columns
I nearly reach the goal, but I don't get why the flex container extends itself. Is there a way to shrink its width to its own content width (remove the blue space on the right of cyan tiles)
DEMO :
http://jsfiddle.net/5ar0yyks/
CSS :
div.vertical {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-self:flex-start;
align-items: flex-start;
background-color:blue;
max-height:100%;
}
HTML :
<div class="vertical">
<div class = "vertical-tile">
1
</div>
<div class = "vertical-tile">
2
</div>
<div class = "vertical-tile">
3
</div>
</div>
if you think it's not the good approach, what's your proposal to resolve this issue?
I finally get the answer by myself
Actually it seems that it cannot be made only by CSS due to different browser behaviors regarding the flexbox implementation
Code :
$(document).ready(function() {
$('.vertical').each(function( index ) {
var lastChild = $(this).children().last();
var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
$(this).width(newWidth);
})
});
Demo :
http://jsfiddle.net/btuspmz6/2/
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 12 days ago.
EDIT:
Per the comments, it was unexpected that the <div> was ever centering - turned out to be a height thing, where the <div> was taking up the parent's full height, but the custom element's children were not.
Also this isn't a duplicate but whatever
I have the following css:
.layout-main {
display: flex
flex-direction: column;
}
If I do the following:
<div class="layout-main">
<div> stuff goes here </div>
</div>
,
the "stuff" is centered vertically.
However, if I define a custom element, which results in:
<div class="layout-main">
<my-element>
<div> stuff goes here </div>
</my-element>
</div>
the "stuff" is not centered vertically.
If I explicitly set justify-content: center on .layout-main, problem solved.
If I set display: contents on my-element, problem also solved.
Saw this that seemed related / docs on contents
Why is the custom element not centered vertically the way a div is when inside a display: flex; justify-content: center parent?
The display: flex property will only change the positioning of its children, not its children's children. It would be best if you moved the class="layout-main" part onto the my-element block and then set it's height to be 100% of it's parent div's height.
This question already has answers here:
Make flex item wrap to the next row with following items continuing the flow
(2 answers)
Closed 6 months ago.
I am trying to achieve a dynamic CSS grid layout where some columns with class 'featured' for example are going to expand on full width of the row and the other columns which don't have this class will stay and flow into 3 cols in a row layout.
But in my case is that if we take the second column for example and it becomes with class 'featured', then this column should expand full-width on the next row and then the flow of the columns to become - col 3 takes the place of col 2 and col 4 to come one row above and takes the position of col 3.
So it will become something like this afterwards:
col 3 becomes col2, col 4 goes one position up and goes on the position of col 3, col 2 (class 'featured') is going full width on the next row, then col 5 going on col 4 position and etc. And that's the concept from where I put class 'featured' on specific columns on the grid there to follow that same layout dynamic flow. Please refer to the attached mockup for reference.
Image Mockup for reference
Thank you. Hope someone can help me achieve this.
Best regards, Nick.
I think you can do this easily with css grid. They key would be to use grid-auto-flow: dense and then just add grid-column: 1 / -1 to the grid cell that you want to feature.
I have created a small demonstration here (click "Run code snippet" to see it work):
const button = document.querySelector('#btn');
const target = document.querySelector('#target');
button.addEventListener('click', () => {
target.classList.toggle('featured');
})
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: .5rem;
margin-bottom: 1rem;
grid-auto-flow: dense;
}
.cell {
height: 50px;
background-color: lightgrey;
display: flex;
align-items: center;
justify-content: center;
}
.cell.featured {
background-color: pink;
grid-column: 1 / -1;
}
<div class="grid">
<div class="cell">1</div>
<div class="cell">2</div>
<div id="target" class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
</div>
<button id="btn">Toggle featured</button>
You can click the button to toggle a "featured" class on the 3rd grid.
When it has the "featured" class it takes the whole row and the other cells take the available space.
(you won't need the JS. that is just for this demonstration)
i hope this is what you wanted...
This might not be possible to do strictly with flexbox or it may require some media queries. I'm fine with that. I'm wondering if there is a way to have four items arranged horizontally in one row that will responsively switch to two columns both with two items.
I've tried various things to do this such as:
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
button {
width: 250px;
}
<div class="flex-container">
<button>a</button>
<button>b</button>
<button>c</button>
<button>d</button>
</div>
This works okay, but if you reduce the screen width it wraps to three items in the first row and one item in the second until you reduce the width to less than the width of the three items. If the screen width gets too small to have all four items arranged horizontally, I'd like it to be two columns and two rows of items.
I have some control over the width of each item in the row, but they will be relatively small like buttons (maybe 200px max).
Is this possible to do with flexbox? If not, is there a better alternative to wrapping to an appropriate grid?
One idea without media query is to use extra wrapper for the button like below:
.flex-container,
.flex-container > div{
display: flex;
flex-flow: row wrap;
justify-content: center;
}
button {
width: 250px;
}
<div class="flex-container">
<div>
<button>a</button>
<button>b</button>
</div>
<div>
<button>c</button>
<button>d</button>
</div>
</div>
If the width of each button is to stay fixed, you can simply set the max-width of the container to that width, times the (maximum) number of buttons you want on each row.
See this codepen.
In the past I used float to align my divs horizontal, however now that I'm producing multiple divs with the same "class", float no longer align them horizontal.
If I set position to absolute, they stack on top of each other.
If I set position to relative, they become vertical aligned.
I can't seem to grasp how to fix this, since they have the same class.
Here is my output:
<div class="group">
<div class = "user2">title1</div><div class = "user1">title3</div>
<div class = "user2">title2</div><div class = "user1">title4</div> . <div class="line1">line1<br></div><div class="line2">line2<br> . </div>
</div>
I want "titles" aligned vertical for each other.
So, user 1 div has: title 1 - tilte 2
user 2 div has: title 3 - title 4
Add display: flex to the class group.
.group {
display: flex;
flex-direction: column;
}
And for its children:
.group > div {
display: flex;
}
By default, element with flex enabled will force its children to stay in the same row.
I strongly recommend you to learn flexbox and all its configuration and properties. Here is a great font.
This question already has answers here:
Flexbox 3 divs, two columns, one with two rows
(3 answers)
Closed 5 years ago.
I have an HTML markup structure like so:
<div class="container>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
I am trying to shape this markup into display flex row. Where div one takes up half the line width and the remaining divs take the other half of the line width but are stacked on top of each other in the same line as div one.
I realize that I should probably wrap div 2 and 3 in a div and then execute the design I am seeking. I am just wondering if it is possible to do so without wrapping div 2 and 3 in another div.
Thanks!
You will have to wrap them with another div, a quick example for it will be giving your container:
.container {
display: flex;
flex-direction: row;
}
Then, you make a wrapper for both two and three, and giving him:
.wrapper {
display: flex;
flex-direction: column;
}
That's the most basic thing, you will need to modify other things of course.