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.
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 container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 3 years ago.
I have a table with some elements inside of the table header.
The th elements might have a specific width specified.
There is a wrapper element with display: inline-flex inside of the <th>.
One of the flex items inside it has text, which might be multiple words that could break.
If the width of the th is too small to accommodate the text, it will break nicely. However the width of the flex container will not shrink to fit the broken text nicely.
You can see it in action here: https://codepen.io/mydea/pen/ExaeWoX
Summary:
<th class="th" style="width: 230px;">
<div class='flex-container'>
<div class="first">
<img style="height: 40px; width: 40px;" src="..." />
</div>
<div class="second">multiple longer words</div>
</div>
</th>
.th {
text-align: right;
}
.flex-container {
display: inline-flex;
align-items: center;
text-align: right;
}
The first th shows the issue. The second th has a large enough width that it works as expected. And the last one is without any width specified, for reference.
So in this example here:
I'd like there to not be any unnecessary space between the left (green box) flex item and the right flex item with the text in it.
Is that possible? I played around with everything I could think of, but could never get the desired result that:
The flex items are vertically centered (align-items: center)
The flex items do not wrap to a new line
The overall container is right aligned
If the text breaks, there is no unnecessary space between the flex items
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.
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 4 years ago.
I have three flex items in my flex box. I want the first two centered and the last one to align all the way to the right along the main axis.
really basic overview:
<div class="flex flex-center">
<div>flex item 1</div>
<div>flex item 2</div>
<div style="margin-left: auto;">flex item 3</div>
</div>
My CSS for the flex class is:
.flex {
display: flex;
&.flex-center {
align-items: center;
}
}
What happens when I use a margin-left: auto; is it pushes the first two flex items to the flex start of the main axis. I want the first two flex items centered, and the third item to align all the way to the right (end) of the main axis.
Sounds like you just need to do a little math and use the last-child selector. Take a look at my pen here and tell me if this is what you needed.
EDIT: I now think the best way to do this would be with some hidden spacer elements and the flex-grow property. Example here.
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/