These are different styles.  
`display: box;` is a version of 2009.  
`display: flexbox;` is a version of 2011.  
`display: flex;` is the actual version.  

*Quote of Paul Irish*

&gt; Warning: Flexbox has undergone some major revisions, so this article
&gt; is out of date. In summary, the [old standard (Flexbox 2009)][1], which
&gt; this article is based on, was implemented in Chrome since v4, Firefox
&gt; since v2, and IE10 beta.
&gt; 
&gt; Since then, [the new flexbox standard debuted][2] and started to debut in
&gt; Chrome 17. Stephan Hay has [written a guide on the new flexbox
&gt; implementation][3]. Since then, the spec underwent naming changes which
&gt; started landing in Chrome 21. Chrome 22 has a stable implementation of
&gt; the latest spec.
&gt; 
&gt; At this point, implementing either [has its risks][4], so be aware.

[Here][5] is the blog about the different flexbox statements.  
[This][6] is a blog entry by css-tricks about the different versions.

When i use flexbox, i always write it like that:

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

Edit:  
Still not everyone has a browser/device capable of viewing flexbox layouts. So for fallback solutions or alternatives there is [this article][7] by Kenan Yusuf on how to *use flexbox without using flexbox*.


  [1]: http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
  [2]: http://dev.w3.org/csswg/css-flexbox/
  [3]: http://www.the-haystack.com/2012/01/04/learn-you-a-flexbox/
  [4]: http://html5please.com/#flexbox
  [5]: http://www.html5rocks.com/en/tutorials/flexbox/quick/
  [6]: http://css-tricks.com/old-flexbox-and-new-flexbox/
  [7]: http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

The specification has been through many iterations, see [2009][1], [2012][2], [2013][3] and each time the value was changed. `display: flex;` is the latest.

It is still a draft specification so any current implementation may still change.

  [1]: http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
  [2]: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/
  [3]: http://dev.w3.org/csswg/css-flexbox/

display: flex;
Is latest and better version currently we can use that in our code.

So go for that.


The following code results in _use of unassigned local variable &quot;numberOfGroups&quot;_:

    int numberOfGroups;
    if(options.NumberOfGroups == null || !int.TryParse(options.NumberOfGroups, out numberOfGroups))
    {
        numberOfGroups = 10;
    }

However, this code works fine (though, [ReSharper][1] says the `= 10` is redundant):

    int numberOfGroups = 10;
    if(options.NumberOfGroups == null || !int.TryParse(options.NumberOfGroups, out numberOfGroups))
    {
        numberOfGroups = 10;
    }

Am I missing something, or is the compiler not liking my `||`?

I&#39;ve narrowed this down to `dynamic` causing the issues (`options` was a dynamic variable in my above code). The question still remains, **why can&#39;t I do this**?

This code *doesn&#39;t* compile:

	internal class Program
	{
		#region Static Methods

		private static void Main(string[] args)
		{
			dynamic myString = args[0];

			int myInt;
			if(myString == null || !int.TryParse(myString, out myInt))
			{
				myInt = 10;
			}

			Console.WriteLine(myInt);
		}

		#endregion
	}

However, this code *does*:

	internal class Program
	{
		#region Static Methods

		private static void Main(string[] args)
		{
			var myString = args[0]; // var would be string

			int myInt;
			if(myString == null || !int.TryParse(myString, out myInt))
			{
				myInt = 10;
			}

			Console.WriteLine(myInt);
		}

		#endregion
	}

I didn&#39;t realize `dynamic` would be a factor in this.

  [1]: http://en.wikipedia.org/wiki/ReSharper


Why does this (null || !TryParse) conditional result in &quot;use of unassigned local variable&quot;?

I am experimenting with the Google Maps for iOS SDK latest version 1.2.1.2944 to animate a `GMSGroundOverlay`. The user has control over the image sequence, so using an animated `UIImage` isn&#39;t a possibility sadly, so i&#39;m loading in the `UIImage` on the fly. The `GMSGroundOverlay.icon` is set to the `UIImage` that is being updated.

Aside from high memory usage, I seem to have struck a limitation in that whenever I try to overlay a `UIImage` using `GMSGroundOverlay.icon` that is more than 1000px x 1000px, it crashes. Referencing a `UIImage` of 1000px x 1000px gets around the crash. 

It strikes me though that maybe I should utilise `CATiledLayer` for handling the image to only load into memory and subsequently into the icon property of `GMSGroundOverlay`, but has anyone had any experience of using `CATiledLayer` with Google Maps for iOS SDK and sequencing images as an animated `GMSGroundOverlay`?





GMSGroundOverlay animating - should I be using a CATiledLayer?

Yesterday I got a website in the school which uses the CSS&amp;nbsp;3 flexbox statement. I never used that before. So I googled it a bit and found a lot of different styles of the flexbox statements.  

Some guys write `display: box;`, some use `display: flexbox;`, and other `display: flex;`.

So what are the differences? Which I should use? 



CSS3 Flexbox: display: box vs. flexbox vs. flex

Yesterday I got a website in the school which uses the CSS 3 flexbox statement. I never used that before. So I googled it a bit and found a lot of different styles of the flexbox statements.
Some guys write <code>display: box;</code>, some use <code>display: flexbox;</code>, and other <code>display: flex;</code>.
So what are the differences? Which I should use?

I noticed that my usage of the CSS3 `calc()` function as the unit for `width` is not working in the latest version of Chrome.

In the Chrome Developer tools, the rule with `calc()` has a &lt;strike&gt;strikethrough&lt;/strike&gt; through it and an exclamation mark in a yellow triangle to the left of it. This is signaling that the property or value is not recognized.

How do I get it to work in modern browsers? Because it is a value and not a property, where do the vendor prefixes go?

### Update:
When I say it doesn&#39;t work, I mean that Chrome Dev Tools is saying that it is not recognizing my usage of it `width: calc(100%-88px);`. How do I know it is not recognizing it? Because of the strikethrough and the yellow triangle icon next to the style rule in chrome dev tools.


CSS3 calc(100%-88px) not working in Chrome

Let&#39;s say I have a couple of columns, of which some I&#39;d like to rotate the values of:

http://jsfiddle.net/MTyFP/1/

    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;span&gt;Normal&lt;/span&gt;&lt;/div&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;a&gt;Normal&lt;/a&gt;&lt;/div&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;b&gt;Rotated&lt;/b&gt;&lt;/div&gt;
        &lt;div class=&quot;statusColumn&quot;&gt;&lt;abbr&gt;Normal&lt;/abbr&gt;&lt;/div&gt;
    &lt;/div&gt;

With this CSS:

    .statusColumn b {
      writing-mode: tb-rl;
      white-space: nowrap;
      display: inline-block;
      overflow: visible;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

It ends up looking like this:

![A series of four block-level elements. The third element&#39;s text is rotated.][1]

Is it possible to write any CSS that will cause the rotated element to affect its parent&#39;s height, such that the text would not overlap the other elements? Something like this:

![The third column&#39;s text now affects its parent box&#39;s height such that the text fits within the box.][2]


  [1]: http://i.stack.imgur.com/gIK5E.png
  [2]: http://i.stack.imgur.com/d82jr.jpg

Rotated elements in CSS that affect their parent&#39;s height correctly

I&#39;m using the new `position: sticky` ([info][1]) to create an iOS-like list of content.

It&#39;s working well and far superior than the previous JavaScript alternative ([example][2]) however as far as I know no event is fired when it&#39;s triggered, which means I can&#39;t do anything when the bar hits the top of the page, unlike with the previous solution.

**I&#39;d like to add a class (e.g. `stuck`) when an element with `position: sticky` hits the top of the page. Is there a way to listen for this with JavaScript? Usage of jQuery is fine.**


  [1]: http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
  [2]: http://jsbin.com/omanut/2/edit


Event to detect when position:sticky is triggered

I have the following div element:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .description {
      color: #b4afaf;
      font-size: 10px;
      font-weight: normal;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;description&quot;&gt;Some text here&lt;/div&gt;

&lt;!-- end snippet --&gt;

Then I have a click function on an element to hide the above div:

    $(&#39;#target&#39;).click(function(){
      $(&quot;.description&quot;).hide();
    });


When I hide the div, it collapses and stops taking up space. This messes up the layout of my page.

Is there a way to hide the div, but still maintain the space it was taking before? I don&#39;t want to change the font color because it would be still selectable.

Hide div but keep the empty space

I was just wondering what could be the default &quot;position&quot; attribute of a DIV ?
Just the way a DIV has display property as BLOCK, what is the default property for position attribute ?

What is the default value of &quot;position&quot; attribute of a DIV?

I have a major issue with flexbox layout. I build a container with a boxes filled with images, and i decided to use flexbox layout to justify the content to make it looks like a grid

Her&#39;s the code:

    &lt;div class=&quot;container&quot;&gt;
        
        &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
        ...
        &lt;div class=&quot;item&quot;&gt;&lt;/div&gt;
    
    &lt;/div&gt;
and the CSS:

    .container {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        justify-content: space-around;
        -webkit-justify-content: space-around;
        -moz-justify-content: space-around;
        flex-flow: row wrap;
        -webkit-flex-flow: row wrap;
        -moz-flex-flow: row wrap;
    }
    
    .container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

And everything looks good except the last line/row - when it not contain the same number of element that other lines, centering elements and it broke my grid effect.

http://jsfiddle.net/puz219/7Hq2E/

How to align last line/row to left side?

How to align left last row/line in multiple line flexbox

How do I prevent line wrapping of a flexbox element? Is it even possible?

I&#39;m attempting to create a two column grid with flexbox with the following markup:

    &lt;div class=&quot;flex-container&quot;&gt;
       &lt;div class=&quot;no-wrap&quot;&gt;this should not wrap&lt;/div&gt;
       &lt;div class=&quot;can-wrap&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam debitis consequuntur incidunt neque vel in blanditiis id optio distinctio culpa rem voluptatibus quas architecto ratione assumenda omnis laboriosam? Earum esse.&lt;/div&gt;
    &lt;/div&gt;

The `.no-wrap` element should only be as wide as it &#39;needs to be&#39; such that all of the text inside does not wrap to a second line. The `.can-wrap` element will take up the remaining space, and wrap if need be.

I&#39;m using this CSS (with prefrix free):

    .flex-container{
      display:flex;
    }

    .no-wrap{
      flex-basis:initial;
    }

I thought the `flex-basis:initial` would prevent the element from wrapping lines - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Here&#39;s a codepen: http://codepen.io/jshawl/pen/bknAc

I know I can fix the width of the `.no-wrap` element, but how can I make it be as wide enough to prevent line wrapping? 

The float equivalent for the `.no-wrap` element would be:

    .no-wrap{
      display:block;
      float:left; /* be as wide as need be! */
    }



prevent wrapping lines in flexbox child element

# Short version

When using `flex-flow: column wrap` and `display: inline-flex`, it doesn&#39;t shrinkwrap like `inline-block`:

[![enter image description here][1]][1]

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    (function() {
      var ascending = true;
      setInterval(function() {
        var parent = document.getElementById(&#39;flex&#39;);
        if (ascending) {
          var child = document.createElement(&#39;p&#39;);
          child.innerHTML = &quot;foo&quot;;
          parent.appendChild(child);
        } else {
          parent.removeChild(parent.children[0]);
        }
        if (parent.children.length &lt;= 1) ascending = true;
        if (parent.children.length &gt;= 40) ascending = false;
      }, 20);
    })();
    (function() {
      var ascending = true;
      setInterval(function() {
        var parent = document.getElementById(&#39;failex&#39;);
        if (ascending) {
          var child = document.createElement(&#39;p&#39;);
          child.innerHTML = &quot;foo&quot;;
          parent.appendChild(child);
        } else {
          parent.removeChild(parent.children[0]);
        }
        if (parent.children.length &lt;= 1) ascending = true;
        if (parent.children.length &gt;= 40) ascending = false;
      }, 20);
    })();

&lt;!-- language: lang-css --&gt;

    #flexdesc {position: absolute; top: 25px;}
    #flex {
      top: 50px;
      position: absolute;
      display: inline-flex;
      flex-flow: row wrap;
      outline: 1px solid black;
      padding: 3px;
      max-height: 100%;
      max-width: 180px;
      align-content: flex-start;
      transform: matrix(0, 1, 1, 0, 0, 0);
      transform-origin: top left;
    }

    #flex &gt; p {
      margin: 0;
      outline: 1px solid black;
      height: 30px;
      width: 30px;
      align-self: flex-start;
      transform: matrix(0, 1, 1, 0, 0, 0);
    }
    #failexdesc {position: absolute; top: 275px;}
    #failex {
      top: 300px;
      position: absolute;
      display: flex;
      flex-flow: column wrap;
      outline: 1px solid black;
      padding: 3px;
      max-height: 200px;
      align-content: flex-start;
      transform-origin: top left;
    }

    #failex &gt; p {
      margin: 0;
      outline: 1px solid black;
      height: 30px;
      width: 30px;
      align-self: flex-start;
    }

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;meta charset=utf-8 /&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;flexdesc&quot;&gt;What I expect it to do&lt;/div&gt;
      &lt;div id=&quot;flex&quot;&gt;
        &lt;p&gt;foo&lt;/p&gt;
        
        &lt;!-- add extra &quot;&lt;p&gt;foo&lt;/p&gt;&quot; here. --&gt;
      &lt;/div&gt;
      &lt;div id=&quot;failexdesc&quot;&gt;What it does&lt;/div&gt;
      &lt;div id=&quot;failex&quot;&gt;
        &lt;p&gt;foo&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

&lt;!-- end snippet --&gt;

Notice how the size of each flex container changes (or doesn&#39;t change!)

I want this behavior because I want to place these element side by side for a horizontally scrolling website.

**Why doesn&#39;t it shrinkwrap? How do I make it shrinkwrap?**

&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;hr/&gt;
  

  

  

  

  





# Original question

`flex-flow: row wrap` is simple enough to understand. If nothing is &quot;flexing&quot;, it acts similar to inline elements; It flows to the right until it can&#39;t do so anymore, at which point it makes a new row.

`flex-flow: column wrap` with `display: flex` is similar. It flows down, until it can&#39;t flow down anymore (`max-width`?), and then starts a new column. Of course, since the parent is  `display: flex`, it&#39;s a block-level element, so that column will be halfway over due to the fact that `align-content` defaults to `stretch`. I could easily change that to `flex-start` to make the new column adjacent to the previous.

...but the container is still too wide. It&#39;s still a block, and fills the width of it&#39;s parent.

**I need the flexbox to shrink-to-fit its columns.** Why? I&#39;m trying to use flexbox in a horizontally scrolling website. Granted, I could just let the children overflow, but that overflowing tends to... break things.
So I figured I needed `flex-flow: column wrap` with `display: inline-flex`. I was hoping for a &quot;top to bottom, left to right&quot; effect, where the parent has no empty space.

...and then [**this**][2] happened. In chrome, the parent width is equal to the sum of the widths of the children, but otherwise, wrapping is normal. In firefox, the parent is full width, and just grows taller to accomodate the elements (I don&#39;t think firefox supports wrapping). In IE11, the width is correct, but the children just overflow down (even out of the body). 

I&#39;m so confused.

What am I doing wrong here? I understand that flexbox is a more recent feature, but I can&#39;t tell how much of this is my fault vs the browser.

By they way, I&#39;m testing this in chrome. A chrome-only solution is fine by me. (But an elegant catch-all solution is always nice!)

---

Here&#39;s [the code for the demo I linked to][2], in case jsbin is down:

    

&lt;!-- begin snippet: js hide: true console: false babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    var ascending = true;
       setInterval(function() {
         var parent = document.getElementById(&#39;flex&#39;);
         if (ascending) {
           var child = document.createElement(&#39;p&#39;);
           child.innerHTML = &quot;f&quot;;
           parent.appendChild(child);
         } else {
           parent.removeChild(parent.children[0]);
         }
         if (parent.children.length &lt;= 1) ascending = true;
         if (parent.children.length &gt;= 30) ascending = false;
       }, 200);

&lt;!-- language: lang-css --&gt;

    #flex {
      display: inline-flex;
      flex-flow: column wrap;
      outline: 1px solid black;
      padding: 3px;
      max-height: 100%;
      align-content: flex-start;
    }
    p {
      margin: 0;
      outline: 1px solid black;
      width: 10px;
    }
    body {
      height: 150px;
      width: 300px;
      outline: 1px dashed black
    }

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=utf-8 /&gt;
      &lt;title&gt;JS Bin&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;flex&quot;&gt;
        &lt;p&gt;f&lt;/p&gt;
        &lt;!-- add extra &quot;&lt;p&gt;foo&lt;/p&gt;&quot; here. --&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

&lt;!-- end snippet --&gt;


  [1]: https://i.stack.imgur.com/Es3ch.gif
  [2]: http://jsbin.com/EGEMUfo/6

How do I use &quot;flex-flow: column wrap&quot;?

I have a simple flex-box layout with a container like:

    .grid {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
    }

Now I want the items in the last row to be aligned with the other. `justify-content: space-between;` should be used because the width and height of the grid can be adjusted. 

Currently it looks like 

![The item in the bottom right should be in the middle][1]

Here, I want the item in the bottom right to be in the &quot;middle column&quot;. What is the simplest way to accomplish that? Here is a small [jsfiddle][2] that shows this behaviour.

  [1]: http://i.stack.imgur.com/UrT6g.png
  [2]: http://jsfiddle.net/thorbenb/qxhHx/

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .exposegrid {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
    }

    .exposetab {
      width: 100px;
      height: 66px;
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(0, 0, 0, 0.4);
      border-radius: 5px;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      margin-bottom: 10px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;exposegrid&quot;&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;exposetab&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

Flex-box: Align last row to grid

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .flex-container {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    row {
      width: 100%;
    }
    .flex-item {
      background: tomato;
      padding: 5px;
      width: 200px;
      height: 150px;
      margin: 10px;
      line-height: 150px;
      color: white;
      font-weight: bold;
      font-size: 3em;
      text-align: center;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;flex-container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;span class=&quot;flex-item&quot;&gt;1&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;span class=&quot;flex-item&quot;&gt;2&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;span class=&quot;flex-item&quot;&gt;3&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;span class=&quot;flex-item&quot;&gt;4&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;


&lt;!-- end snippet --&gt;

http://codepen.io/anon/pen/zLxBo



Content Type	Original Author	Original Content on Stackoverflow
Question	user1722486	View Question on Stackoverflow
Solution 1 - Css	Michael Schmidt	View Answer on Stackoverflow
Solution 2 - Css	andyb	View Answer on Stackoverflow
Solution 3 - Css	johnie	View Answer on Stackoverflow

CSS3 Flexbox: display: box vs. flexbox vs. flex

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

GMSGroundOverlay animating - should I be using a CATiledLayer?

Why does this (null || !TryParse) conditional result in "use of unassigned local variable"?

Attributions