Category "flexbox"

make responsive flexible images that are rotated on a single line in tailwind css?

i want to recreate this effect that is visible on https://www.tella.tv/ in tailwind css: i tried to inspect their source code but i couldn't make it work in my

How can I make the text and image be on the same level?

I am trying to make the text and image be on the same level but when I add the text the image moves, I am unsure on how to fix it and looking for help. I though

Is there any way to use flex wrap to wrap on only one column?

Let's say I have 3 divs... HTML: <section class="features"> <div class="item"> <h3 class="item-name">Item1</h3> <

Cannot get div items ordered out of sequence with bootstrap

I have included the bootstrap 3.4.1 in my Angular 12 project and placed this HTML on my app.component page: <div class="container"> ... <div class=

Gallery in flex row withe backgrond image and text on it

.row { display: flex; flex-wrap: wrap; padding: 0 4px; }

Flex boxs overlapping in direction column

I am trying to make a footer that displays a button on the left, and 3 social media icons on the right and a copyright text below it which I seem to have workin

Using CSS border-radius (rounded corners), how can we prevent the rounded corners from disappearing if the image is scaled down (max width/height)?

Consider this scenario: An image is centered both horizontally and vertically using a flex box The image has a CSS border-radius configured (rounded corners) Th

How to set the icons to the bottom of each card that must be present inside the card ,for my case it's overflow and crossing the some of cards?

when onclick functionality happens on the CLOSE button it generates some cards ,each card contains some icons at the bottom that needs to be fixed position(perf

How to right align text inside a div for mutiline content using flexbox

I'm using flexbox model to align div items to the right. It works when the items has only one line, but when I have more than one line, only the first line is a

vertical align heading with flex container

In this excercise i expect to put header h2 on the same vertical line with the first card from left. each card is a flex item width width 160px in a flex contai

Create block with several columns and rows with Flex

Help me please to create block like on screenshot: Now I created 2 rows and has some problem. I don't know how to delete distance between rows. Need to make it

Is there an Angular version of the React-flip-move library?

I didn't find any equivalent in order to animate flexbox, in particular when elements are wrapped and jump to the next line. Thank you

React native margin: 'auto' working on web but not on device

I am building an application which uses react native on expo dev. I am trying to add a button in the top left corner which is adjacent to some text o the right

CSS layout, flexbox

The "red" div (seen in the image) is in the "head" div. I'm using flexbox to positioning simply like that: #head { display: flex; justify-content: center;

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