Using CSS flexible boxes - Web developer guide The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents. Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have flexible dimensions to adapt to the display space. Positioning child elements is thus much easier, and complex layouts can be achieved more simply and with cleaner code, as the display order of the elements is independent of their order in the source code. Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. Flexible boxes concept Flex container or
CSS3 . Info - All you ever needed to know about CSS3 CSS3 Multi-column Layout Consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Code GitHub - vadimyer/Ecligrid: Flexible Mobile First Grid System Based on Flexbox. How to Use steps() in CSS Animations I am guessing that many of you have found steps() to be confusing when using it in CSS animations. I wasn’t sure how or why to use it at first and searching seems to produce two main examples: A typing demo by Lea Verou and an animated sprite sheet by Simurai. These examples are genius and really helped me begin to understand this special little timing function, but they are such prominent references that it was hard to imagine how to use steps() outside of the context of each demo. SEE ALSO: Creating a Scalable SVG Infographic So, I really got into steps() and built a few animated demos to help those that might be as confused as I was in tackling this elusive beast. Intro to Steps steps() is a timing function that allows us to break an animation or transition into segments, rather than one continuous transition from one state to another. steps(<number_of_steps>, <direction>) The second parameter defines the point at which the action declared in our @keyframes will occur. Here’s a visual:
GitHub - philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for them. Flexbox, guide complet Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici. Par Chris Coyier Cet article est la réunion de quatre articles de Chris Coyier sur Flexbox. Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les items d'un container, même lorsque leurs dimensions sont inconnues et/ou dynamiques - d'où le terme "flex". L'idée principale est de donner à un élément contenant (container) la possibilité de changer les largeur et hauteur des éléments contenus (items), afin de remplir au mieux l'espace disponible, et s'adapter à tous les devices et toutes les tailles d'écrans. Le plus important à retenir c'est qu'avec Flexbox la disposition n'est pas rigidement directionnelle, contrairement à ce que nous connaissons - Block est basé sur un schéma vertical, Inline sur un schéma horizontal. Les bases Propriétés Notez que : flex
GitHub - 10up/flexibility: Use flexbox while supporting older Internet Explorers Flexbox, guide complet Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici. Par Chris Coyier Cet article est la réunion de quatre articles de Chris Coyier sur Flexbox. Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les items d'un container, même lorsque leurs dimensions sont inconnues et/ou dynamiques - d'où le terme "flex". L'idée principale est de donner à un élément contenant (container) la possibilité de changer les largeur et hauteur des éléments contenus (items), afin de remplir au mieux l'espace disponible, et s'adapter à tous les devices et toutes les tailles d'écrans. Le plus important à retenir c'est qu'avec Flexbox la disposition n'est pas rigidement directionnelle, contrairement à ce que nous connaissons - Block est basé sur un schéma vertical, Inline sur un schéma horizontal. Les bases Propriétés Notez que : flex
Advanced Cross-Browser Flexbox Introduction The CSS Flexible box module level 3 — or Flexbox for short — brings with it a lot of power and some very exciting possibilities for web development, allowing us to put together complex site layouts easily and rapidly, and dispensing with some of the illogical hacks and kludges that we’ve traditionally used. I dealt with the basics of Flexbox in my article Flexbox: fast track to layout nirvana? Introducing the example The example I have built for this article looks like Figure 1: This has multiple levels of Flexboxes contained within it. The overall layout The basic layout of the site is like this: The <section> is set to display as a flexible box like so: Note: Different IE-specific properties are specified at the top of the rule because IE10 currently supports different Flexbox syntax (from 2011) to the latest spec supported by Opera and Chrome. I am making the flow horizontal, but forcing the <nav> to sit on its own line using the following rule: Child flexboxes Conclusion
Image comparison slider with pure CSS As a few of you know, I have been spending a good part of this year writing a book for O’Reilly called “CSS Secrets” (preorder here!). I wanted to include a “secret” about the various uses of the resize property, as it’s one of my favorite underdogs, since it rarely gets any love. However, just mentioning the typical use case of improving the UX of text fields didn’t feel like enough of a secret at all. Then I remembered Dudley’s awesome Before/After image slider from a while ago. The good parts: More semantic markup (2 images & 2 divs). Of course, few things come with no drawbacks. One big drawback is keyboard accessibility. Also, none of the two seems to work on mobile. It might not be perfect, but I thought it’s a pretty cool demo of what’s possible with the resize property, as everybody seems to only use it in textareas and the like, but its potential is much bigger. And now if you’ll excuse me, I have a chapter to write
Working with flexbox Flexible layouts. Equal height columns. Presentation independence from your HTML source order. These things haven't been so easy to achieve with CSS—until now. The flexible box layout, the new flexbox specification, makes creating any of these layouts easy, and much more. In this article I'll walk you through the latest flexbox specification and use a simple demo to show you how to create a layout that's flexible, and has equal height columns and elements that you can arrange in any order, regardless of their order in the HTML source. There is some bad news with regard to flexbox and browser support. Opera (12.1) - Supports the latest specification without the need for vendor prefixes.Chrome (23.0) - Supports the latest specification, but requires the -webkit vendor prefix.Safari (5.1) - Supports an older version of the specification with the -webkit vendor prefix.Internet Explorer (10) - Supports an older version of the specification with the -ms vendor prefix. Figure 1. Figure 2.