Flexbox Tutorial (CSS): Real Layout Examples

What people said

Strong rec cssyphus · 2016-01 · Stack Overflow · on “How can I center elements horizontally or vertically with Twitter Bootstrap?”

If you are trying to center an image in a div, but the image won't center, this could describe your problem: JSFiddle Demo of the problem [LINK] <div class="col-sm-4 text-center"> <img class="img-responsive text-center" src="myPic.jpg" /> </div> The img-responsive class adds a display:block instruction to the image tag, which stops text-align:center ( text-center class) from working. SOLUTION: <div class="col-sm-4"> <img class="img-responsive center-block" src="myPic.jpg" /> </div> JSFiddle demo of solution [LINK] Adding the center-block class overrides the display:block instruction put in by using the img-responsive class. Without the img-responsive class, the image would center just by add

Strong rec cssyphus · 2018-11 · Stack Overflow · on “Stacking a table with an image on mobile using html/css”

You can spend a couple of hours fiddling around with various html/css settings, or you can take 20 mins and do a tutorial that will cover this and several other aspects. For wizardly easy mobile stuff, take a look at Bootstrap. Here's a brilliantly speedy tutorial [LINK] that will get you started. Basically, Bootstrap involves just a few files that you need to reference at the top of your page and voila, you have some pretty cool functionality. If you reference these three files [LINK] (reproduced below) at the top of each page, you will have access to all the super-easy Bootstrap wonderfulness that will automatically handle the different screen sizes for you. <!-- Latest compiled and minifi

Strong rec cssyphus · 2019-03 · Stack Overflow · on “How do I center child div in parent and have it fixed to the top?”

Use flexbox - there's a reason why the major difference between Bootstrap3 and Bootstrap4 is switching from floats to flexbox! Example: #parent{height:100px;background:red;} #parent{display:flex;align-items:flex-start;justify-content:center;} #child{background:yellow;} XXX#child{flex-grow:1;text-align:center;} /* Uncomment if you want row to be full-width */ <div id="parent"> <div id="child"> Here is some text </div> </div> References: Excellent flexbox cheatsheet [LINK] Excellenter short Video Tutorial [this video]

Strong rec cssyphus · 2019-03 · Stack Overflow · on “DIV contains varying number of divs, fill and cover remaining space”

Flexbox will let you auto-resize elements the way you require. Flexbox requires two things: A parent container (e.g. DIV, section, aside, p, etc) One or more child elements (e.g. div, p, img, etc) DEMO: $('#adddiv').click(function(){ $('#container').append('<div />'); }); $('#remdiv').click(function(){ $('#container>div:last').remove(); }); #container{display:flex;} #container>div{flex:1;width:50px;height:50px;} #container div:nth-child(1){background:green;} #container div:nth-child(2){background:pink;} #container div:nth-child(3){background:lightblue;} #container div:nth-child(4){background:red;} #container div:nth-child(5){background:palegreen;} #container div:nth-child(6){background:yello

Strong rec cssyphus · 2019-05 · Stack Overflow · on “How to horizontally center fixed content within absolutely positioned parent?”

There is an even easier solution, using flexbox. Flexbox is relatively new, but is hugely useful - and quite easy. There is a reason why the core change from Bootstrap3 to Bootstrap4 is moving from aligning with floats to using Flexbox. In fact, they re-designed the entire Bootstrap grid system - the core of Bootstrap - around flexbox. By adding these two lines to the parent div: display:flex; justify-content:center; and removing these two lines from the child div (modal content): xxxleft: 50%; xxxtransform: translateX(-50%); The modal will self-adjust, and always remain centered. Updated jsFiddle Demo [LINK] References: Excellent, fast-paced 5-min Flexbox Tutorial [this video] Best Ever Flexbox

Strong rec cssyphus · 2019-05 · Stack Overflow · on “`margin: 0 auto;` and `width:50%` combination doesn't center my div”

I attempted to fix your code example, but had difficulty relating the various parts of your question to your code example. Instead, I'll tell you how to fix it yourself. Centering vertically is quite tricky - unless you use flexbox or CSS Grid. Then it's dead easy. Honestly, if you spend about 30 mins fiddling with flexbox you'll have it down - and the layout is straight-forward and makes sense, unlike floats. There is a reason why Bootstrap re-did their entire platform from Bootstrap3 to Bootstrap4, primarily to change from using floats to flexbox. Flexbox requires two things: A parent container (e.g. DIV, section, aside, p, etc) One or more child elements (e.g. div, p, img, etc) You turn f

Strong rec cssyphus · 2019-05 · Stack Overflow · on “Understanding how centering a div works with bootstrap 4”

The major, core, difference between Bootstap3 and Bootstrap4 is changing the fundamental Grid System from using Floats for alignment to using Flexbox. Therefore, understanding flexbox is important, and useful even apart from Bootstrap. And, fortunately, it's also pretty easy. Flexbox requires two things: A parent container (e.g. DIV, section, aside, p, etc) One or more child elements (e.g. div, p, img, etc) You turn flexbox on on the parent: display:flex; Then, there are various switches (just a handful of them). Some are set on the parent (as in the case of justify-content ) but others might be set on the items (as with flex-grow:1 ) Since you want to understand how to manage this properly,

Strong rec cssyphus · 2019-05 · Stack Overflow · on “Two Inline Inputs Separated by Text”

It is very simple with Flexbox. There is a reason why Bootstrap re-did their entire platform from Bootstrap3 to Bootstrap4, primarily to change from using floats to flexbox. Flexbox requires two things: A parent container (e.g. DIV, section, aside, p, etc) One or more child elements (e.g. div, p, img, etc) You turn flexbox on on the parent: display:flex; Then, there are various switches . Some are set on the parent (as in the case of justify-content ) but others might be set on the items (as with flex-grow:1 ) Demo: .row{display:flex;} .col-inline{flex:1;XXXborder:1px solid red;} .col-left {max-width:45vw;text-align:right;} .col-right{max-width:48vw;text-align:left;} .col-to{max-width:5vw;te

Strong rec cssyphus · 2019-05 · Stack Overflow · on “How to align the table in CSS”

To align the entire table to the right, wrap it in a div, give the table a width, and use flexbox to align the items to the right: .parentDiv{display:flex; justify-content: flex-end;} DEMO 1 .flexparent{display:flex;justify-content:flex-end;} table{width:60vw;border-collapse:collapse;} th{border:1px solid red;} td{border:1px solid green;} <div class="flexparent"> <table> <tr> <th>Drop No.</th> <th>Route Name/Destination</th> </tr> <tr> <td class="route-number">17</td> <td class="route-name">Paddington Station</td> <tr> </table> </div> To style the cell data to be right-aligned, use CSS on the th and td elements: th, td{text-align:right;} DEMO 2 table{width:60vw;border-collapse:collapse;borde

Strong rec cssyphus · 2019-05 · Stack Overflow · on “How to align two elements on the same line from PHP”

Right, I found out why... *mea culpa*. I'll update the answer again with the solution there also. But flexbox is something you should learn. Here are two very helpful links: 20min YouTube Tutorial [this video] and Excellent cheat sheet [LINK] - ***Very seriously, watch that tutorial. You will thank me later.***