CSS Flexbox

[Seahorsepip Veteran]

I have avoided flexbox in css for a long time since I didn't see any practical use for it. Now I ran into some issues which required flexbox but I had no experience of using flexbox in css whatsoever

So I found a website that explained me flexbox in a few min: http://flexboxfroggy.com/. It's a css game with frogs xD

 

Anyway here's a more detailed explanation of flexbox: http://tympanus.net/codrops/css_reference/flexbox/

 

And flexbox is kinda handy for sticky footer with a variable height as example.

Also the menubar of apple.com is just a few lines of code now: https://jsfiddle.net/wk054b9n/

 

I started using flexbox to improve small details of layouts,tThe layout itself still shows properly when flexbox is not supported in certain browsers.

[pqt]

Flexbox has a large amount of browser support which is why the Bootstrap framework (v4) is moving in favour of using it.

 

I personally use it as much as possible, it's very handy because of how robust you can make it and it responds to auto-sizing similar to tables.

[Seahorsepip Veteran]

  On 06/01/2016 at 17:23, Mur said:

Flexbox has a large amount of browser support which is why the Bootstrap framework (v4) is moving in favour of using it.

 

I personally use it as much as possible, it's very handy because of how robust you can make it and it responds to auto-sizing similar to tables.

Expand  

I try to use flexbox myself too lately but I make sure that the layout can partially fallback on floats when flexbox isn't supported.

[pqt]

  On 06/01/2016 at 17:37, Seahorsepip said:

I try to use flexbox myself too lately but I make sure that the layout can partially fallback on floats when flexbox isn't supported.

Expand  

https://github.com/ridjohansen/css_browser_selector Highly recommend this if you don't use a similar solution already.

[Seahorsepip Veteran]

  On 06/01/2016 at 18:39, Mur said:

https://github.com/ridjohansen/css_browser_selector Highly recommend this if you don't use a similar solution already.

Expand  

I'm actually not using anything for fallbacks. The flexbox layout will overide the float layout when flexbox is supported without any need to disable the floating css first ^^

[pqt]

  On 07/01/2016 at 03:03, Seahorsepip said:

I'm actually not using anything for fallbacks. The flexbox layout will overide the float layout when flexbox is supported without any need to disable the floating css first ^^

Expand  

That's fair, what about width specifications or vertical alignment parameters, I'm curious; how do you handle fallbacks on that?

[MikeChipshop Member]

Welcome to the Flexbox family!

 

Give it a week and you'll never know how you survived without it.

This game http://flexboxfroggy.com/ is awesome for getting to grips with it.

 

Enjoy 

[Seahorsepip Veteran]

  On 07/01/2016 at 07:54, MikeChipshop said:

Welcome to the Flexbox family!

 

Give it a week and you'll never know how you survived without it.

This game http://flexboxfroggy.com/ is awesome for getting to grips with it.

 

Enjoy 

Expand  

I posted that game already

[Seahorsepip Veteran]

  On 07/01/2016 at 07:19, Mur said:

That's fair, what about width specifications or vertical alignment parameters, I'm curious; how do you handle fallbacks on that?

Expand  

I tend to use inline-block with vertical-align a lot for centering popups and such: https://jsfiddle.net/qg4ob9k5/

 

Here's the same code after I added flexbox: https://jsfiddle.net/ktfqcpat/

The inline-block code will make the layout work when flexbox isn't supported.

[MikeChipshop Member]

  On 07/01/2016 at 13:57, Seahorsepip said:

I posted that game already

Expand  

Oops! It was early...

[Seahorsepip Veteran]

Here's the code I use for popups myself: https://jsfiddle.net/qerzeff0/

 

It supports a ok and no button, a title and html content.

 

The html content can be html inputs which will be returned after the popup is closed.

The popup function will also return true or false based on which button is clicked and you can close the popup manually with close(); (Usefull for progress bar popups).

 

It will also disable the scrolling behind the popup properly so that the popup itself can be scrolled when it's height is larger then the viewport.

 

Edit: seems text-align: initial doesn't work in IE..... added a css hack for IE

 

The popup code can ofcourse be improved if needed, the ok, and no variable could be replaced with an array that has the text, return value and class for each button.

[Seahorsepip Veteran]

Since I'm bored I improved my popup code to support an array of buttons .

 

Edit: Improved the code to also support buttons that don't close the popup.

Edit 2: Add addClass function to add a class to the popup_wrapper and got rid of the progress function:

example.open().progress(function(r, f) {
});

Becomes

example.open(function(r, f) {
});

https://jsfiddle.net/4fvryktb/

 

Can't think of anything else to improve it  Gonna keep this bookmarked for personal use in future projects.

[The_Decryptor Veteran]

It's got rather bad support currently, but have a look at the <dialog> element, there's a few polyfills that implement most of the functionality across other browsers.

[Seahorsepip Veteran]

  On 08/01/2016 at 03:49, The_Decryptor said:

It's got rather bad support currently, but have a look at the <dialog> element, there's a few polyfills that implement most of the functionality across other browsers.

Expand  

Hmm browser support by default is depressing...

Only problem is the fact that the dialog element has no wrapper element or anything to make a background with

 

Edit: Seems they have a :backdrop psuedo element for that. I might look into the dialog element in the future when it's more supported. Maybe there will be dialogfroggy.com site by then

[Seahorsepip Veteran]

Added an option to make the popup draggable: https://jsfiddle.net/8463fqeq/

 

Fixed a bug that made the page unscrollable even before the open() function was called on the popup object.

 

https://jsfiddle.net/ukqcm9x7/

 

Edit: added dragging code for touchscreens:

 

https://jsfiddle.net/mm7b7t5t/

[Seahorsepip Veteran]

Probably taking this popup code a bit too far

 

Added more options(toggle overlay, keep popup inside the window on resize, unbind events after closing the popup etc): https://jsfiddle.net/1fhce3wd/

 

Will post a new thread when I'm finished and made it into proper code ^^

[Seahorsepip Veteran]

  On 27/01/2016 at 07:52, Muhammad adnan said:

let all the flexible items be the same length,regardless of its content:

 

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>Note:</b> Internet Explorer 9 and earlier versions do not support the flex property.</p>

<p><b>Note:</b> Internet Explorer 10 supports an alternative, the -ms-flex property. IE11 and newer versions fully support the flex property (do not need the -ms- prefix).</p>

<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-flex property.</p>

</body>
</html>

Expand  

Please seperate html content and css in seperate code tags for readability.