Flexbox is a series of CSS tools for building layouts that are more interesting and difficult to build with previous techniques. This example grid layout was taken from something that I’d seen in another thread. Coupled with an inspiring video that my friend Thomas had shared with me,
I decided to go back for another look at CSS flex techniques. I did a couple of test pages just to get a handle on how I might get it working. Although flex is very well supported by browsers, a lot of tools are still lagging. For example, the Webkit environment that apps like Freeway and even Coda use to preview with the app isn’t up to date and cannot be used to preview your work. This slowed my development and experiments considerably.
So I focused on keeping things simple. But while a grid of uniform-size/shape items would have been easier, this was more fun and a more interesting example. Tell us what you think.
Got the multiple columns going without any problem, but getting text to wrap around a circular image is proving elusive. I have a png where the transparency acts as the circular mask, which I think is correct, looking at the way it’s been done on The Web Ahead Labs page examples.
I’m not particularly code savvy, but my guess is that the
shape-outside: circle
should be applied to the image style extended attributes, but no joy. I’ve also tried using the
-webkit-shape-outside: circle ()
variation that appears in the Web Ahead examples page code. I’ve also tried applying them to just the img tag, using the imported graphic with and without pass-through, and having a wrapping div to the image or with it naked. I am using the latest version of Safari. Stumped.
I thought at first it was the use of WebYep CMS placeholder areas for text or images not allowing the text to flow around the transparency of the image, but I’ve replaced the WebYep derived image and wrapping text with Freeway generated content.
Here is some further reading on some of the options beyond the circle() value –
Your columns work in Safari, but not in Chrome or FF. You can add the vendor extensions to make them behave. Here’s how I set them in Freeway:
First, I create a style to apply to the text container and name it “columns”. If I plan to apply the style in the traditional select and click method, then I type
columns
into the Name field of the Style Editor. But if I need to add it as an Extended style then I type
.columns
(with the leading stop) into the Tag field.
Next, I open the Extended interface and in the Name field type
-webkit-columns
Then, in the value field enter
212px; -moz-columns: 212px; columns: 212px
This will force Freeway to write them in the correct sort order (webkit, moz, unattributed). You’ll notice that I do not declare the number of columns… only the width. Browsers will react to this by trying to make whatever number of columns are necessary to meet the width requirement. The result is columns that are responsive to the container-width. Sort-of. It works reliably enough for my tastes, which include justified alignment and CSS hyphens set to auto.
The column-gap and column-rule properties need to be prefixed as well, and you can use the same technique to make Freeway write them in proper sort order as the columns property. In the same Freeway style.
Many thanks Ernie – I managed to work out that the specific vendor extensions were needed, but your method is much more compact than the one I implemented within Freeway. I did the three webkit ones, then the three moz ones and then the three generic ones. You neatly combine the three into one elegant snippet.
Big thanks for the video link to the video which did indeed inspire me!