CSS FlexBox Essentials
Why Stack Overflow recommends it
Stack Overflow users link it when answering layout questions (centering, side-by-side divs, equal widths, nav bars) and want to point askers to a single beginner-friendly flexbox tutorial.
Recommended by 8 people across 7 different months, 2015 to 2017.
What it is
A 31-minute DevTips episode that walks through CSS3 Flexbox from the ground up, with a CodePen to follow along. It covers the container and item properties needed to start using flexbox for layout right away.
What people said
Strong rec Kellen · 2017-04 · Stack Overflow · on “Robust solution to vertically center navigation bar within a section environment without using absolute positioning”
@SumNeuron [LINK] - Alright, it now wraps. Anything is possible with flexbox! It is flexible! I highly recommend this video, if you're interested in learning some of the basics: [this video]
Recommends marblewraith · 2015-07 · Stack Overflow · on “Flexbox: How to stretch row's elements to full width?”
I also recommend you go through and watch this clip [this video] , it'll take around 30mins and you'll be a pro at flex afterward :P
Recommends Dan Fletcher · 2015-08 · Stack Overflow · on “Why does the box layout need a width attribute in CSS3?”
To answer the question in the header, you don't need to set a width for your item when using flex. There are plenty of examples on the MDN. [LINK] By setting a width, you can control the minimum amount of space your .item will occupy in the parent element. But keep in mind no matter what you set the width to the items will not exceed the width of the parent divided by the number of items. So if you have 5 boxes in a container, the width of those boxes will not exceed 1/5th the width of the container. I found a good video on using flex here: [this video]
Recommends CZorio · 2016-05 · Stack Overflow · on “Make two floating divs stay next to each other”
You can do this easily with flexbox [LINK] If you have time I recommend watching this turoial for a good understanding [this video]
Recommends haltersweb · 2016-05 · Stack Overflow · on “How do I create a horizontal navigation menu with pure CSS & CSS table?”
An additional method is to use flex box unless you have to support older browsers. A fun flexbox video can be found here: [this video]
Recommends A. Dziedziczak · 2016-08 · Stack Overflow · on “Reorder Items in DIV on window resize”
Well you can try to display it as flex. Here is a nice and easy tutorial how to do it. I learned how to make flex displays from it: [this video] And you can set order for nth-child as you want.
Recommends Nitrof · 2016-10 · Stack Overflow · on “item item-input: css styling, remove space in box”
finally, I found what to do. ionic use flex to style app. For those newbie like me that incounter trouble like it, this video turorial help me a lot: flex tutorial [this video] in addition. I found an other bug with ion-slides and scrool, and it generate some weird css trouble. And the solution is pretty simple: I jus add another 'ion-content' tag <ion-view view-title="programs"> <ion-content padding="true" > <ion-slides options="options" slider="data.slider"> <ion-slide-page ng-repeat="alarm in alarms"> <ion-content> <!-- that's the add --> <div class="list">
Recommends user234562 · 2016-12 · Stack Overflow · on “When I resize in internet explorer”
Flexbox is a fairly new feature but works really wel! I added two links give it a read and try it out. [this video] Flexbox Guide [LINK] Have a look at the 6 squares/divs are they all the same size? looks like maybe the 2 at te bottem are a few pixels wider