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
0
votes
4 answers

I am trying to align movieCards side by side. But they are aligning in a column

This is my movie list component. I tried different attributes in the div section to get the cards in a row. But all the cards are aligned in a column.should i use either flex or grid.If yes how can i use them. Even i referred to many resources for…
dharani
  • 29
  • 1
0
votes
1 answer

CSS flexbox spacing issues with gap property

I am having issues with flexbox. When I use the property gap it is making the columns too wide? I am trying to create a simple 3 column row. I thought that the gap value would not affect the width set? Ie. flex: 0 1 33.33% and gap 2rem would then…
CodePlanB1234
  • 23
  • 3
0
votes
1 answer

How to create my own Responsive 12 column css grid system using Flexbox?

I want to create a Responsive 12 column grid system using CSS FLEXBOX for making my website responsive. I don't want to use any css framework instead I want to use my own 12 column grid system and with writing my own css. I want class names like…
user19043609
0
votes
1 answer

Section is Blocking (on top) Other Section

I need to make a responsive design for these 2 sections, both section is quite in the same line display. Here's both of the Desktop & tablet/mobile Resolution: I think it's because I'm using d-flex, but I still can't manage to fix it. I'm doing…
Chloronic
  • 13
  • 4
0
votes
1 answer

FlexBox: 2 Elements on the same column while flex-direction column

I have a container with 3 elements that together share a width of 100% (25%,50%,25%). If the container has less than 800px the order of the elements should be changed. #box2 has a width of 100%. #box1 and #box3 should both have a width of 50% and be…
TeaAt5
  • 63
  • 4
0
votes
4 answers

I am trying to display 3 columns in 1 row

In my shopify section I am trying to display a section like this that I can add to my homepage. The issue is that I am using a shopify liquid schema with the following code. logo-list.liquid

{{…

George Lugo
  • 1
  • 2
0
votes
1 answer

Getting DIV in flex-container to align space properly?

This is the code for my page: body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; } h1, h2, h3, h4, h5 { font-family: Helvetica, Arial, sans-serif; } header { display: block; background-color: #B22222; color:…
avenas8808
  • 1,639
  • 3
  • 20
  • 33
0
votes
1 answer

Image size not readjusting to fit within flexbox

I am using max-height for my image but it still doesn't fit within the section and overshoots. I have specified a fixed size for top level div (90vh) and under it, I am using percentages to specific relative heights. The structure looks like
Manu Chadha
  • 15,555
  • 19
  • 91
  • 184
0
votes
1 answer

Flexbox grid with 7 columns

I am creating a grid with tailwind and flexbox. Is it possible to create a 7 column grid? I know I can use width percentage but what would be the best practice here?
Naomi
  • 1,280
  • 6
  • 21
  • 40
0
votes
1 answer

Why is the mdbootstrap column not taking the full page responsive width?

I'm working on a react js project where I'm using the mdbootstrap, I'm trying to build a component similar to this the first picture is for desktop and another is for mobile users So, I was trying to achieve something similar and I started…
Raghav Sharma
  • 141
  • 2
  • 13
0
votes
1 answer

Clarity Design Grid

When I'm developing in the responsive view of a browser (e.g. Firefox: iphone X) everything fits perfectly, but when I change to the iphone X browser (Safari or Chrome) the content goes behind the browser bottom menu, and I need to scroll to see the…
PJP
  • 33
  • 4
0
votes
1 answer

My columns are working only when I giving row class

I have created a very basic flexbox layout with 12 columns. The problem which I'm facing is that my columns work only when I use a div container with class row. I'm not able to find out why it is working in that way. Can some one please help me or…
Sajjad Tabreez
  • 188
  • 4
  • 21
0
votes
1 answer

How to position elements side-by-side using flexbox when they automatically wrap without filling up the row

I have tried every solution that I am aware of to get these two footer elements to display side-by-side on mobile. I have three footer widgets on a wordpress site (www.med-tac.com) and I am trying to reorder and re-align them on mobile using the…
Alan
  • 11
  • 2
0
votes
0 answers

Bootstrap 4 Flex Box Holy Grail Layout and Master/Detail Workflow

Been working this for too long. Why is COLUMN02 exceeding the browser edge to the right? Any help would be appreciated. Thank you very much! Holy Grail Demo Details: The goal is to leverage FLEX BOX as much as possible with no scripting. So…
D4A60N
  • 187
  • 1
  • 3
  • 14
1 2
3
4