Learn flexbox the easy way

What people said

Recommends Amrovic · 2022-03 · Stack Overflow · on “Responsive flex row display until min width reach”

You need to make use of the power of flex-grow , flex-shrink and flex-basis properties on the children of your flex container. This [this video] is very handy youtube tutorial from Kevin Powell explaining these properties and other important flex-box concepts. Anyway, here's a solution to your problem with comments explaining what has been added and why. body { padding: 50px; font-family: sans-serif; } .container { resize: horizontal; display: flex; overflow: auto; align-items: center; flex-wrap: nowrap; /* don't allow items to go to a new line on shrink */ border: 1px solid black; min-width: 138px; /* 100px for the div.search width + 10px inline padding for div.search + 28px margin-rigt from ul.

Recommends Dejan.S · 2022-07 · Stack Overflow · on “How to align section and footer to the left of sidenav?”

Keep it up. I would recommend to learn flexbox [LINK] and grid [LINK] . If you like video content for learning I would recommend two awesome instructors both with great content. For flexbox: Kevin Powells Learn flexbox the easy way [this video] or Wes Bos flexbox series [LINK] . For grid you can check both Kevin [LINK] and Wes [LINK] . Happy learning and good luck :)

Recommends Adam · 2022-11 · Stack Overflow · on “Moving buttons to the right side of the header”

If you make your header width:100% and use justify-content:space-between it'll push the last div to the right of the page as the code below. CSS tricks [LINK] has a good explainer and there's a nice video [this video] from Kevin Powell that's a gentle introduction. header { display: flex; /* added these */ width: 100%; justify-content: space-between; /* end of additions */ border-bottom: solid 1px black; padding: 10px; align-items: center; } .allButtons { display: flex; float: right; } .headerButtons { margin: 10px; background-color: #0A99FE; padding: 9px; opacity: 60%; border-radius: 10px; } <header class="headerItens"> <svg width="164" height="54" viewBox="0 0 164 54" fill="none" xmlns=" [LINK]

Recommends Samar · 2022-12 · Stack Overflow · on “Best HTML CSS practice for making a menu (with my float example)”

I had this issue when I first started learning CSS, it’s a common one. It’s possible to do this with floats, but it’s an absolute headache. The modern approach would be to use flexbox. It might take you a minute to learn, but it’s worth it - I promise you won’t look back. Here’s a great written resource: [LINK] This game will help you practice and test your flexbox skills: [LINK] This video by Kevin Powell is great: [this video] Hope this helps :)

Recommends Adam · 2022-12 · Stack Overflow · on “How to position the home content after the side nav bar?”

As mentioned earlier, use display: flex with a wrapper div as per the example below. More information on flexbox at CSS tricks [LINK] and a nice intro from Kevin Powell on [this video] body { margin: 0; } .container { display: flex; } .sidebar { min-width: 15ch; background-color: skyblue; padding: 0.5rem; } .home-content { background-color: pink; padding: 0.5rem; flex-grow: 1; } .t { font-size: 25px; font-weight: 500; color: #000000; ; margin-top: 12px; } <div class='container'> <div class="sidebar"> This is the sidebar </div> <div class="home-content"> <div class="t"> <h2>Home Content</h2> </div> </div> </div>

Recommends Adam · 2022-12 · Stack Overflow · on “Why isn't my text aligned to the bottom-left of my container?”

If you're willing to add a bit more markup in your html, you can reduce the amount of CSS you use with flexbox (there's a good guide at CSS tricks [LINK] and this video [this video] from Kevin Powell and also flexbox froggy [LINK] game which is kinda fun. .card { height: 300px; width: 500px; background: silver; display: flex; align-items: flex-end; } <div class="card"> <div><!-- Added this extra container --> <h3>Swiss Bank.</h3> <p>Digital Card.</p> </div> </div>

Recommends Adam · 2022-12 · Stack Overflow · on “Display responsive div element on mobile using CSS?”

The easiest way to do this is to use a media query [LINK] to apply rules at mobile widths. Then wrap your .box divs in a containing div then use flexbox [LINK] to change the flex-direction from row to column . In the same query set your .box div widths to the size you want. Kevin Powell has a good introduction to flexbox here [this video] Example below /* Added this */ .container { display:flex; } .box { width: 10%; padding: 13px; height: 200px; background: blue; margin-right: 5px; float: left; } .box2 { width: 30%; padding: 13px; height: 200px; background: green; margin-right: 5px; float: left; } .box3 { width: 10%; padding: 13px; height: 200px; background: yellow; margin-right: 5px; float: left

Recommends Adam · 2023-01 · Stack Overflow · on “How to make this image move to the right?”

It's possible to massively simplify your markup as follows: Class notification . This is a flex box [this video] so items will try to fit side by side on one line. As the user's image, the main text and the 'chess' image are all on one line we don't need to add any more divs to this. We can just insert them directly, especially as you've made all img elements as blocks (this is always a good move imho). Class notification-formatting is used to isolate the text so that the text and time stack on top of each other. As this is a flex item, this will try to shrink to fit the content. We don't need a wrapper around the image with the chess class as that's already a block level element so to get that t

Recommends Adam · 2023-01 · Stack Overflow · on “Make image and text responsive”

As tacoshy says in the comments, a media query is the easiest way to do this. You have a lot of css in there that looks unnecessary too that could probably do with a clean up. I've removed some css and replaced it with code that makes it behave okay at small screen sizes but tbh you could eliminate a lot of what you've written to get the same effect. If what I've written isn't clear or you have any questions just drop a comment below and I'll explain. Info on media queries on w3schools here [LINK] A good guide to flexbox on css tricks [LINK] A good intro to flexbox from Kevin Powell here [this video] and a tutorial on youtube here [LINK] div.content { /*width: 100vw; removed this as it was causin

Recommends Adam · 2023-03 · Stack Overflow · on “Prevent buttons from overflowing to a new line”

Just to add to the accepted answer, you can use flex box [LINK] to do this also (here's a good video [this video] ): * { box-sizing: border-box; } #button-contianer { position: fixed; display: flex; overflow-x: scroll; gap: 8px; /* rather than using margin-right in your button, gap just adds a gap between buttons */ padding: 8px; bottom: 0; left: 8px; width: calc(100% - 16px); height: 92px; background-color: rgb(125, 205, 231); border: 3px solid rgb(18, 171, 222); border-radius: 10px; font-size: 20pt; } button { flex: 0 0 25%; /* don't grow, don't shrink, 25% width */ height: 50px; padding: 0; background: none; border: 2px solid black; } <div id="button-contianer"> <button>2022.01.09</button> <bu