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
1
vote
0 answers

Flexboxgrid - equal height

I am using and referencing to flexboxgrid css. How can I have equal height columns? My side bar id=dtside has a background color and I want it to have equal height as id=dtmain. Before flexboxgrid, i was using display:table and display: table-cell…
Tamras Merin
  • 159
  • 1
  • 8
1
vote
1 answer

flexboxgrid, width=100vw, height=100vh, scrollbars showing anyway

OK, problem is, i set the width and height of the to viewport size, but if i write any text inside

, scrollbars appear. i cant figure out why it behaves like this, i suppose i'm doing something noobish. I've made some designs just with …
TheBandolero
  • 45
  • 9
1
vote
1 answer

Flexbox line-break row only first column with overflow scroll

I am currently using flex and flex-direction row for a row of items with fixed widths which results in overflow and a scrollbar horizontally, which is what I am looking for. However, I need the first column in these rows to be full-width, while the…
dkrasniy
  • 408
  • 5
  • 12
1
vote
2 answers

Maintaing Height according to another Div

.col-6 h1 { color: white; text-align: center; } h1 { background-color: red; } .COL1, .COL2 { border: 1px solid red; }
Toleo
  • 764
  • 1
  • 5
  • 19
1
vote
3 answers

angular flex-layout performance

I want to build a responsive application with angular 4. I am checking some responsive platforms and of course one of the main options is angular flex-layout. I made some test pages with angular flex-layout and I saw that it doesn't use css…
Udi Mazor
  • 1,646
  • 2
  • 15
  • 30
1
vote
0 answers

Having an issue with flexboxgrid classes getting mangled

I am having an issue where using the below webpack with the below package.json is causing flexboxgrid classes to get mangled as shown below. Here is how some of the classes are getting generated when viewing the…
null_pointer
  • 1,779
  • 4
  • 19
  • 38
1
vote
1 answer

Is this flexbox layout possible without adding more to the HTML structure?

I was wondering if the layout I draw on the following image is possible using flexbox and this HTML structure:
Lorem Ipsum

Lorem Ipsum Dolor Sit Amet...

It would be…
MyXoToD
  • 620
  • 5
  • 13
1
vote
0 answers

Set same height in flex-box for dynamic content

In this case need to keep same height for all three columns (this is working already according to current code, ".col" get same height using flex) need to set max height of yellow div (dynamic content) for all yellow div need to be implement using…
Tharaka Nilupul Dharmabandu
  • 386
  • 3
  • 16
1
vote
1 answer

Flexbox Grid - Equal Height Columns

I am using Flexbox Grid (http://flexboxgrid.com/) and I trying to make my columns equal height instead of having individual heights. Does anybody know how to do this as I can't seem to find anything in the documentation for this.
Nick Maddren
  • 583
  • 2
  • 7
  • 19
0
votes
1 answer

CSS Grid: wrap & fit to content

I want to wrap my list and at the same time make it fit to the content like this: The problem is that each element must fit the width of its content. I've already found example how to wrap items of fixed size but it doesn't help me in my…
mr.boris
  • 3,667
  • 8
  • 37
  • 70
0
votes
0 answers

Conflict with flex-item and overflow and width

.flex-gap { --gap: 12px; display: flex; flex-wrap: wrap; margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap)); width: calc(100% + var(--gap)); } .flex-gap > * { margin: var(--gap) 0 0 var(--gap); flex: 1 1 calc(16.6666666667% -…
cabita
  • 832
  • 2
  • 12
  • 36
0
votes
0 answers

Structuring columns in HTML markup using Bootstrap Grid system

I'm creating a "stacked" image component, at any one time 4 images are visible (.demo-card). Desired behaviour: default (mobile): cards should be in a single column layout (as is currently) md (tablet): cards should be in displayed in 2 rows of 2…
cts
  • 908
  • 1
  • 9
  • 30
0
votes
1 answer

How to place an icon next to text and centering a header

I am trying to get an icon to be placed to the left of the text as in the image. Right now for some reason it is on top of the text. The icon are inside tabs with text and I want the icons to change for each tab. Even if I change the margins, they…
Daniela Sucunza
  • 5
  • 2
0
votes
1 answer

How can I specify with flexbox that two divs have to break line together?

How can I specify with flexbox that two divs have to break line together? What I'd like in the example bellow is that, when screen gets smaller, the green and the black divs always jump to a new line together without having to nest them in a new div…
Miguel Gisbert
  • 105
  • 1
  • 11
0
votes
0 answers

A grid layout with size, defined by size of its cells and gap

I have the following layout:
The styles are: .mygrid { background-color: gray; …
Shtole
  • 77
  • 6
1
2
3 4