News Articles flexbox

Learning Flexbox's flex-direction

Simple illustration for CSS flexbox’s flex-direction. Source: DEV Community

How to create a navbar in 5 minutes

Hi all. In this post, we’re creating a navbar in less than 5 minutes. HTML Code Inside the <body> tag we create a navbar with the tag <nav>. Under <nav>, we put <ul> and 3 <li> items. Finally, we put our links with # <a href=”#about-me> to go to that section on the page. It’s […]

Understanding CSS Flexbox

Flexbox, The first thing that comes to our mind designing a layout. Layout designing was never been this easy before flexbox is introduced. From designing a simple navbar to a very complex UI, Flexbox is a must because of its simple structure and easy-to-maintain nature. Before diving into the brief concept, make sure you know […]

Flex box Responsive Layout with Left and Right Container

I have trouble with flexbox layout in mobile device. Desktop it looks okay in Mobile view I want to display like below first it should display "Overview" Box second it should display "Payment" Box 3rd it should display "Activity" Box .div1 { box-sizing:border-box; border:0.5px solid red; } .main-container { height:100%; display:flex; } .left-container { flex:1 […]

Flexbox: Removing blank space after applying media query

Do you know why, when I resize my browser down and the flex direction is changed to columns, that my images and text no longer sits in the middle and looks left aligned? There’s a huge space on the right hand side and I want the content to always sit in the center no matter […]

How to stop flex from overflowing the parent [duplicate]

Concider the following HTML/CSS from this Fiddle * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } main { display: flex; flex-direction: column; height: 100vh; width: 100vw; font-size: 5rem; } .fill-rest { height: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-items: start; background-color: green; } .fill-rest div { background-color: red; } <main> […]

Responsive Column Img and Paragraph

I have a website where I want the image on the left and a paragraph on the right. Then when the screen is smaller I want the image on the top and the paragraph on the bottom. It’s simple and i’ve done it before but for some reason it’s not working. I’ve Googled/looked at other […]

How to create two inputs as one form field and apply style specifically in Angular Material?

Using Angular Material, I am building an example app with a form, which has a form field with two elements (input field and dropdown). So, for time being, I have implemented flex styles and attributes as follows: <div class="row"> <mat-label>Dessert</mat-label> </div> <div fxLayout="row"> <mat-form-field appearance="outline" fxFlex="80"> <input matInput type="text" formControlName=""> </mat-form-field> <mat-form-field appearance="outline" fxFlex="20" style="background-color: […]

How to add spacing to a table using tailwind

I was trying to add space to the table but I was unable to do it. I have tried using space-x-, padding but I was not getting the output I was anticipated. Link <html> <script src=””></script> <table class=”table-auto”> <tr class=”row space-x-3″> <td class=”col bg-blue-500″>42.80</td> <td class=”col bg-blue-500″>42.80</td> <td class=”col bg-blue-500″>52.51</td> <td class=”col bg-blue-500″>60.40</td> <td class=”col […]

It's been a week and I'm still stuck

I wrote a post a week or so ago about Flexbox and I’m still not getting it. I’m trying to work through The Odin Project and I’m at the end of the CSS Fundamentals and before moving on to the next section the last project is designed around Flexbox. It also seems that FB is […]

Flex row not wrapping content on scroll [duplicate]

I’m building a table using flex divs and I’m having the problem that, when I scroll, the row does not wrap all the items Before I scroll: After I scroll: Note that, because the row is red, I would expect it to properly wrap the items, which doesn’t seem to happen when I scroll. Any […]

How to Vertically Position DIV Elements in CSS

I am having problems positioning my content in CSS. I want to take my content and vertically position it. I have tried using flexbox but it didn’t work. Here’s the CSS and HTML Code. HTML: <div class="main-div"> <div class="container-1"> <h2>What is Your Age In Days?</h2> <div class="flex-box-container-1"> <div> <button class="btn btn-primary" onclick="ageInDays()">Click Me!</button> </div> <div> […]

Vertically Aligning Flex Items in CSS

I’m fairly new to coding. I was making a JS project when I encountered a problem. I need to vertically align 2 parent divs. Those 2 parent divs have several divs underneath them. So, in order to vertically align the whole page, I need to style those parent divs. Please help me in doing so. […]

Nav items are not aligned in mobile view

mobile view My navitems are taking up two lines when I shrink my screen to mobile view. The search bar and hamburger menu and the logo are all in different places,desktop view I want them in a single line. Any input will be appriciated. <!DOCTYPE html> <html lang=”en” dir=”ltr”> <head> <meta charset=”utf-8″> <link rel=”apple-touch-icon” sizes=”57×57″ […]

How to make display:flex items go to the next line, automatically? [duplicate]

So am new to learning/using the "display: flex" property. *{ margin: 10px; padding: 0; -webkit-margin:0; -webkit-padding:0; } .container { display: flex; } .imagebox { position: relative; flex: 1; margin: 15px; } .imagebox img { max-height: 200px; max-width: 100%; position: absolute; } <div class=”container”> <div class=”imagebox”> <a href=”#” class=”images”> <img class=”active” src=”×200/000/?text=Image” /> </a> </div> <div […]

Why Values of Justify-Content not working when applied on container

I hope YOU guys are doing good I have just started learning Flexbox from CSS Tricks and some YT channels. But when i used "justify-content:space-around | space-between | space-evenly. None of them seems to work out. And i could not find out the problem I would really appreciate if anyone can help me out.. Thanks […]

Tags <a> and <button> renders differently with same styles

As title says. I’m setting anchor and button to flex but their sizes is different. Why is this happen? How can I achive same visual on both elements with auto width? a, button { display: flex; align-items: center; justify-content: center; width: auto; background: orange; margin-bottom: 20px; padding: 10px; height: 50px; margin: 0; } <a href=”#”>asdf</a> […]

How do I place a TextInput between two Text components and have it wrap nicely?

I’m currently trying to place a TextInput between two Text components but it’s not wrapping very nicely. This is what it looks like now where the text gets wrapped above the TextInput instead of being on the same line: I would like to achieve something like the picture below here, where the Text wraps onto […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.