Stack Overflow
Stack Overflow

Questions tagged [flexboxgrid]

Flexbox Grid is a library for creating grid layouts using the CSS flexbox property family. Use this tag whenever you have a question involving the use of the Flexbox Grid library. Flexbox Grid utilizes identical classes as Bootstrap, so conflicts may arise. It predates the CSS Grid module.

Flexbox Grid is a library that supports grid layouts based on the CSS Flexible Box Layout Module. It was created and released in 2013 (before CSS Grid layout spec was published by W3C).

Flexbox Grid library uses identical classes to Bootstrap, so there may be some compatibility issues if you use both libraries. It also utilizes Normalize CSS 2.1.3.

Helpful links:

54 questions
14
votes
1 answer

Make Angular Material Mat-Button-Toggle-Group responsive

I have a mat-button-toggle-group with 6 button-toggles. On Desktop all Buttons should be in one line. On smaller screens the group should break and display 2 lines of buttons like this: This is my code so far (i'm using…
maidi
  • 3,219
  • 6
  • 27
  • 55
5
votes
2 answers

Why negative margin in .row?

In the Flexboxgrid framework I see a margin of -1rem on the .row class. In small viewports this creates a small horizontal scroll of the container. Since I've seen this negative margin on other frameworks, what is its purpose? Inner columns have a…
Manaus
  • 431
  • 5
  • 17
4
votes
3 answers

How to align content differently for xs and md in material ui grid

I am using material ui Grid component to create a responsive grid layout. And I want to align the content inside grid depending on the screen size - alignt left for xs and align right for md. How do I do that? I used xs and md breakpoints to divide…
troglodyte07
  • 3,598
  • 10
  • 42
  • 66
3
votes
1 answer

How to add a mouse-over image on a landing page graphic

Right away, I have to apologize for not knowing how to correctly phrase my question. Hopefully my point comes across in this description. I have a full page landing graphic on a website that I'm working with. What I want to learn to do is to make a…
DomHasQuestions
  • 33
  • 3
3
votes
0 answers

flexbox with sidebar content two column with sidebar containing 'sticky' header / footer?

So i'm using flexbox grid and have a basic something like this:
…
cheshirecatalyst
  • 379
  • 1
  • 5
  • 14
2
votes
1 answer

Flexbox, how to keep a minimum of 2 cols at 400px?

https://codepen.io/leon-yum/pen/XYpgzj?editors=1100 I'm trying to make sure that on mobile (400px and below) that my flexbox grid sticks to 2 cols / boxes. However whatever I do, either it snaps to 1 column, or each row stays at 3 cols or 4 cols…
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
2
votes
0 answers

Align vertically boxes with different height in Flexbox in a row

I am using Flexbox and I am trying to create something like this: I want the three "parent" boxes to be vertically aligned within the row. Each box have different height. In the snippet (Codepen is better in this case as there was a character limit…
Datacrawler
  • 2,780
  • 8
  • 46
  • 100
1
vote
1 answer

Flex display items 3X3 row top, center, bottom

I am trying to create a flex-box container following display: I was able to do: .garden { width: 500px; height: 500px; background: #CCC; } .flower { border: 1px solid #000; width: 100px; height: 100px; } .row { display:…
Kunal Vijan
  • 425
  • 2
  • 9
  • 28
1
vote
2 answers

FlexBoxGrid2 issue with rows

I`m doing one project using FlexBoxGrid2 and have an issue with rows. I need to add many rows one goes next by each other, but adding the second row I see that it is situated behid the first row, not under as I need it. Delete of "position: fixed;"…
EvgeniyR1987
  • 55
  • 1
  • 1
  • 6
1
vote
2 answers

Flexboxgrid and gap overflow issue

Im using flexboxgrid library to create easy responsive layout, I have a parent div styled like so display: flex; flex-wrap: wrap; gap: 2rem; children have flexboxgrid styling col-xs-12 col-md-6 col-lg-4 and it works otherwise well, except when I…
Jeekim
  • 543
  • 5
  • 15
1
vote
1 answer

How to Add Line Break in Vue JS v-for loop with CSS

I need to display the names in Alphabetical order if a list item is clicked. I am using Vue.js and Flex Grid for this. I have a list item named ListAll, On Clicking the ListAll, I have to display all the records grouped by names from nameList array.…
Abhikhya
  • 121
  • 1
  • 11
1
vote
1 answer

Why does my flexbox does not occupy the entire height of the container it is enclosed in?

I am doing a course on Frontend Masters. This is the first project of the introductory course. I made the website according to the one said at: https://btholt.github.io/intro-to-web-dev-v2/news.html Here's my HTML code:
Varun Dalal
  • 39
  • 7
1
vote
3 answers

Bootstrap - automatic size columns with responsive width

I feel like this may have been answered before, but I've searched and can't find any problems that come close. I'm working with a pretty standard bootstrap row and columns setup to style a menu bar (flexbox). This menu is generated by wordpress in…
Anne
  • 111
  • 6
1
vote
3 answers

Stack columns with flexbox - 2 columns on mobile screen, 3 columns on large screen

I'm trying to design my flexbox to have 3 columns on a large screen and 2 columns on a mobile screen (see image 1 and 2 below). Here is my JS Fiddle and my code: https://jsfiddle.net/kwxj83v6/6/ It works ok on large screen, but can't get it to…
user2353003
  • 522
  • 1
  • 7
  • 18
1
vote
1 answer

Making specific flexbox responsive

For my school project which is due soon, I'm creating a website with sections that are like the sections ''our work'' and ''follow along'' on this website: https://bellafare.com/ I recreated them with the help of flexbox and they look just as I want…
jrwebbie
  • 99
  • 1
  • 11
1
2 3 4