• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

CSS Flexbox

Question

Seahorsepip    610

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 :p

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.

Share this post


Link to post
Share on other sites

16 answers to this question

Recommended Posts

  • 0
pqt    275

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.

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
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.

Share this post


Link to post
Share on other sites
  • 0
pqt    275
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.

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
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 ^^

Share this post


Link to post
Share on other sites
  • 0
pqt    275
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?

Share this post


Link to post
Share on other sites
  • 0
MikeChipshop    3,458

Welcome to the Flexbox family! :D

 

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 

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
6 hours ago, MikeChipshop said:

Welcome to the Flexbox family! :D

 

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 :p

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
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.

Share this post


Link to post
Share on other sites
  • 0
MikeChipshop    3,458
37 minutes ago, Seahorsepip said:

I posted that game already :p

Oops! It was early... :p

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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

 

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 :p Gonna keep this bookmarked for personal use in future projects.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
The_Decryptor    1,105

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.

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
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 :p

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

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/

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

Probably taking this popup code a bit too far :p

 

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 ^^

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610
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.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.