Most voted "flexbox" questions
Flex-box or flexible box layout is a Web CSS3 layout model that allows responsive elements inside a container to be organized automatically, depending on the screen size.
Learn more…108 questions
Sort by count of
-
5
votes1
answer40
viewsHow to scroll with 3 Divs
I’m facing a scroll problem .div-pai { margin: 30px; background-color: red; width: 300px; height: 300px; padding: 3px; overflow: auto; } .linha { padding: 5px; background-color: yellow; display:…
-
4
votes2
answers618
viewsGrid styling for gallery using flex display
Well, I’m trying to create a gallery, display:flex, how can I accomplish this? I thought about using the float, but I remembered that the flex display ignores any float :/…
-
4
votes1
answer106
viewsWhat is the difference between align-items and align-content?
Is there any difference between the align-items and the align-content?
-
4
votes2
answers1399
viewsIs there a difference between flex-Basis, flex-Grow and width? What is the recommendation for using them in a Flex container?
I have a technical question about using the property flex-basis, flex-grow and width. Note that in the image below I got the same result using the 3 properties. Then I was in doubt, if the 3…
-
4
votes1
answer80
viewsDoubt about CSS Grid and Firefox
Good night. I recently started to study CSS, but when I was doing an exercise I came across an unusual situation, I am using CSS Grid along with Flexbox, when I review my site in the browsers Opera…
-
3
votes2
answers3180
viewsWhat’s the difference and when to use Flexbox or CSS Grid?
First we had the Flexbox as a new solution for building and responsive layouts. More precisely on the part of grids. Now there is little time the CSS Grid. My question is: What is the difference…
-
3
votes1
answer143
viewsFlexbox replaces the GRID?
I’ve been taking a look at the flex properties, and I realized that they do the same thing as the grid or am I wrong? If so, what difference does it make? When I should wear one or the other ?…
-
3
votes1
answer451
viewsbootstrap or grid-template
Speak guys, I would like to know what is more recommended to use on a site: Bootstrap, Grid-template or flexbox. I have this doubt because when looking at the websites that used Bootstrap the code…
-
3
votes3
answers1075
viewsOrganize Divs into blocks over each other?
I would like to organize my Ivs in column form, but not side by side, but rather on top of each other. Usually when using float: left or display: inline-block the elements are placed side by side up…
-
3
votes1
answer435
viewsWith flexbox, center list aligning items on the left
I’m using Bootstrap 4 as documentation (https://getbootstrap.com/docs/4.0/utilities/flex/). Using the class Justify-content-center I have the following result: My div is with the classes: d-flex…
-
3
votes1
answer599
viewsFlexbox + CSS GRID
People would like to know if there is any possibility of using Cssgrid with Flexbox. display:grid; display:flex; I mean using both in the same project, if not, which one would you recommend me to…
-
3
votes2
answers9890
viewsHow to "break" div in two columns?
I am using Wordpress, my Blog section is organized as follows: I’m simply using {display: flex; justify-content: space-between;} that in this case the result is like the first example. The result I…
-
3
votes1
answer648
viewsIn Flexbox why does Justify-self not work on the children of a parent with display:flex?
I have a question about flexbox and individual child alignments. I wonder why the justify-self does not work when applied on the child of a parent with flex, however the align-self works normally...…
-
3
votes3
answers45
viewsProblems centering content when working with flexbox in CSS
I’m trying to learn CSS and I came across flexbox and I’m not getting to work with the tutorials I see on the internet. The goal was to center, axis X and Y, 3 squares on the page, but I could only…
-
2
votes1
answer439
viewsFlexbox: Is it possible to force 100% wide on a daughter div with space-between on the father?
I have the following problem, I have a div parent encompassing three elements, and she has css: .pai{ display:flex; justify-content:space-between; width:400px; } But I wanted the first daughter to…
-
2
votes1
answer1067
viewsHow do I align Divs from left to right from top to bottom with flexbox?
I just met this property and I need to create a social-network with the possibility of including videos... in case I would like the last one added to be at the top left and so on... that’s my code…
-
2
votes1
answer306
views<fieldset> flex-wrap does not work properly in Chrome
I’m using the CSS property flex-wrap in some <div> so that I can show them or hide them without breaking the fluidity of the layout. However I noticed that when my container is a…
-
2
votes1
answer398
viewsFlexbox leaving empty spacing
I’m studying flexbox and decided to create a menu, everything works well, but this getting a spacing without me having given, so I know the flex: 1 takes up all the space, but that’s not what is…
-
2
votes1
answer52
viewsAlignment of items with Flexbox
I want to create a layout in which the first div uses 100% of the width of a section and the others divs use 50%, creating a block. However, by adding more than 3 divs they don’t line up like in the…
-
2
votes2
answers157
viewsAlign element items according to class using flexbox
I have the following menu: body { padding: 1rem; } .menu { display: flex; padding: 0.5rem; border: solid 1px #000; } .item { border: solid 1px #444; padding: 0.25rem; } .item:not(:last-child) {…
-
2
votes1
answer53
viewsAlignment with two elements in the flexbox: One centered and the other at the end of the flexcontainer
I’m trying to align two elements in the same line: one centered and the other at the end of the flex container. I get the expected result with this code: <div class="row"> <div…
-
2
votes0
answers35
viewsImage expanding through my div
Hello, I’m starting in CSS, and I decided to create this layout, but after setting my flexbox my central image (given) this occupying all the space of the div, as if there was another image behind ,…
-
2
votes1
answer24
viewsWhat is the behavior of the "order" property when not defined?
My goal is this: The site has a shopping area that displays 3 different plans. When this plane area is accessed on a screen larger than 800px wide, it is displayed as follows: The plans are laid out…
-
2
votes1
answer102
viewsPlace menu items inside the div
I have the following code: .top-content { background-color: #fff; border: 1px solid #e07b39; height: 69px; } .nav-list { display: flex; justify-content: flex-end; list-style: none; } <div…
-
2
votes2
answers76
viewsHow to prevent a div with flex display shrinks the child elements?
I made the following example code: .container { width: 200px; height: 50px; background-color: #f00; display: flex; flex-direction: row; overflow-x: scroll; } .div1 { width: 150px; background-color:…
-
1
votes2
answers1248
viewsFooter go to the bottom of the page
My footer has a set height(height: 40px;). When the content of the page itself is small, the remaining area after it is all blank, because of the background, giving a bad aesthetic to the site. I…
-
1
votes1
answer3452
viewsAlign text at the bottom within a div
I’m creating a layout and distributing several <div> with the flexbox feature, someone would tell me how to do for the contents of this <div> that it will be a word, to be aligned to the…
-
1
votes0
answers81
viewsForce table header to follow width of other columns dynamically
I’m using flexbox to do everything on the site, including the table, first tried using the basic structure of a table (thead, tbody and tfoot), but I couldn’t, so I tried to do it with simple rows…
-
1
votes2
answers336
viewsflexbox: space-between of 2 children starting at the middle and then ending
I’ve recently been contacting flexbox, discovered the property Justify-content: space-between; but I was wondering if it’s possible: <div class="pai"> <div class="filho1"></div>…
-
1
votes3
answers638
viewsBlock positioning with FLEX-BOX
Well, I’m doing a site where in the home there are 4 modules, the first two have to be under each other, so far so good, except that the third module has to be next to these two as if it were a…
-
1
votes1
answer483
viewsVertical and horizontal alignment do not work on bootstrap 4 with flexbox
I’m doing a bootstrap course 4, the teacher uses and teaches that there is a class flex-items for alignment, to align vertically for example, we could use something like this: flex-items-md-middle…
-
1
votes1
answer1116
viewsOverlay text on an image with flex box
I’m having trouble overlapping the text in an image using flex box, could give me a light for this problem. *, *:after, *:before{ margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing:…
-
1
votes1
answer918
viewsFlexbox Align-items does not work
I’m having a problem, I don’t quite understand the concept of Align-items in flexbox, I don’t know why it’s not working, follow code: <div style="display: flex; align-items: center;…
-
1
votes1
answer184
viewsSubmenu the same width as the menu
The submenu is the size of the text, I would like it to be the size of the menu header { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px…
-
1
votes1
answer434
viewsFloat elements with CSS Grid
Good morning friends. I have the following problem: I need to make the elements float with CSS Grid without having a specific Row defined. For example, in the following image, there should not be…
-
1
votes1
answer45
viewsHeader does not get responsive in 320PX using Flexbox
I am starting to use flexbox but I have a giant problem that I cannot solve in several layouts. Both the header and Nav and li are hidden in the Mobile Solution, Iphone 320x568 and there is a white…
-
1
votes1
answer2564
viewsJustify-content-center is not centering content on my bootstrap
I have the following code structure <div id="container" class="container-fluid"> <div class="row align-items-center justify-content-center"> <div class="col-2"> <figure…
-
1
votes3
answers28
viewsI can’t leave the ROW imgs with flexbox
I can’t put them in Row, only if they’re wide enough to be right next to each other. *{ box-sizing: border-box; } #countainerslider{ display: flex; flex-flow: row wrap; width: 100%; height: 560px; }…
-
1
votes1
answer35
viewsHow to center content with dynamic CSS dimensions?
I am using Bootstrap 4, which is based on flexbox(dynamic properties/dimensions). I created a Datapicker, with an input and icon on the right side. <div class="col-md-3"> <div…
-
1
votes3
answers128
viewsLines with two items according to screen size, is it possible?
My intention is to have lines with two items, and these items should have a width according to the screen size, ie screen 500 , I calculate 500/2 - espaços. It would be something like this. My code:…
-
1
votes2
answers2217
viewsNavigation menu with flexbox
When I create a list li navigation nav, the elements align without spacing and remain next to each other with padding-right = 0. That list is nestled in a header who owns display:flex to organize…
-
1
votes1
answer985
viewsCenter a div to the center of the screen in flexbox
I’m trying to make a copy of the website https://champion.gg/ using grid/flexbox and would like the Champion search box name centered with the page, same as the original site. I applied a…
-
1
votes1
answer510
viewsHow to align flexbox buttons in Angular?
I’m having trouble aligning the buttons on a screen using flexbox. I’ve tried several property combinations fxLayoutAlign but I can’t get the expected result. What I want to do is align 3 buttons as…
-
1
votes1
answer185
viewsFlexbox - Image alignment
How do I leave the image in the print next to the text using Flexbox? follows the code. body { margin: 0; padding: 0; box-sizing: content-box; } header { display: flex; justify-content: center;…
-
1
votes1
answer140
viewsCentering text in a responsive way
Good afternoon! I am building a project that currently has the following problem: The text Authentication is not getting totally centralized. I thought to use margin-right (this solution works only…
-
1
votes1
answer245
viewsI need to make a flexbox table
I made the following code I am not able to center the images that are in the middle and also I am not able to padding the last column I need to do something like it is in the image. .container {…
-
1
votes1
answer80
viewsFlexbox Horizontal List
Good afternoon, everyone! I’m looking to line up a list ul so that their li stay left and last li stay right. I’m not able to do this, someone could help me. I could make it easier if I split this…
-
1
votes2
answers68
viewsMove element up in 50% of its size
How could I do a vertical overlay of Flexbox? I want to make half the circle inside the above item. html, body { height: 100%; } body { background: #8844ee; } .card { height: 100%; display: flex;…
-
0
votes1
answer233
viewsMake this grid with Flexbox
People I’m having a great difficulty to create with Flexbox this grid, as the image below. I need it to be no fixed size because when the images are seen on the phone will be in the same position…
flexboxasked 8 years, 1 month ago Joao Nivaldo 1,229 -
0
votes1
answer425
viewsAlignment with flex box
I need the image to be positioned on the left until the menu activates its " responsibility " ( and then it normally becomes ), but I tried to add it in another field but the menu broke, I tried to…