Questions tagged [flexbox]

CSS module for flexible layouts providing a broad range of options for aligning elements while eliminating the need for floats and tables.

Filter by
Sorted by
Tagged with
0
votes
0answers
30 views

How to adapt a table in СSS

I want to adapt the table to any screen. The table is given in the php code where the indentations from the cell are registered. There are several pictures in these cells. I want to display a table ...
-1
votes
0answers
33 views

It is possible to horizontaly centering nested element from different div using flex?

Using html and css I need to center two nested buttons (.btn-1 and .btn-2) located inside different div. I have a complex structure I cannot change. (I can only touch CSS cause the html is from a ...
0
votes
1answer
26 views

Child divs inside a flexbox with fixed height and overflow auto does not set dynamically its height

.container { display: flex; height: 200px; overflow: auto; border: 1px solid #000 } .child { padding: 10px; } .child:nth-child(odd) { background-color: #c1c1c1 } .box { ...
0
votes
2answers
38 views

Move div element below, after @media screen and (max-width: …)

I am currently learning basics of web development and I wanted to create a simple webpage with a navigation bar, two main div elements and a footer. Ideally I would make it responsive to the window's ...
1
vote
1answer
26 views

Width and Height In react-native

please explain by what principle view sizes with element style are formed. I learned FlexBox however it breaks all my understanding. code export const App = () => { return ( <...
2
votes
2answers
32 views

Angular Reactive Forms template

In the image below, the left one is the current form but I want it to look like the right one (using Flexbox?). How can I achieve this? I havn't been able to find a solution. I am using Angular ...
2
votes
0answers
21 views

How exactly is the height of two divs with flex shrink and flex-basis values calculated? [duplicate]

I have html and css as below. .container { height: 200px; background-color: grey; display: flex; flex-direction: column; } .top { flex: 0 0 10%; background-color: red; } ...
-3
votes
0answers
17 views

Bootstrap Flexbox alignment [closed]

This might be an stupid question, but i dont know anymore what i could try to avoid this issue. I created an HTML template in Bootstrap Studio. Now i receive an problem with the Flexboxes, i guess. ...
1
vote
1answer
46 views

Bootstrap4 problem : proper column structure inside and outside a container

So i'm working on a task and can't seem to find a proper solution to my problem. I've already made a design inside photoshop to show what I want to create : Photoshop Design. So basicly I want to ...
1
vote
1answer
32 views

how to horizontally align bootstrap flex items in different div flex containers

I was wondering if there is an efficient way to align flex items in different(!) div flex containers so the flex items have the same width like below: <link rel="stylesheet" href="https://...
0
votes
1answer
25 views

What am i doing wrong with flexbox trying to align these images?

So i am trying to align images one next to another with display flex but they're not working, tried a lot of things but none of them helped Here is the code : <div class="container"> ...
0
votes
1answer
30 views

Trying to make a Flexbox inside a flexbox

So here is the trouble Im having. Im kind of trying to make a flexbox inside of a flexbox. Im not sure how to explain it so I drew it out to try to make it easier. It will start it an outer div that I ...
1
vote
1answer
41 views

How can I achieve a reversed stack of elements in a scrollable container in Google Chrome?

I have achieved the effect I desire with the code below, but it only seems to work in Firefox and Edge. In Chrome, the elements are stacked as desired, but there is no horizontal scroll bar so the ...
0
votes
0answers
15 views

Flex item scrollable content with tailwind css [duplicate]

i'm using flex and tailwindcss with default settings. this is my code: Jsfiddle the problem is that my main tag, when content get full, navbar and player loose their height. and i want to make my ...
2
votes
1answer
26 views

Why can't this flexbox be scrolled?

I'm trying to understand why the following code does not creates a scrollable flexbox. var firstData = ["One", "Two", "Three", "Four"] FillDiv(); FillDiv(); $("button").on('click', function()...
0
votes
1answer
17 views

Why media query wont display flex for my mobile navigation? And I still don't get how to structure properly? Any guidelines suggestions or advice?

I am trying to build my website. I need to take the existing code for a website I already made, and make it compatible with mobile device viewing. For mobile display, the header is supposed to be ...
0
votes
0answers
35 views

Why does a div two layers deep into flexboxes not work with overflow:auto? [duplicate]

This is a bit of "I understand what's happening but not why it's happening" question There is a sidebar div with defined height. Inside it there is a header div and then a flex-grow:1 panel div (...
0
votes
2answers
32 views

How to let a image cover another image?

I want the crown icon cover the photo image, so I use bottom. to change the position. <View style={{ alignItems: 'center' }}> <Image source={CrownIcon} style={{ width: 28, height: ...
1
vote
3answers
46 views

Trying to align 3 images and 3 texts on the same line with flexbox

I'm trying to align the 3 li items, but I'm not sure what I'm doing wrong. I've tried different options of flexbox but nothing is making the lines of text move up, i've tried putting them in tags but ...
0
votes
1answer
37 views

How to marginBottom view background?

I want to cut a little bit background color to let the text half with it. I try to use marginBottom, but the text position will move with it. return ( <View style={{ flex: 1, backgroundColor: '...
0
votes
0answers
25 views

flex grid ruins progress bars

I want to get the result: **** **** however I either get: ** ** ** ** or other stuff like that. I want to keep the 'progression bars' at full length and 2 by 2, not all ...
-1
votes
3answers
64 views

How can I have a flexbox layout with each column header the same size regardless of content? [duplicate]

I would like to align 3 columns (headers and content) with CSS like this: (Headers and content needs to be aligned) My try: https://codepen.io/vanicf01/pen/XWJPRLO?editors=1100#0 HTML - this cannot ...
0
votes
0answers
38 views

How to scale a square CSS grid to respect parent width and height

I am trying to fit a recursively generated grid in container, but at each depth of the recursion the overall size of the grid increases and eventually leaks out. I am able to restrict the width of the ...
0
votes
0answers
20 views

Multi-line text in flex items of an inline-flex container takes more space than necessary [duplicate]

I have a table with some elements inside of the table header. The th elements might have a specific width specified. There is a wrapper element with display: inline-flex inside of the <th>. ...
1
vote
2answers
43 views

How to make all items in a div equal width without text wrapping?

I am trying to create a row of three buttons, where all the buttons are equal width. If the width of the screen gets smaller, the buttons should shrink to fit the screen. Once the text starts to wrap ...
0
votes
1answer
30 views

How to make vertical children of flex container to have independent widths

I believe this is not possible with flexbox as I have not found the way to do it, but maybe I miss on something. One parent container has two children containers - one below another. The width of ...
1
vote
1answer
19 views

Bootstrap 4 - Moving 1 element to opposite end of container

I've tried to find if a similar question has been asked before but couldn't find exactly this same issue. I am trying to move the phone number from the left, with the other elements, to the far right ...
0
votes
1answer
17 views

Angular function return variable wrapped in quotes displays as text instead of renders/using different scheme that does not break css

I have in my Angular template: <ul> {{ getRoundHtml(roundIndex) }} </ul> which calls a function in my component: getRoundHtml (indexRound){ this.roundHtmlStr = ''; console....
-1
votes
1answer
27 views

Align two images in the middle with text on the opposite sides

I'm trying to recreate the image below where two images are in the middle with text on opposite sides. I've tried a few different things, flexbox, no flexbox, floating elements and haven't been able ...
2
votes
2answers
59 views

Why are my divs all displaying in the same location on hover?

I would like to create a top menu. I have created this which gets the components to become visible when they have to, but my problem is that I don't know how to get each menu-sub-item to display under ...
-2
votes
0answers
25 views

Most common way to responsive web sites [closed]

I currently using the bootstrap 4 grid for my projects and it works just fine. But I think if the boots trap grid will serve me well in the future or should I start using other more flexible grid. ...
0
votes
2answers
35 views

How to fix display: inline-flex scaling problem? [duplicate]

I have a problem with that scaling of :after when text in button is longer than one line. It's the business of display: inline-flex. Does anyone know how to solve this problem? Small width of div box ...
2
votes
3answers
62 views

flex can't use two justify for one div

I need a card list layout for this I use flex. in large device everything is ok but when device becomes small and two cards can't be next to each other and go to the next line, my content it's not ...
1
vote
0answers
26 views

Make Flex-container (which inside another Flex-container) responsive [duplicate]

Why, when decreasing the height of the external container, does the height of the top-container and its elements (# first, # second,# third) not decrease? Moreover, if you set the height directly for ...
0
votes
2answers
34 views

React Native view scaling

So I'm developing a cross platform React Native app, the app is using allot of images as buttons as per design requirements that need to be given an initial height and width so that their aspect ...
0
votes
0answers
32 views

Is it possible to use CSS flexbox to shrink/stretch content on both axes, vertically and horizontally?

It's my understanding that flexbox containers and their child items flex fully along only one axis, depending on the value of the flex-direction property, row or column. With a "row" container, you ...
1
vote
1answer
31 views

How can I have auto-width content in flexbox without destroying the layout? (take as much space as necessary and as little space as possible)

I have an example on JSFiddle on how I want to solve my issue with flexbox: I want the left column to fit the width accordingly to the content - break a line if the text is too long. Unfortunately it ...
1
vote
1answer
35 views

Bootstrap display flex and javascript windows.load

I'm no expert at front end dev. I'm experiencing an issue with bootstrap display flex and a piece of javascript code. Below is a bootstrap snippet with display: flex and some javascript that does some ...
0
votes
0answers
26 views

Flexbox grid - should I learn in 2020? [closed]

I have a question about flexbox grid. I started Frontend Masters course about flexbox and grid, and it looks little old (accesibility problem with grid etc) Next topic is flexbox grid. It is good to ...
0
votes
1answer
44 views

Flex elements don't work. How can i fix my code to solve that problem?

Why can't I use justify-content: space-between or space-around? .mobile-page-wrapper { display: flex; flex-direction: column; justify-content: space-between; } .mobile-nav { ...
1
vote
3answers
32 views

Changing the size of individual element in flexbox

How can I stretch the items inside a div to fill the area, and is it possible to have the items in different sizes without having to modify individually using :nth-child(x). For instance: first, third ...
3
votes
0answers
20 views

Vertical alignment of button with image icon on Firefox [duplicate]

I just realised Firefox doesn't render a button with icon correctly. Because the icon is an image, I made the button flex (in real life an inline-flex). Given this basic markup: button { font-...
0
votes
1answer
40 views

Flexbox image with caption in column style

I am currently making a carousel of images. (Carousel is based on a library, not in the scope of this question as i also cannot get it to work outside the carousel). What i am trying to do is the ...
1
vote
5answers
89 views

Responsive table with first column minimum width; second column stretch; third column always at the end; how can i do that?

I need a table in html The mockup below shows which cases should be covered. The table shouldn't overflow the screen, even on small devices (mobile support) The first row should be as small as ...
0
votes
1answer
31 views

Add Hover effect on Figure

I'm currently working with a figure element and figure caption and I wish to make it so that when hovered over the image will have a 50% grey opacity overlay with white text, that when clicked will ...
0
votes
3answers
39 views

unable to style elements with css flexbox

I am having difficult to style the elements inside a div in vertically aligned position. Here is the snippet. I am kind new to CSS flexbox. @import url(?/questions/tagged/flexbox/"https://fonts.googleapis.com/css?family=...
1
vote
1answer
52 views

Have a flexbox hidden like display:none and then show it later

My issue is, I have a flexbox <style> .popup { height:50%; width:50%; background-color: rgba(99,148,236,0.7); border: 2px solid white; border-radius: 5vw; display:flex; ...
-1
votes
2answers
48 views

How to create 3 column layout using css without using grid(For ie 10 compatibility)

How to convert following HTML, similar to the image? Do not wrap elements inside another div. My purpose is to change the position of each elements to left, right or top using css only. Is it ...
1
vote
7answers
115 views

Space-between elements in container [duplicate]

So I have a container with label text and checkboxes, now this is what I currently have body { display: flex; justify-content: center; } .container { background-color: yellow; ...
-6
votes
0answers
31 views

Guys please tell me what is the best way to design responsive layout in angular without adding media queries?

is there any best way to handle responsiveness in angular 8 without adding medai queries??