If you’re familiar with iOS development you will know that a UITableView is very efficient when displaying a list of data. A simplification of what it does is display enough cells to fill the viewport plus a few more either side. As you scroll it re-uses cells that are now out of the viewport so … Continue reading "UITableView in JavaScript, list view with re-usable cells using flexbox"

A CSS responsive layout using the latest 'Flexbox' styling with header, three columns and sticky footer.

An accordion gallery using the latest flexbox styling techniques.

Back to the very basic code and style to produce a 'sticky holy grail' layout.

A vertical accordion menu using the latest flexbox syling which does not require size calculations.

A droplist menu using the latest flexbox syling which does not require size calculations.

A CSS only menu using flexbox and order animation. Suitable for all the latest browsers, but only Firefox supports animation of the 'order' style.

A CSS only responsive layout suitable for all the latest browsers and OS.

CSS flexbox is an incredibly useful tool for layout without using floats or positioning. Currently almost all current browser version support flexbox, making it a go-to standard for web design. It can solve a number of problems efficiently, such as vertical alignment, space distribution, ordering of elements and sizing. It offers more freedom to arrange […]

The post Master CSS Flexbox in 5 Simple Steps appeared first on Web Designer Wall.

Flexbox is not a single property; it's a complete module that comes with a number of features. In this article, we will look at a complete guide for CSS Flexbox.

Before going into detail, I just want to answer why we should use flexbox layout instead of a traditional way of doing layout webpage using display properties, float properties, positional properties

Download the slides and view the demo page for my presentation on Putting Flexbox into Practice for Blend Conference 2013, as well as get links to related articles, tutorials, and tools on Flexible Box Layout.

Download the slides and view the demos for my presentation on practical flexbox progressive enhancement, "Leveling Up With Flexbox" for Smashing Conference in Oxford, as well as get links to related articles, tutorials, and tools on Flexible Box Layout.

Learn how to use flexbox to pin two things to opposite ends of the viewport with a heading centered in between. Using media queries and flexbox's re-ordering capabilities, we can make this layout pattern even more responsive.

Download the slides and view the demos for my presentation on practical flexbox progressive enhancement for RWD, "Enhancing Responsiveness with Flexbox" for the RWD Summit, as well as get links to related articles, tutorials, and tools on Flexible Box Layout.

The Modernizr feature-detection script now includes four tests for flexbox support, which you can use to target browsers with varying levels of support more precisely.

See how easy it is to create an equal heights, responsive CSS pricing table using the power of CSS Flexbox.

I mentioned this the other day via Michelle Barker’s coverage, but here I’ll link to the official announcement. The main thing is that we’ll be getting gap with flexbox, which means:

.flex-parent {
  display: flex;
  gap: 1rem;
}
.flex-child {
  flex: 1;
}

That’s excellent, as putting space in between flex items has been tough in the past. We have justify-content: space-between, which is nice sometimes, but that doesn’t allow you to explicitly tell the flex container how … Read article “Chromium lands Flexbox gap”

The post Chromium lands Flexbox gap appeared first on CSS-Tricks.