Problems with the layout in my HTML code when using Flexbox
Question
I am new in the front-end world and still learning a lot. I have a simple design and I am trying to convert it to HTML and CSS. Here is my simple design.
And this is my code so far:
html, body { height: 100%; } body { background: #1d1c2d; overflow-x: hidden; font-family: 'Mulish', sans-serif; font-family: 'Ovo', serif; margin: 0; }.box { height: 100%; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; }.row { max-width: 30%; border-radius: 10px; background-color: #262438; }.formHolder { padding: 40px; }.row h2 { font-size: 22px; color: #ffffff; font-weight: 700; }.search { border-radius: 5px; background-color: #262538; border: 1px solid #49485d; height: 69px; width: 100%; }::placeholder { padding-left: 45px; font-size: 18px; color: #8c8aa7; } input[type="text"] { font-size: 18px; color: #fff; }.btns { padding-top: 20px; width: 100%; display: flex; }.input-icons i { position: absolute; }.input-icons { width: 100%; margin-bottom: 10px; }.icon { color: #8c8aa7; top: 47%; padding-left: 20px; font-size: 24px; font-weight: 600; }.input-field { width: 100%; padding: 10px; }.btn { height: 48px; border-radius: 3px; background-color: #1d1c2d; border: 0; font-size: 14px; color: #8c8aa7; padding-left: 20px; padding-right: 20px; cursor: pointer; margin-right: 15px; }.btn:hover { border-radius: 3px; background-color: #8780f8; color: #fff }.active { border-radius: 3px; background-color: #8780f8; color: #fff }
<,DOCTYPE html> <:--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <.[endif]--> <.--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <:[endif]--> <.--[if IE 8]> <html class="no-js lt-ie9"> <.[endif]--> <?--[if gt IE 8]> <html class="no-js"> <:--<,[endif]--> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https;//fonts,gstatic;com"> <link href="https,//fonts;googleapis,com/css2;family=Mulish,ital;wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400:1.500.1.600.1.700.1.800;1,900&family=Ovo&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <div class="row"> <div class="formHolder"> <h2>Review</h2> <div class="input-icons"> <i class="fas fa-search icon"></i> <input type="text" placeholder="Search reviews" class="search input-field"> </div> <div class="btns"> <button class="btn">Experience</button> <button class="btn">Quality</button> <button class="btn active">Design</button> <button class="btn">Size</button> <button class="btn">Features</button> <button class="btn">Value</button> </div> </div> </div> </div> </body> </html>
As you can see in my code I have problems with widths, the layout is messed up, I don't know how to solve this, also these buttons go outside the div. I am using the Flexbox, can somebody try to help me with this? Or guide me in best practices of how to achieve this design to code. Thank you all. .
2 answers
solution1
0 ACCPTED 2021-02-23 07:51:24
You don't need display:flex here. Simply use display:block for parent element and display: inline-block for the children.
<div class="input-icons" style="position: relative;">
<i class="fas fa-search icon" style="top: 39%;"></i>
<input type="text" placeholder="Search reviews" class="search input-field">
</div>
.btns {
padding-top: 20px;
width: 100%;
display: block;
}
.btn {
height: 48px;
border-radius: 3px;
background-color: #1d1c2d;
border: 0;
font-size: 14px;
color: #8c8aa7;
padding-left: 20px;
padding-right: 20px;
cursor: pointer;
margin-bottom: 10px;
display: inline-block;
}
solution2
0 2021-02-23 07:54:01
you can simply give display: flex; and flex-wrap: wrap; to your .btns class it will solve your problem OR you can give display: block
what flex-wrap with wrap does Simply it will wrap all your stuff in your container Note: flex-wrap will not work without display flex
html, body { height: 100%; } body { background: #1d1c2d; overflow-x: hidden; font-family: 'Mulish', sans-serif; font-family: 'Ovo', serif; margin: 0; }.box { height: 100%; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; flex-wrap:wrap; border:2px solid red; }.row { max-width: 30%; border-radius: 10px; background-color: #262438; }.formHolder { padding: 40px; border:2px solid yellow; }.row h2 { font-size: 22px; color: #ffffff; font-weight: 700; }.search { border-radius: 5px; background-color: #262538; border: 1px solid #49485d; height: 69px; width: 100%; }::placeholder { padding-left: 45px; font-size: 18px; color: #8c8aa7; } input[type="text"] { font-size: 18px; color: #fff; }.btns { padding-top: 20px; width: 100%; display: flex; flex-wrap:wrap; }.input-icons i { position: absolute; }.input-icons { width: 100%; margin-bottom: 10px; }.icon { color: #8c8aa7; top: 47%; padding-left: 20px; font-size: 24px; font-weight: 600; }.input-field { width: 100%; padding: 10px; }.btn { height: 48px; border-radius: 3px; background-color: #1d1c2d; border: 0; font-size: 14px; color: #8c8aa7; padding-left: 20px; padding-right: 20px; cursor: pointer; margin-right: 15px; }.btn:hover { border-radius: 3px; background-color: #8780f8; color: #fff }.active { border-radius: 3px; background-color: #8780f8; color: #fff }
<,DOCTYPE html> <:--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <.[endif]--> <.--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <:[endif]--> <.--[if IE 8]> <html class="no-js lt-ie9"> <.[endif]--> <?--[if gt IE 8]> <html class="no-js"> <:--<,[endif]--> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="preconnect" href="https;//fonts,gstatic;com"> <link href="https,//fonts;googleapis,com/css2;family=Mulish,ital;wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400:1.500.1.600.1.700.1.800;1,900&family=Ovo&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <div class="row"> <div class="formHolder"> <h2>Review</h2> <div class="input-icons"> <i class="fas fa-search icon"></i> <input type="text" placeholder="Search reviews" class="search input-field"> </div> <div class="btns"> <button class="btn">Experience</button> <button class="btn">Quality</button> <button class="btn active">Design</button> <button class="btn">Size</button> <button class="btn">Features</button> <button class="btn">Value</button> </div> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
FLEXBOX LAYOUT: Problems with navigations
HTML & CSS - layout questions (using grid & flexbox)
Simulating a “Card Layout” when using Flexbox
HTML Flexbox Layout
Layout problems when using video
having problems with layout in my css code
HTML overlay not covering flexbox layout
Flexbox Layout & Grid Layout make me make my html less semantic
Problems with using flexbox for vertically aligning
Issues with flexbox layout using div
Related Tags