{"id":2451,"date":"2018-11-02T21:45:54","date_gmt":"2018-11-03T02:45:54","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2451"},"modified":"2018-11-02T21:45:54","modified_gmt":"2018-11-03T02:45:54","slug":"html-css-how-to-control-uneven-columns-with-flexbox-align-self","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/11\/02\/html-css-how-to-control-uneven-columns-with-flexbox-align-self\/","title":{"rendered":"HTML &#038; CSS: How to control uneven columns with Flexbox align-self"},"content":{"rendered":"<p>Building on the Flexbox foundation described in this previous article:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"lrnUvihvj7\"><p><a href=\"http:\/\/bluegalaxy.info\/codewalk\/2018\/11\/02\/html-css-how-to-understand-the-basics-flexbox-for-responsive-web-design\/\">HTML &#038; CSS: How to understand the basics of Flexbox for responsive web design<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"http:\/\/bluegalaxy.info\/codewalk\/2018\/11\/02\/html-css-how-to-understand-the-basics-flexbox-for-responsive-web-design\/embed\/#?secret=lrnUvihvj7\" data-secret=\"lrnUvihvj7\" width=\"600\" height=\"338\" title=\"&#8220;HTML &#038; CSS: How to understand the basics of Flexbox for responsive web design&#8221; &#8212; Chris Nielsen Code Walk\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p>I am now going to describe how to control columns that may have varying amounts of data in them. Flexbox has an attribute for the child element called &#8220;align-self&#8221; which can be set with the following settings:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">align-self: auto;\r\nalign-self: baseline;\r\nalign-self: center;\r\nalign-self: flex-end;\r\nalign-self: flex-start;\r\nalign-self: stretch;\r\n<\/pre>\n<p>Here is an example of usage, set in the Flexbox child element:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/* Child *\/\r\n.col {\r\n  flex: 1;\r\n  align-self: flex-start;\r\n  background-color: #fff;\r\n  margin: 10px;\r\n  padding: 10px;\r\n}<\/pre>\n<p><strong>Note:<\/strong><br \/>\nWith the same media settings that were used in the previous article referred to above, when the browser window is shrunk, the columns are all automatically stacked.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2458\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/columns-stacked.png\" alt=\"\" width=\"401\" height=\"632\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/columns-stacked.png 878w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/columns-stacked-190x300.png 190w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/columns-stacked-768x1210.png 768w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/columns-stacked-650x1024.png 650w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/columns-stacked-634x999.png 634w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/p>\n<p>The following two settings produce the same result. All child cols in the parent row are expanded to the maximum height of the tallest row:<\/p>\n<p><strong>align-self: auto;<\/strong><br \/>\n<strong>align-self: stretch;<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2460\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/auto-stretch.png\" alt=\"\" width=\"623\" height=\"581\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/auto-stretch.png 1315w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/auto-stretch-300x280.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/auto-stretch-768x717.png 768w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/auto-stretch-1024x955.png 1024w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/auto-stretch-676x631.png 676w\" sizes=\"auto, (max-width: 623px) 100vw, 623px\" \/><\/p>\n<p>These two settings produce the same result where the columns have different heights, each column fits its content and they are all aligned at the top of the container.<\/p>\n<p><strong>align-self: baseline;<\/strong><br \/>\n<strong>align-self: flex-start;<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2464\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-start.png\" alt=\"\" width=\"623\" height=\"550\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-start.png 1342w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-start-300x265.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-start-768x678.png 768w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-start-1024x903.png 1024w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-start-676x596.png 676w\" sizes=\"auto, (max-width: 623px) 100vw, 623px\" \/><\/p>\n<p>The final two options look like this:<br \/>\n<strong>align-self: center;<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2466\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/align-self-center.png\" alt=\"\" width=\"623\" height=\"550\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/align-self-center.png 1341w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/align-self-center-300x265.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/align-self-center-768x678.png 768w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/align-self-center-1024x904.png 1024w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/align-self-center-676x597.png 676w\" sizes=\"auto, (max-width: 623px) 100vw, 623px\" \/><\/p>\n<p><strong>align-self: flex-end;<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2467\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-end.png\" alt=\"\" width=\"623\" height=\"554\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-end.png 1335w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-end-300x267.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-end-768x682.png 768w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-end-1024x910.png 1024w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/11\/flex-end-676x601.png 676w\" sizes=\"auto, (max-width: 623px) 100vw, 623px\" \/><\/p>\n<p>For more information about the Flexbox align-self property, see:<br \/>\n<a href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_align-self.asp\">https:\/\/www.w3schools.com\/cssref\/css3_pr_align-self.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building on the Flexbox foundation described in this previous article: HTML &#038; CSS: How to understand the basics of Flexbox for responsive web design I am now going to describe how to control columns that may have varying amounts of data in them. Flexbox has an attribute for the child element called &#8220;align-self&#8221; which can &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/11\/02\/html-css-how-to-control-uneven-columns-with-flexbox-align-self\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">HTML &#038; CSS: How to control uneven columns with Flexbox align-self<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[183,10,113,105,182],"class_list":["post-2451","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-align-self","tag-css","tag-flexbox","tag-html","tag-responsive"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2451"}],"version-history":[{"count":13,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2451\/revisions"}],"predecessor-version":[{"id":2472,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2451\/revisions\/2472"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}