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
-
0
votes1
answer30
viewsI can’t get an element to wrap in a responsive layout
Good afternoon, I’m trying to make a layout responsive but I can’t get the product description to go under the image when the available space is too small. I tried with display:flex and float but…
-
0
votes2
answers538
viewsImage does not change size - flexbox
good afternoon. I’m trying to get the 3 images aligned in a single line when the screen grows, but my attempt to change the image size to 33% is not working. I would like to put the title PORTFOLIO…
-
0
votes1
answer42
viewsFlexbox problem in Firefox
I was making a Form that has to stay horizontal and that the inputs within it are responsive. I made the code in Chrome works perfectly however my problem and with Firefox, simply inputs do not…
-
0
votes1
answer15
viewsDoes not set display to flex when you hover over
Even passing the mouse over the class name does not appear .img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); } .img:hover { filter: grayscale(0%); } .img:hover .name {…
-
0
votes1
answer107
viewsWidth Percentage Flexbox
I’m having trouble defining items using Flexbox. What I need to do is leave mine item in 90%, I’m currently doing so, but it doesn’t work. <View> <ScrollView horizontal> <View…
-
0
votes1
answer873
viewsHow to organize data in 3 columns without breaking layout using CSS Flexbox?
I have a list of items (ul), and each item occupies 33% of the screen, thus forming a horizontal list of 3 columns. When there is no more space in the horizontal, it forms a new line, something very…
-
0
votes1
answer92
viewsFlexbox: Is it possible to control the amount of items aligned with "space-between"?
I have the following case, a father div with 5 daughter Ivs, and I need them to line up two by two using the space-between in the father div: .pai{ display: flex; justify-content: space-between;…
-
0
votes1
answer4481
viewsFlex line break
I have a list of videos that I display on my screen dynamically with java script. It’s a div tag that has the videos class. However the list does not break line when the size exceeds the size of the…
-
0
votes1
answer57
viewsHide a HTML5 and CSS button when on Smartphone
I made a responsive web application, which when you arrive at Checkout has two buttons: Print and Save. Only that the user (customer) on the smartphone clicks to print, even if there is no printer.…
-
0
votes1
answer1047
viewshtml and body height 100%
You guys, good morning! I am using flexbox, and saw that, to center some div on the screen, div in the case created inside the body, to align with the align-items and Justify-content (Using both…
-
0
votes1
answer261
viewsTabbar React Native
I’m having trouble positioning a component of tabbar what I’m doing. Home js. import React, {Component} from 'react' import {View, Text, ScrollView} from 'react-native' import Header from…
-
0
votes0
answers163
viewsList of products with Carousel and flexbox
I am in need of a help to display a responsive product list that initially will be 4 x 4 on computer screens (can be changed as needed). The code I have displays the flex inline items, but I need it…
-
0
votes1
answer113
viewshow to color 3 by 2 grid boxes in css
I have the following html code: <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div>…
-
0
votes0
answers219
viewsHow to create one box inside the other using div
I have the following html code: .outer-box { width: 300px; height: 250px; margin: 50px auto; background-color: black; } .inner-box { width: 200px; height: 200px; margin: 0 auto; background-color:…
-
0
votes1
answer30
viewsDo not adjust menu when submenu appears
I’m starting with flexbox, I would like to make a menu that does not adjust the width when submenus appear: /* Navigation - menu style */ nav ul { padding: 0; } nav ul li { list-style: none;…
-
0
votes2
answers50
views -
0
votes0
answers72
views -
0
votes1
answer1059
viewsHow to place image and text next to Flexbox?
Eae guys I’m having difficulty positioning the image and the text BESIDE the image. I’ve tried table but it is not responsive. I tried ul/li and I can’t position. I’m using Flexbox. Any…
-
0
votes1
answer127
viewsCSS/SCSS: Generic validation element accompanying input format
I’m having a problem on my style sheet. I have a generic Input as shown below: I put an element to validate my form, the validation this OK, but I’m having problems in alignment, because if I…
-
0
votes2
answers429
viewsProblem with flexbox
My intention initially was to divide the header in 2 so that one part remained on the left and the other on the right. Then I put a flex-start and a flex-end, but it didn’t work out. I’m trying to…
-
0
votes0
answers45
viewsjustifyContent: 'flex-end' does not align at the base
I am trying to add a product value bar at the bottom of the application, using the justifyContent: 'flex-end' but the content does not go down, it is pasted in the View that comes above. The code is…
-
0
votes1
answer186
viewsDivs with FLEXBOX do not align correctly
I am new with FLEXBOX and I am developing a layout that would follow this structure: But I was only able to achieve that result: .container { width: 100%; background-color: #CCC; display: flex;…
-
0
votes5
answers217
viewsOverflow of text in flex elements
Hello, I have a problem with making the content I have inside the div with the class "box-center" inside the div Pai "wrapper". Someone can tell me compo I can solve the problem, I’ve tried the…
-
0
votes1
answer256
viewsPositioning with display: flex
I was doing an exercise page and I had a question with display: flex. Take the example. I have a DIV centered and within it others DIVs underage. Below the HTML <!DOCTYPE html> <html>…
-
0
votes2
answers369
viewsFlex vertical alignment
I can’t align the blocks vertically once the line is broken, they’re too far apart: <style> body{ background:black; } .flex-start { align-self:flex-start; } .wrap { flex-wrap: wrap; }…
-
0
votes2
answers59
viewsHow to create a height div with a prescribed value that decreases when redirecting the screen
I’m having difficulty creating a div in which the width is 580px with the 767px media query, when I decrease the screen the div remains fixed at the same height value. How do I get gif to follow…
-
0
votes1
answer202
viewsFlexbox nos cards Bootstrap 4
I’m trying to show two cards even on smaller screens, however when it comes under 576px it seems to flout the lower rules and displays only one card per line. What am I doing wrong? I have the…
-
0
votes1
answer38
viewsHow do break the children aligned with flexbox?
How do I get kids 4 5 6 below 1 2 3 when the site is in tablet mode ? <!DOCTYPE html> <html lang="pt-br"> <head> <title>flexbox</title> <meta charset="utf-8">…
-
0
votes1
answer76
viewsHow to "misalign" Ivs with Flexbox?
Good night, you guys. I’ve been taking a beating from the flexbox for a long time, as I can’t "misalign" my Ivs and leave them without vertical space when one div is larger than the other. Does…
-
0
votes1
answer194
viewsProblems defining sizes in flexbox items
I am a laywoman in flexbox, and I have difficulty in aligning the items inside the flex, I determined size for them, but when it comes to positioning, they don’t look the same, they always look…
-
0
votes0
answers136
viewsHow much of each flex item will the flex-Shrink property reduce when items have different sizes?
Everybody, good to you? I am studying the CSS flexbox and in the part about the flexibility that each item can have I have the following question: In the attached example, the items exceed 150px of…
-
0
votes2
answers197
viewsHow to center and change order in flexbox
I need to do something as it is in the image only that I am not able to change the order of the second column and center the text and the title also I am not able to put that gray line. body {…
-
0
votes1
answer78
views -
0
votes1
answer986
viewsFlexbox max-width 100%
I’m studying about flexbox and I tried to put together a structure with flex layout to which I have a container that fills my entire page, inside this container I have two elements, a sidebar…
-
0
votes1
answer67
viewsHow to remove the space between two Divs?
I have already researched here by SOF but the problems that appeared did not resemble mine, so I would like to know what I did wrong here: I want to know how to remove this space between the two Ivs…
-
0
votes1
answer35
viewsChange column height while maintaining CSS base
I am having problems gradually increasing the columns. I want the result to be the same as the image below: I tried to change the height of each one, only the base is increasing the width (which…
-
0
votes1
answer18
viewsI needed help with flexbox positioning
<div class"container"> <header> <nav class="menu"> <h1 class="logo">Commerce</h1> <ul class=menuLinks> <li><a>Option1</li></a>…
-
0
votes1
answer24
viewsMake the image height exactly the same as the article?
I would like the height of the image to be adjusted to be identical to the article in such a way that if I add or remove some paragraph the height of the image would increase or decrease equally,…
-
0
votes1
answer29
viewsbehavior of nested containers
Because the text-align=center of a container also reflects on your container intern? .container-externo { border: 1px solid red; display: flex; text-align: center; } .container-interno { border: 1px…
-
-1
votes1
answer81
viewsUse of flex in sub-items with different parent elements
I’m using the flex to align all the items equally, however, the sub-items of each of them do not align equally, I used the stretch to align and gain the size according to the largest, but I don’t…
-
-1
votes1
answer60
viewsAlign div inside a Box
I’m using flexbox, inside the father div I put a div with text, initially is positioned at the top, I want to position this div at the end of the father div. But when I put position relative; and…
-
-1
votes1
answer374
viewsTextinput formatting problem in React Native
I have the following React Native component which is a screen to fill in data from an activity: import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, Switch,…
-
-1
votes2
answers6921
viewsCss flex element spacing
Hello, Someone who can help me build a static grid if you can call it that: What I want is to be able to add 3 blocks per Row these with a fixed size equal, with tendency to grow vertically. And…
-
-1
votes1
answer340
viewsHow to leave the image on the left and the text on the side
Good Afternoon, I’m doing flexbox using the IGN Brasil site as inspiration and I want to do something like this: Where the image is on one side and the content is next to it, I tried to use display:…
-
-1
votes3
answers133
viewsCreate multiple dynamic Lis columns with flex-Direction: column; leaving the first child with width proportional to the number of columns
Goal: Create multiple dynamic columns of lis, but the first child has to have the width of 100%. Problem: The first child is breaking all the columns of lis ----------------------------------------…
-
-1
votes1
answer115
viewsHow to properly align an item gallery with flexbox?
I’m starting to use CSS flex, and I realized that when we centralize a container, it looks like the elements inside the container seem to be centralized, but if I align it to the right, the…
-
-1
votes1
answer33
viewsParagraph within flex-item overflowing
I’m doing a flex layout and in the paragraph inside the article, the text is not getting inside the card but is overflowing. What’s wrong with my code? HTML: <!DOCTYPE html> <html…
-
-1
votes2
answers139
viewsBreak the DIV into 3 or more with columns of different sizes
What is the best practice to get around this image problem below? .flex-box { display: flex; align-items: center; justify-content: center; flex-flow: wrap; } .container-box { background-color:…
-
-1
votes1
answer34
views"Justify-content: space-between;" is not working - Flexbox
Hello. All right? I’m creating a box with three items. One needs to be glued to the top, the other in the middle and the other glued to the bottom, to the base of the layout I need to do. So I used…
-
-1
votes1
answer35
viewsHow to get my list inside the card with responsive size!
I would like to leave the featured content inside the card and not go outside, because when you leave the small screen they end up leaving. I made my site using flexbox as a base. body {…