flex direction in safari

• Skip to main content
• Select language
• Skip to search
• flex-direction

Formal syntax

The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Note that the value row and row-reverse are affected by the directionality of the flex container. If its dir attribute is ltr , row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl , row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

See Using CSS flexible boxes for more properties and information.

The following values are accepted:

Specifications

Browser compatibility.

[1] To activate flexbox support for Firefox 18 and 19, the user has to change the about:config preference layout.css.flexbox.enabled to true .

[2] Multi-line flexbox is supported since Firefox 28.

In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit , defaulting to false . Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true .

• Using CSS flexible boxes

Document Tags and Contributors

• CSS Flexible Boxes
• CSS Property
• CSS Reference
• CSS Flexible Box Layout
• Advanced layouts with flexbox
• Using CSS Flexible Boxes
• elements, absolute positioning, and JavaScript hacks, and start building horizontal and vertical flowing layouts in just a few lines of CSS. Some basic example use cases:">Using flexbox to lay out web applications
• align-content
• align-items
• flex-shrink
• justify-content

Bill Erickson

Flexbox with safari support.

Written by Bill Erickson Published on September 21, 2015 Updated on December 5, 2018

css flexbox

Bill Erickson is the co-founder and lead developer at CultivateWP , a WordPress agency focusing on high performance sites for web publishers.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Other articles in this series

A starter theme for building hybrid wordpress themes.

May 29, 2023

A hybrid WordPress theme uses theme.json to define styles and customize the block editor while also using traditional PHP template files. Hybrid themes leverage the block editor for content but…

Custom recipe templates for WP Recipe Maker

October 7, 2019

I frequently work with food bloggers to improve the design, speed, and functionality of their websites. The recipe card is the most important element on the page. It should be…

Custom importer for WP Recipe Maker

October 21, 2019

A detailed guide to importing recipes from *any* theme or plugin to WP Recipe Maker.

How to Setup ConvertKit with a WordPress Form

April 13, 2017

Integrate ConvertKit and WPForms easily connects forms on your website to your ConvertKit email marketing account, enabling you to capture more leads and manage campaigns more effectively. WPForms‘ simple drag-and-drop form builder allows…

CSS Reference

Css properties, css flex-direction property.

Set the direction of the flexible items inside the <div> element in reverse order:

Tip: More "Try it Yourself" examples below.

Definition and Usage

The flex-direction property specifies the direction of the flexible items.

Note: If the element is not a flexible item, the flex-direction property has no effect.

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Advertisement

Property Values

More examples.

Using flex-direction together with media queries to create a different layout for different screen sizes/devices:

Related Pages

CSS Tutorial: CSS Flexible Box

CSS Reference: flex-flow property

CSS Reference: flex-wrap property

CSS Reference: flex property

CSS Reference: flex-grow property

CSS Reference: flex-shrink property

CSS Reference: flex-basis property

HTML DOM reference: flexDirection property

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

• Jobs Find Jobs Post a Job
• Companies Find Companies    List your Company   

• Learning Tutorials    Articles

•  SQL 
•  .NET 
•  HTML 
•  CSS 
•  JavaScript 

Select tutorial

• CSS flex-direction

flex-direction specifies the the pack direction of flex items.

Items can be packed row-wise, column-wise, and in reverse order.

By default, flex items are packed in rows.

A flex container with flex-direction set to column . The items are packed in a column-first fashion.

• More Examples

Click the buttons to see the different flex-direction values.

row row-reverse column column-reverse initial inherit

Did you know?

Alternating flex-direction

With little CSS you can create alternating flex directions for each row. The odd numbered rows have a row-reverse flex direction.

• Browser support

This table shows when flex-direction support started for each browser.

• You may also like

• Our CSS flex Property Reference
• Our CSS Flexbox Tutorial
• Our HTML Layout Tutorial

• CSS Tutorial
• CSS Selectors
• CSS Borders
• CSS Animation
• CSS Comments
• Did you know

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flexbox flex-column issue in Safari 10 #21903

cquillen2003 commented Feb 2, 2017

wonderment commented Feb 3, 2017 • edited

Sorry, something went wrong.

zavvla commented Feb 3, 2017

mdo commented Mar 26, 2017

• 👍 2 reactions

cr101 commented Mar 26, 2017

tavax commented Apr 12, 2017

Mdo commented apr 23, 2017.

sandhya-nuthakki commented Aug 13, 2018

No branches or pull requests

justify-content

The justify-content property is a sub-property of the Flexible Box Layout module .

It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

The justify-content property accepts five different values:

• flex-start ( default ): items are packed toward the start line
• flex-end : items are packed toward to end line
• center : items are centered along the line
• space-between : items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-around : items are evenly distributed in the line with equal space around them
• space-evenly : items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

The following figure helps understand what the justify-content property actually does:

The following demo shows how flex items behave depending on justify-content value:

• The red list is set to flex-start
• The yellow is set to flex-end
• The blue is set to center
• The green is set to space-between
• The pink is set to space-around
• The light green is set to space-evenly

Browser support

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

Blackberry browser 10+ supports the new syntax.

As of our latest December 2018 update, justify-content: space-evenly; is gaining support. There is a working draft spec on it.

For more informations about how to mix syntaxes in order to get the best browser support, please refer to our “Using Flexbox” article .

More information

• CSS Flexible Box Layout Module Level 1
• How To Use CSS Grid to Justify and Align Content and Items

A Complete Guide to Flexbox

• Using Flexbox
• Old Flexbox and new Flexbox

Related guides

A Complete Guide to CSS Grid

Centering in CSS: A Complete Guide

Related tricks, a quick way to remember the difference between `justify-content` and `align-items`.

Building a Conference Schedule with CSS Grid

Centering: The Newest Coolest Way vs. The Oldest Coolest Way

Control layout in a multi-directional website.

Fun Times With Sizing Grid Elements

Please Give Me Some Space

Align-content.

align-items

flex-direction

justify-items

justify-self

Place-content.

place-items

The Demo is not displaying correctly on Safari, both desktop and iOS. Any idea why? I’ve tried all the different prefixes and syntaxes and nothing seems to work.

display: -webkit-flex; /* Safari / -webkit-justify-content: space-around; / Safari 6.1+ */ display: flex; justify-content: space-around;

I believe justify-content is not support on either safari or iOS. I think this article is actually referencing the support for flexbox rather than the actually property it is discussing.

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Browser_compatibility

I just tested this as well

have a test

I found that the -webkit-box-pack property would behave pretty much like justify-content on Safari/iOS (at least in my test cases). See the Safari Documentation .

I wonder how to make space-around smaller or bigger as we want…

@kuyseng if you mean equal spacing between elements but more tightly packed, simply shorten the container or add padding to squeeze the elements together. If you mean unequal spacing (e.g. make the space between the first 2 elements narrower than the next gap), I would add empty divs between the elements with flex-grow attributes to set how the available space should be divided between the gaps. Your HTML won’t be as clean, but it will give you a lot of control, e.g. add space before the first element but not after the last, etc.

on safari don’t work.

It doesn’t seem to work in WinJs at all.

for better understanding of “display:flex” property further checkout this. I found this was more easy to understand by playing a game with CSS editor. http://flexboxfroggy.com/

Hi ! I tried to use “justify-content” on Sublime Text 2, but it seems not to work. Do I have to upgrade my ST2 or is it simply impossible ? Thanks in advance.

Is it just me or is the term ‘justify’ completely wrong here? In a typographic context, ‘Justified’ text is text is text that is adjusted so that the first and last items on a line are anchored left and right with the items in the middle distributed evenly.

The ‘space-between’ and ‘space-around’ properties would probably accurately show this in action but ‘flex-start’ and ‘flex-end’ properties have absolutely nothing to do with ‘justifying’.

It really bugs me when clients ask for copy to be ‘left justified’ when they actually mean ‘left aligned’.

I am pretty sure that as of today (August 4th, 2017), justify-content: space-evenly is not yet available. It seems to work in Firefox; however, I can’t find anything that explictly says this. Can anyone confirm this? Thanks.

As of that date, yep, you’re correct.

It also works in Chrome. I’m on version 60.0.3112.90 and justify-content: space-evenly works just fine.

I’m using Chrome too, and space-evenly works great. I hope the other browsers support it soon, as I much prefer that look over space-around in my current project.

space-evenly currently doesn’t work on Safari on iPhone 6 :(

The option is not an attribute of a flex-item, but of the flex container.

If we define a flex-fallback with floats, a .clearfix on the wrapper-element can be necessary. But the usual pseudo-element clearfix causes problems with the justify-content: space-between declaration, cause it reacts as a additional flex-element. I.e. the space will distributet unevenly. In this case we have to distribute the space manually ( margin-x: auto; ) or use another clearfix-method, which can have other issues. Any other workarounds for that?

Hi, I think syntax section is a bit misleading as justify-content is flex container property, not flex-item, so should be

.flex-container { justify-content: center; }

.flex-item { justify-content: center; }

I’m trying to obtain the same result with

justify-content as I get with {align-items:stretch}

Any idea how to accomplish this safely across devices?

Ideally I’d need to also be able to override {justify-content: flext-start} for example.

I’ve been using {justify-content: stretch} but the results are mixed.

This is so frustrating. The effect of display:flex and justify-content is not just to align small items along the major axis, but also to wrap along the cross axis. I can’t find any information about why items are not flush together along the cross axis when they are wrapped!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

WebKit Features in Safari 17.5

May 13, 2024

by Jen Simmons

Happy May! It’s time for another release of Safari — our third significant update of 2024. With just a month until WWDC24 and the unveiling of what’s coming later this year, we are happy to get these 7 features and 22 bug fixes into the hands of your users today.

There are several exciting new CSS features in Safari 17.5, including text-wrap: balance , the light-dark() color function, and @starting-style , plus the ability to use feature queries with @import rules. Let’s look at how you can put each one to use.

Text wrap balance

On the web, with its flexible container widths, inconsistent lengths of content, and variation between browsers, it can feel impossible to avoid having text wrap in such a way that too few words end up all by themselves on a very short last line.

When type was set by hand, typographers would painstakingly avoid this undesirable result by manually moving content around. Over the decades, web developers have tried a series of different tricks to avoid orphans in CSS, in HTML, in JavaScript, and in content management systems. None work very well. The attempts usually feel hacky, laborious, and fragile.

To solve this and other frustrations, the CSS Working Group has defined three new options that you can use to change how text will wrap. You can switch from default wrapping to another style with text-wrap . WebKit for Safari 17.5 adds support for the first of these new options — balancing.

The text-wrap: balance rule asks the browser to “balance” the lines of text and make them all about the same length.

You can see how now the text no longer fills the containing block — there’s a large amount of space on the right of the words. This is expected, and something you’ll want to think about as you decide when to use text-wrap: balance .

Where exactly each line of text will break when using text-wrap: balance may be slightly different in each browser. The CSS Text level 4 web standard leaves it up to each browser engine team to decide which algorithm they want to use in determining how exactly to wrap balanced text.

It can be computationally expensive for the browser to count characters and balance multiple lines of text, so the standard allows browsers to limit the number of lines that are balanced. Chromium browsers balance 6 or fewer lines, Firefox balances 10 or fewer, while Safari/WebKit balances an unlimited numbers of lines.

For now, Safari does not balance text if it’s surrounding a float or initial letter. And Safari disables the balancer if the content contains preserved tabs or soft hyphens.

Text wrap shorthands and longhands

The text-wrap property is actually a shorthand for two longhand properties: text-wrap-style and text-wrap-mode .

The text-wrap-mode property provides a mechanism for expressing whether or not text should wrap.

The wrap value turns it on, and the nowrap value turns it off, just like the values for white-space . (In fact, text-wrap-mode is the newly introduced longhand of white-space .) WebKit added support for text-wrap-mode: wrap and nowrap in Safari 17.4 .

The text-wrap-style property selects how to wrap. The initial value is auto — asking text to wrap in the way it has for decades. Or, you can choose a value to switch to another “style” of wrapping.

WebKit for Safari 17.5 adds support for text-wrap-style: balance , stable , and auto .

Of course, the text-wrap shorthand is a way to combine text-wrap-mode and text-wrap-style and declare them together. If you write text-wrap: balance it’s the same as text-wrap: wrap balance , meaning: “yes, please wrap, and when you do, please balance the text”.

Full support will eventually include three properties and six values. No browser supports everything yet, so be sure to look up support for the text-wrap , text-wrap-mode , and text-wrap-style properties, as well as the balance , pretty , stable , auto , wrap , and nowrap values.

The balance , pretty , and stable values will simply fall back to auto in browsers without support, so progressive enhancement is easy. You can use these values today, no matter how many of your users don’t yet have a browser with support. They will simply get auto -wrapped text, just like they would if you didn’t use text-wrap . Meanwhile, those users with support will get an extra boost of polish.

Dark mode and the light-dark() color function

More and more, users expect websites and web apps to support dark mode . Since Safari 12.1 , the prefers-color-scheme media query has given you the ability to write code like this:

Or perhaps you’ve used variables to define colors for both light and dark mode at once, making it easier to use them everywhere.

Well, now there’s a new option — the light-dark() function. It makes defining colors for dark mode even easier.

First, inform the browser you are providing a design for both light and dark modes with the color-scheme property. This prompts the browser to switch the default user agent styles when in dark mode, ensuring the form controls appear in dark mode, for example. It’s also required for light-dark() to work correctly.

Then, any time you define a color, you can use the light-dark() function to define the first color for light mode, and the second color for dark mode.

You can still use variables, if you’d like. Perhaps you want to structure your code like this.

An often-asked question when learning about light-dark() is “does this only work for colors?” Yes, this function only works for colors. Use the prefers-color-scheme media query to define the rest of your color-scheme dependent styles.

Starting style

WebKit for Safari 17.5 adds support for @starting-style . It lets you define starting values for a particular element. This is needed to enable a transition when the element’s box is created (or re-created).

In the above example, the background-color will transition from transparent to green when the element is added to the document.

Many developers are excited to use @starting-style along with display: none interpolation. To do so, WebKit also needs to support animation of the display property, which has not yet shipped in Safari. You can test this use case today in Safari Technology Preview .

Features queries for importing CSS

WebKit for Safari 17.5 adds the supports() syntax to @import rules. Now you can conditionally import CSS files based on whether or not there’s support for a certain feature.

For example, you could load different stylesheets based on whether or not CSS Nesting is supported .

Or you could load certain CSS files when a browser does not have support for Cascade Layers . (Note that any @import rules with layer() will automatically be ignored in a browser without layer support.)

Or simply test for a feature. Here, these layout styles will only be loaded if Subgrid is supported .

WebKit for Safari 17.5 adds support for AV1 to WebCodecs when an AV1 hardware decoder is available.

WebKit for Safari 17.5 adds WebGL support for EXT_conservative_depth and NV_shader_noperspective_interpolation .

WKWebView adds support for logging MarketplaceKit errors to the JavaScript console. This will make errors easier to debug.

Bug Fixes and more

In addition to these new features, WebKit for Safari 17.5 includes work polishing existing features.

Accessibility

• Fixed a bug preventing VoiceOver word echoing in some text fields. (122451549) (FB13592798)
• Fixed flickering with multiple accelerated animations and direction changes. (117815004)

Authentication

• Fixed excludeCredentials property being ignored during a passkey registration request. (124405037)
• Fixed the proximity calculation for implicit @scope . (124640124)
• Fixed the Grid track sizing algorithm logical height computation avoid unnecessary grid item updates. (124713418)
• Fixed any @scope limit making the element out of scope. (124956673)
• Fixed native text fields becoming invisible in dark mode. (123658326)
• Fixed fallback native <select> rendering in dark mode. (123845293)
• Fixed scrolling for an element when a video element with pointer-events: none is placed over it. (118936715)
• Fixed HTML5 <audio> playback to continue to the next media activity when in the background. (121268089) (FB13551577)
• Fixed AV1 to decode in hardware on iPhone 15 Pro. (121924090)
• Fixed audio distortion over internal speakers when streaming content in web browsers. (122590884)
• Fixed firing loadeddata events for <audio> and <video> on page load. (124079735) (FB13675360)
• Fixed adjusting the size of the scrollable area when changing betwen non-overlay and overlay scrollbars. (117507268)
• Fixed flickering when showing a layer on a painted background for the first time by avoiding async image decoding. (117533495)
• Fixed line breaking before or between ruby sequences. (122663646)
• Fixed mousemove events in an iframe when the mouse is clicked from outside the iframe and then moves into it while the button is held down. (120540148) (FB13517196)
• Fixed several issues that caused Web Push to not show notifications when the web app or Safari was not already running. (124075358)

Web Inspector

• Fixed info and debug buttons not appearing in the Console Tab until new console messages are displayed. (122923625)
• Fixed WebCodecs to correctly use the VP9 hardware decoder. (123475343)
• Fixed no incoming video in Teams VA. (124406255)
• Fixed the camera pausing occasionally when torch is enabled. (124434403)

Updating to Safari 17.5

Safari 17.5 is available on iOS 17.5 , iPadOS 17.5 , macOS Sonoma 14.5 , macOS Ventura, macOS Monterey and in visionOS 1.2.

If you are running macOS Ventura or macOS Monterey, you can update Safari by itself, without updating macOS. On macOS Ventura, go to  > System Settings > General > Software Update and click “More info…” under Updates Available.

To get the latest version of Safari on iPhone, iPad, or Apple Vision Pro, go to Settings > General > Software Update, and tap to update.

We love hearing from you. To share your thoughts on Safari 17.5, find us on Mastodon at @[email protected] and @[email protected] . Or send a reply on X to @webkit . You can also follow WebKit on LinkedIn . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview on macOS to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 17.5 release notes .