{"componentChunkName":"component---src-templates-blog-post-js","path":"/align-items-vs-content-flexbox/","result":{"data":{"site":{"siteMetadata":{"title":"Undefined","author":"Anirudh Varma"}},"markdownRemark":{"id":"b2dce664-f93a-5f32-8dcf-f0753a8fd447","excerpt":"Flexbox is awesome. If you have worked with modern CSS, whether you are rolling your own or using a frameworks like Bootstrap & Foundation, chances are you are…","html":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox\">Flexbox</a> is awesome. If you have worked with modern CSS, whether you are rolling your own or using a frameworks like Bootstrap &#x26; Foundation, chances are you are using Flexbox for layout and alignment.</p>\n<blockquote>\n<p>To align or to justify..that is the question</p>\n</blockquote>\n<p>For a very long time, I have been trying to figure out what is the difference between <code class=\"language-text\">align-items</code>, <code class=\"language-text\">align-content</code> &#x26; <code class=\"language-text\">justify-content</code> and how they work or more importantly <em>when</em> they work.</p>\n<h3 id=\"tldr\" style=\"position:relative;\"><a href=\"#tldr\" aria-label=\"tldr permalink\" class=\"anchor-hint before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>TL;DR</h3>\n<ul>\n<li>If you have set your <code class=\"language-text\">flex-direction</code> to <code class=\"language-text\">row</code>, then <code class=\"language-text\">justify-content</code> works on the horizontal axis and <code class=\"language-text\">align-*</code> properties work on the vertical axis.</li>\n<li>If you have set your <code class=\"language-text\">flex-direction</code> to <code class=\"language-text\">column</code>, then <code class=\"language-text\">align-*</code> properties work on the horizontal axis and <code class=\"language-text\">justify-content</code> works on the vertical axis.</li>\n</ul>\n<iframe height=\"265\" style=\"width: 100%;\" scrolling=\"no\" title=\"Align items vs Justify Content\" src=\"//codepen.io/thebigfatpanda12/embed/preview/aXqjNq/?height=265&theme-id=dark&default-tab=html,result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https://codepen.io/thebigfatpanda12/pen/aXqjNq/'>Align items vs Justify Content</a> by Anirudh Varma\n  (<a href='https://codepen.io/thebigfatpanda12'>@thebigfatpanda12</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n<h3 id=\"what-separates-align-items-and-align-content\" style=\"position:relative;\"><a href=\"#what-separates-align-items-and-align-content\" aria-label=\"what separates align items and align content permalink\" class=\"anchor-hint before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What separates align-items and align-content?</h3>\n<ul>\n<li><code class=\"language-text\">align-items</code> effect the alignment of items on the current line.</li>\n<li><code class=\"language-text\">align-content</code> effects the alignment accross lines of a flex-container. This means that this property has no effect on single-line containers.</li>\n</ul>\n<p><em>The rest of the article is just a brain dump of everything I learned while trying to figure out the above.</em></p>\n<h2 id=\"nomenclature\" style=\"position:relative;\"><a href=\"#nomenclature\" aria-label=\"nomenclature permalink\" class=\"anchor-hint before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Nomenclature</h2>\n<ul>\n<li><strong>Flex Container</strong>: An element on which the <code class=\"language-text\">display</code> value is set to <code class=\"language-text\">flex</code>.</li>\n<li><strong>Flex Items</strong>: <em>Direct</em> children of the flex containers are called flex items.</li>\n<li>\n<p><strong>Main Axis</strong>: The axis defined by the <code class=\"language-text\">flex-direction</code> property.</p>\n<p>— <code class=\"language-text\">flex-direction:row</code> means that elements inside the flex container are aligned next to each other. Technically, these elements are aligned along the <a href=\"https://www.w3.org/TR/css-writing-modes-4/#inline-axis\">inline-axis</a> (just like inline elements).</p>\n<p>— <code class=\"language-text\">flex-direction:column</code> means that elements are aligned along the vertical axis i.e. below each other. Technically called the <a href=\"https://www.w3.org/TR/css-writing-modes-4/#block-axis\">block-axis</a> (just like block elements)</p>\n</li>\n<li><strong>Cross Axis</strong>: The axis perpendicular to the main axis is called the cross axis.</li>\n<li><strong>Single-line Container</strong>: Flex containers whose <code class=\"language-text\">flex-wrap</code> property is set to <code class=\"language-text\">nowrap</code>. By default every flex container is a single-line container.</li>\n<li><strong>Multi-line Containers</strong>: Flex containers whose <code class=\"language-text\">flex-wrap</code> property is set to <code class=\"language-text\">wrap</code></li>\n</ul>\n<h2 id=\"tldr-with-nomenclature\" style=\"position:relative;\"><a href=\"#tldr-with-nomenclature\" aria-label=\"tldr with nomenclature permalink\" class=\"anchor-hint before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>TL;DR with Nomenclature</h2>\n<p>Now that we know the jargon, we can rewrite the TL;DR as-</p>\n<ul>\n<li><code class=\"language-text\">justify-content</code> works on the Main Axis and <code class=\"language-text\">align-*</code> properties work on the Cross Axis.</li>\n<li><code class=\"language-text\">justify-content</code> and <code class=\"language-text\">align-items</code> are similar in their behviour, the difference being that <code class=\"language-text\">justify-content</code> works on the the main axis while <code class=\"language-text\">align-items</code> works on the cross axis.</li>\n<li><code class=\"language-text\">align-content</code> works only on multi-line containers and has no effect on single line containers.</li>\n</ul>\n<h2 id=\"sources\" style=\"position:relative;\"><a href=\"#sources\" aria-label=\"sources permalink\" class=\"anchor-hint before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Sources</h2>\n<ol>\n<li><a href=\"https://www.w3.org/TR/css-flexbox-1/\">w3.org</a> documentation on Flexbox is pretty comprehensive and a good read.</li>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox\">MDN</a> Flexbox documentation.</li>\n</ol>","frontmatter":{"title":"Flexbox - Align Items vs Align Content.","date":"February 04, 2019","ogimage":null}}},"pageContext":{"slug":"/align-items-vs-content-flexbox/","previous":{"fields":{"slug":"/angular-structural-vs-attribute-directives/"},"frontmatter":{"title":"Strucural vs Attribute Directives in Angular"}},"next":{"fields":{"slug":"/solve-cross-origin-iframe-error/"},"frontmatter":{"title":"Solve the Cross-Origin Access error when working with iframes"}}}},"staticQueryHashes":["426816048","983108779"]}