Both set the alignment of the content.

# 1. `justify-content:` along *primary* axis #
(set horizontal alignment/spacing if flex-direction is row or vertical alignment/spacing if flex-direction is column)

For instance, if flex-direction is row (default):

`flex-start;` Align children *horizontally* left

`flex-end;` Align children *horizontally* right

`center;` Align children *horizontally* centered *(amaze!)*

`space-between;` Distribute children *horizontally* evenly across entire width

`space-around;` Distribute children *horizontally* evenly across entire width (but with space on the edges

# 2. `align-items:` along *secondary* axis #
(set vertical alignment if flex-direction is row or horizontal alignment if flex-direction is column)

For instance, if flex-direction is row (default):

`flex-start;` Align children *vertically* top

`flex-end;` Align children *vertically* bottom

`center;` Align children *vertically* centered *(amaze!)*

`baseline;` Aligned children *vertically* so their baselines align *(doesn&#39;t really work)*

`stretch;` Force children to be height of container *(great for columns)*

# See it in action: #

http://codepen.io/enxaneta/full/adLPwv/

# In my opinion: #

These should have been named:

`flex-x:` alignment/spacing in primary axis

`flex-y:` alignment in secondary axis

But with HTML you can never have nice things.  Never.

I am an self-employed iOS developer and so have my own iOS distribution membership.

For a few days, I am working as a developer in a team. My apple account has been added in their iTunes Connect / Users and Roles. It works since I can access to the app details of the current app we develop.

However, I can&#39;t get it right on Xcode. And so Xcode says the bundle ID is not right because I don&#39;t have the provisioning profiles.

In &#39;Project&gt;General&gt;Identity&gt;Team&#39;, I can only select my own account and I don&#39;t see the new team I am part of.
I don&#39;t see it neither in the Accounts page of Xcode preferences.

A provisioning profile has been created by the team leader for me. It didn&#39;t solve the problem.

Question: How to add new team we belong to in Xcode?

---

# Note - at long last Apple will resolve this insanity, 
# They are finally fixing it in 2018:

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/PtnTb.png

Development team not showing in Xcode

If I&#39;m working on a branch and then realize I need to merge another branch into mine here is my current workflow (for this example lets say that I&#39;m working on my-branch and want to merge in master):

    git stash
    git checkout master
    git pull
    git checkout my-branch
    git merge master
    git stash pop

Is there a way in git to pull a branch other than the currently checked out one, or is there a better way to do this?

For example, here&#39;s what I&#39;d like to be able to do (again lets say I&#39;m on my-branch and want to merge in `master`):

    git pull master
    git merge master

The git-pull man page says that a git pull is just a get fetch followed by a git merge, so is there a way to do the merge part of the git pull on a branch other than the one that&#39;s currently checked out?  

Or is what I&#39;m asking for just not possible?

git pull on a different branch

I&#39;m having a really hard time understanding what&#39;s the difference? From my research it seems like `justify-content` can do... `space-between` and `space-around`, while `align-items` can do... `stretch`, `baseline`, `initial` and `inherit`? 

Also looks like both properties share, `flex-start`, `flex-end` and `center`.

Is there and dis/advantages to using one over the other or is it just preference? I feel like they are way to similar to just do the same thing anyone know the difference? thanks!! 

Difference between justify-content vs align-items?

I'm having a really hard time understanding what's the difference? From my research it seems like <code>justify-content</code> can do... <code>space-between</code> and <code>space-around</code>, while <code>align-items</code> can do... <code>stretch</code>, <code>baseline</code>, <code>initial</code> and <code>inherit</code>?
Also looks like both properties share, <code>flex-start</code>, <code>flex-end</code> and <code>center</code>.
Is there and dis/advantages to using one over the other or is it just preference? I feel like they are way to similar to just do the same thing anyone know the difference? thanks!!

Consider the following snippet:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .parent {
      display: flex;
      flex-direction: column;
      width: 400px;
      border: 1px solid red;
      align-items: center;
    }
    .child {
      border: 1px solid blue;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;parent&quot;&gt;
      &lt;div class=&quot;child&quot;&gt;
        Lorem Ipsum is simply dummy text of the printing and typesetting industry
      &lt;/div&gt;
      &lt;div class=&quot;child&quot;&gt;
        Lorem Ipsum is simply dummy text of the printing and typesetting industry
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

In Chrome, the text is wrapping as expected:

[![enter image description here][1]][1]

But, in IE11, **the text is not wrapping**:

[![enter image description here][2]][2]

Is this a known bug in IE? (if yes, a pointer will be appreciated)

Is there a known workaround?

---

[This similar question](https://stackoverflow.com/q/19138107/247243) doesn&#39;t have a definite answer and an official pointer.


  [1]: http://i.stack.imgur.com/qTX4L.png
  [2]: http://i.stack.imgur.com/FEw0L.png

Text in a flex container doesn&#39;t wrap in IE11

Grid columns with list tags, I need to display in correct order per every 3 columns, with auto width enabled for every extra HTML list elements.

This is my example:

  

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

     &lt;style&gt;
            ul {
                margin: 0;
                padding: 0;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                height: 150px;
                width:auto;
            }
        
            li {
                float: left;
                display: inline-block;
                list-style: none;
                position: relative;
                height: 50px;
                width: 50px;
            }
        &lt;/style&gt;

&lt;!-- language: lang-html --&gt;

    &lt;ul&gt;
        &lt;li&gt;1&lt;/li&gt;
        &lt;li&gt;2&lt;/li&gt;
        &lt;li&gt;3&lt;/li&gt;
        &lt;li&gt;4&lt;/li&gt;
        &lt;li&gt;5&lt;/li&gt;
        &lt;li&gt;6&lt;/li&gt;
        &lt;li&gt;7&lt;/li&gt;
        &lt;li&gt;8&lt;/li&gt;
        &lt;li&gt;9&lt;/li&gt;
        &lt;li&gt;10&lt;/li&gt;
        &lt;li&gt;11&lt;/li&gt;
        &lt;li&gt;12&lt;/li&gt;
        &lt;/ul&gt;

&lt;!-- end snippet --&gt;
This is what I have tried so far and works absolutely fine on every other browser but not compatible with Safari browser unless I add this: `display: -webkit-flex;`.

I want to convert the output like this:

    1 4 7 10
    2 5 8 11
    3 6 9 12

It&#39;s important I get this working for Safari browser so far I cant seem to solve this problem at all, I would appropriate any help :)

Test link:

http://jsfiddle.net/rafcastro77/3zd7yspg/59/


Flexbox code working on all browsers except Safari. Why?

I am trying to center column&#39;s content. Does not look like it works for me. Here is my HTML:

    &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;col-xs-1 center-block&quot;&gt;
           &lt;span&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/span&gt;
       &lt;/div&gt;
     &lt;/div&gt;

[JSFiddle Demo][1]


  [1]: https://jsfiddle.net/usth0kd2/2/

How to center content in a Bootstrap column?

I am trying to use `:before` and `:after` with list but it is not working.
I am sure it&#39;s a simple mistake but I am not able to point it out.

Any help would be appreciated

Please check the [fiddle][1]

    &lt;div class=&quot;org-chart&quot;&gt;
      &lt;ul class=&quot;chart chart-prhead&quot;&gt;
        &lt;li&gt;
          &lt;span&gt;&lt;a href=&quot;#&quot;&gt;Dabba&lt;/a&gt;&lt;/span&gt;
          &lt;ul class=&quot;chart-mgr&quot;&gt;
            &lt;li&gt;
              &lt;!-- level 2 --&gt;
              &lt;span&gt;&lt;a href=&quot;#&quot;&gt;Dabba&lt;/a&gt;&lt;/span&gt;
    
            &lt;/li&gt;
    
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
       		
&lt;!-- css code snippet --&gt;

    .chart ul:after {
      border: 1px solid #f30;
    }
    .chart li span:after {
      border: 1px solid #eee;
    }
    .chart li span:before {
      border: 1px solid #ccc;
    }
    .chart li a:after {
      border: 1px solid #666;
    }
    .chart li a:before {
      border: 1px solid #333;
    }


  [1]: http://Please%20check%20the%20[fiddle][1]

CSS :before and :after not working?

I&#39;m trying to bind the src of an image in an element, but it doesn&#39;t seem to work. I&#39;m getting an &quot;Invalid expression. Generated function body:  { backgroundImage:{ url(image) }&quot;.

The [documentation](http://vuejs.org/guide/class-and-style.html#Object_Syntax-1) says to use either &#39;Kebab-case&#39; or &#39;camel-case&#39;.

    &lt;div class=&quot;circular&quot; v-bind:style=&quot;{ backgroundImage: { url(image) }&quot;&gt;&lt;/div&gt;

Heres a fiddle: https://jsfiddle.net/0dw9923f/2/


Vue.js data-bind style backgroundImage not working

https://jsfiddle.net/vhem8scs/

Is it possible to have two items align left and one item align right with flexbox? The link shows it more clearly. The last example is what I want to achieve.

In flexbox I have one block of code. With float I have four blocks of code. That is one reason why I prefer flexbox.

**HTML**

    &lt;div class=&quot;wrap&quot;&gt;
      &lt;div&gt;One&lt;/div&gt;
      &lt;div&gt;Two&lt;/div&gt;
      &lt;div&gt;Three&lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- DESIRED RESULT --&gt;

    &lt;div class=&quot;result&quot;&gt;
      &lt;div&gt;One&lt;/div&gt;
      &lt;div&gt;Two&lt;/div&gt;
      &lt;div&gt;Three&lt;/div&gt;
    &lt;/div&gt;


**CSS**

    .wrap {
      display: flex;
      background: #ccc;
      width: 100%;
      justify-content: space-between;
    }
    
    .result {
      background: #ccc;
      margin-top: 20px;
    }
    
    .result:after {
      content: &#39;&#39;;
      display: table;
      clear: both;
    }
    
    .result div {
      float: left;
    }
    .result div:last-child {
      float: right;
    }

How can I align one item right with flexbox?

I&#39;m trying to center inner elements of a `&lt;button&gt;`-tag with flexbox&#39;s `justify-content: center`. But Safari does not center them. I can apply the same style to any other tags and it works as intended (see the `&lt;p&gt;`-tag). Only the button is left-aligned.

Try Firefox or Chrome and you can see the difference.

Is there any user agent style I have to overwrite? Or any other solution to this problem?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    button, p {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;
      &lt;button&gt;
        &lt;span&gt;Test&lt;/span&gt;
        &lt;span&gt;Test&lt;/span&gt;
      &lt;/button&gt;
      &lt;p&gt;
        &lt;span&gt;Test&lt;/span&gt;
        &lt;span&gt;Test&lt;/span&gt;
      &lt;/p&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

And a jsfiddle:
http://jsfiddle.net/z3sfwtn2/2/

Flex / Grid layouts not working on button or fieldset elements

I&#39;ve recently been playing with Flexbox for the first time and, in general, it&#39;s absolutely amazing. I&#39;ve encountered an issue recently however, where I cannot seem to give flex items that are wrapping any vertical spacing.

I&#39;ve tried using:

    align-content: space-between;

but this doesn&#39;t seem to do anything. From the reading I&#39;ve done, this would only seem to work if my flex container is taller than the elements contained within (is this right?) If so, then would I not have to set a height for my flex-container, which would seem to defeat the purpose of using flexbox?

The only way I can think of to make this work would be to give bottom margin to the elements within, but again this seems to defeat the purpose.

Hopefully I&#39;m missing something fairly obvious - here&#39;s a link to a codepen: http://codepen.io/lordchancellor/pen/pgMEPz

Also, here&#39;s my code:

HTML:

    &lt;div class=&quot;container&quot;&gt;
       &lt;div class=&quot;col-sm-12&quot;&gt;
         &lt;h1&gt;Flexbox Wrapping&lt;/h1&gt;
    
         &lt;div class=&quot;flexContainer&quot;&gt;
           &lt;div class=&quot;flexLabel&quot;&gt;This is a flex label&lt;/div&gt;
                        
           &lt;a class=&quot;btn btn-primary&quot;&gt;Button 1&lt;/a&gt;
           &lt;a class=&quot;btn btn-warning&quot;&gt;Button 2&lt;/a&gt;
           &lt;a class=&quot;btn btn-success&quot;&gt;Button 3&lt;/a&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;

CSS:

    .flexContainer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-content: space-between;
      justify-content: center;
    }
    .flexContainer .flexLabel {
      flex-basis: 150px;
      flex-shrink: 0;
    }

EDIT - Just going to add a little more detail here, as I&#39;m not sure I&#39;m putting it across well enough.

In my larger project, I have some block level elements that are arranged in a row using flexbox. However, there needs to be some responsiveness as the user may reduce the screen width. At this point, I want my elements to begin to stack (hence the wrap). However, as the elements begin to stack, they are all touching vertically, where I want there to be spacing.

It&#39;s beginning to look like top and bottom margins may be the only way to resolve this - however I was wondering if there was a flexbox-centric way to achieve this.

Content Type	Original Author	Original Content on Stackoverflow
Question	Ben Casalino	View Question on Stackoverflow
Solution 1 - Css	Robot	View Answer on Stackoverflow

Difference between justify-content vs align-items?

Css Problem Overview

Css Solutions

Solution 1 - Css

1. `justify-content:` along primary axis

2. `align-items:` along secondary axis

See it in action:

In my opinion:

git pull on a different branch

Development team not showing in Xcode

Attributions

Css Problem Overview

Css Solutions

Solution 1 - Css

1. justify-content: along primary axis

2. align-items: along secondary axis

See it in action:

In my opinion:

git pull on a different branch

Development team not showing in Xcode

Attributions

1. `justify-content:` along primary axis

2. `align-items:` along secondary axis