flexbox Questions
3
I'm trying to put my pagination in the bottom-center of the page and using Angular Material mat-paginator component.
This is the result right now:
1:
2:
As you can see the mat-paginator now is go...
Tabbi asked 6/11, 2018 at 9:38
5
Solved
I am trying to get flex divs stacked in rows of 3. Sometimes I will have 3 divs, sometimes 6 or 21, etc. I got the widths and paddings figured out, but I can't figure out how to get them to start a...
4
Solved
I'm trying to create a filter section on my site, the content is all generated dynamically (so I can't add extra parents to it), and our styleguide creates them using flex items. I'd like to keep t...
10
I have a row-direction flexbox nested in a column-direction flexbox, but when I want to use align-content in the child, it doesn't work.
When I replace display:flex of the parent by a display:bloc...
8
Solved
Given this CSS:
div.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
border: 1px solid blue;
}
div.container div {
width: 200px;
border: 1px solid gray;
displ...
4
Solved
I'm trying to get an element to have items aligned to the right, and all overflowing elements to be hidden but accessed by scrollbar.
But it seems like the scrollbar disappears when specifying jus...
5
My goal is to create a two-column layout with flexbox wherein the first column has two rows and the second column has one, like this:
Setting flex-basis: 100% on the third item gives the desired...
3
Solved
i am creating something with css flexbox and use gap to give spacing between elements but now i want to change the spacing of only one element like
.container{
display: flex;
gap: 20px;
}
.i...
1
I would like to use virtual scrolling with flexlayout - e.g. the following code should work with virtual scrolling:
<div fxLayout="row wrap" fxLayoutAlign="start center">
...
Nodababus asked 21/12, 2018 at 5:46
2
I am constructing a form where the field's width percentage is dynamically set by clients.
My first approach was to create a flex container with wrapping enabled and space the fields evenly u...
2
Solved
Why is flexbox not working properly with fieldset or other non-div tags?
I expect them to line up next to each other like in the div example, as flex-direction: row; is default in flexbox. However ...
2
Using CSS3 I can individually set the flex properties like so
.someclass {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
Using Bootstrap (version >= 4.1) flex it seems I can only set fle...
3
Solved
I'm struggling to understand how flexbox containers interact with other blocks. With just a flexbox on my page, I can do what I want. But when I mix in other page elements, things get weird. The pr...
1
I want to have a container that fills the whole screen. Inside is an image aligned to the center. The image is not any specific size. I'm using a transition effect to show the image appearing from ...
5
Solved
I'm working with a framework developed in-house which depends on a certain structure to our HTML. And one of the tricky things is that each row needs its own container with its own classes and data...
11
Solved
I'd like to show a horizontal series of a unknown number of playing cards. To do this, they will have to overlap if there are too many. I'm having trouble convincing a flex box to overlap the cards...
4
Solved
I have a simple flex div with many children. I want 3 elements on each row using tailwindcss.
Is there a way to accomplish this using just tailwindcss classes? I tried with gap-4 on my parent div a...
Cramfull asked 28/7, 2021 at 22:0
6
I need to implement a masonry layout. However, for a number of reasons I don't want to use JavaScript to do it.
Parameters:
All elements have the same width
Elements have a height that cannot be ...
5
So I am using React Native Section List and following is my Code of ListEmptyContent
// define your styles
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: ...
Pike asked 7/12, 2017 at 5:16
12
Solved
I would like to have A B and C aligned in the middle.
How can I get D to go completely to the right?
BEFORE:
AFTER:
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: ro...
4
Solved
I want to color every other row in a table i'm building using CSS Grid. I can't get it to work though, i'm only able to get every other column colored. Here's a picture of what I want to do. Would ...
Bertrambertrand asked 5/10, 2019 at 19:17
2
Solved
I had a bug-like issue with a div inside a 'a' tag.
<a href=''>
<div>..</div>
</a>
this <a> tag was inside a flex parent.
for some reason this <a> added a padd...
6
Solved
I have tried setting the min-width to 0 on the wrapper div for chart.js, but the chart will grow and then not shrink back down if you drag the window around.
I can't figure it out! The only thing ...
Nettlesome asked 25/9, 2018 at 16:29
11
Solved
I am using CSS grid to layout some items like this...
#container {
display: grid;
grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}
.item {
background: teal;
...
12
Solved
I have a div with some children:
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
<a href="/" class="butto...
1 Next >
© 2022 - 2025 — McMap. All rights reserved.