CSS Flexbox

[Seahorsepip]

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]

13 minutes ago, 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.

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]

1 hour ago, 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.

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

[Seahorsepip]

8 hours ago, Mur said:

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

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]

4 hours ago, 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 ^^

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

[MikeChipshop]

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]

6 hours ago, 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 

I posted that game already

[Seahorsepip]

8 hours ago, Mur said:

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

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]

37 minutes ago, Seahorsepip said:

I posted that game already

Oops! It was early...

[Seahorsepip]

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]

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]

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]

9 hours ago, 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.

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]

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]

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]

5 hours ago, 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>

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