Category "flexbox"

set width contaner to only span content width flex item fixed width and height

how to adjust flex container to only span content width (width of flex items). In this excercise I put 3 flex item (span) in a div container and set width and h

How to align one flex child as flex-start and other in center?

I have a sidebar that is set to flex with direction column. I am trying to get my menu ul to be vertically centered, and my .logo-container to be on the top of

Prevent flex box from growing

I have attempted all solutions I could find. flex-grow, flex-shrink, align-items:flex-start, flex-basis, and setting a definitive width:50%, etc. and I can't se

Stop floating elements next to Bootstrap rows from affecting alignment

I have a div element whose children are Bootstrap rows, and am trying to float an element to the right of these (as a sibling element to one of the rows). The i

Elements Not Centering

I am making a website for a client of mine, but I have a problem. I want 3 buttons with text pop up but they won't center. When I checked the inspector I could

FlowType.js and flexbox doesn't work together

so Iam using FlowType.JS it works and the text become I mean the the text become responsive. but if I wrote display: flex; or width: fit-content; the FlowType.J

How to stop flex from stretching to 100% width?

I have a section with 2 columns pulled to center in flexbox, but for whatever reason the container doesn't wrap itself around them horizontally and instead fill

How to align the icons on the right to the center of the navigation bar?

I want to align the social media icon on the right in the center of the navigation bar along with the navigation link and logo. I'm trying to do something like

Not able to make image responsive using tailwind css

Here is the code :) <div> <div class="w-full m-4 rounded-xl flex flex-wrap shadow-md border-2 place-self-center"> <div class="flex flex-1"&

Flexbox first element on center and the rest below

There is a good chance someone has asked this question already, but I can't seem to figure out the right keywords to find the answer. I want my first element in

How to react clicks on an overlay flexbox(Material UI Grid) element

I have an overlay element, the overlay element is a flexbox container, there is only one item which is centered, so there is space around it. If someone clicks

Vertical image Resize. (Flex or vh)

Hey! Thanks for reading! I've got a web-app login screen. I'm focusing on creating a responsive app-like login page. (no scroll etc) Issue description: With a v

A grid layout with responsive squares

I am wanting to create a grid layout with responsive squares. I feel like I should be able to do this with CSS Grid layout but having trouble setting the heigh

MUI - V5 Grid System spacing not producing gutters between Grid Items

I am just learning Material UI with react. Starting with V5. I have a basic 12 column grid just to learn this. The spacing is just not working properly. It is j

Can't apply overflow in a flexbox [duplicate]

I'm struggling to make overflow-y works within flex. <div class="flex h-full flex-col"> <mark class="bg-red-900 p-2 font-semibold t

Bootstrap 3.3.7 "row" causing horizontal scroll bar

Ok ok, I know. This question has been asked a lot. But, so far, I have not found a working solution. I boiled my page down to nothing but this: <div clas

How can I order CSS columns horizontally instead of vertically for auto height elements?

Each of my columns has different heights. How can I order my column to horizontally instead of vertical using CSS? Also on hovering of each item, the height wil

Flexbox - center vertically second row

I'd like to position second row in the center of container, but I can't figure out how to make it. align-self works in horizontal direction only - even if flex-

Two-column vertical-numbered lists with Flexbox

I'm sure this must be a duplicate, but I cannot find any related answers because so many people are referring to flexbox elements as "lists", when they're not a

How to move Material UI tabs to the bottom of a parent like AppBar?

If you have <Tabs that are inside an AppBar, what would be the best practice for having the tabs at the bottom of a parent, so like at the bottom of the head