{"id":4827,"date":"2025-04-07T13:29:44","date_gmt":"2025-04-07T12:29:44","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=4827"},"modified":"2025-09-27T19:36:41","modified_gmt":"2025-09-27T18:36:41","slug":"center-aligned-items-flexbox","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/flexbox\/center-aligned-items-flexbox","title":{"rendered":"Center aligned items flexbox"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>MyClassName {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Centering multiple div sections as columns or vertically for mobile<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">CSS<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>.my_container {\n  display: flex;\n  flex-direction: column;\n  align-items: center; \/*or flex-start for top aligned *\/\n  justify-content: center;\n  gap: 20px; \/* spacing between items *\/\n  margin: 20px 0;\n}\n\n.my_section {\n  width: 100%;\n  max-width: 400px;\n}\n\n@media only screen and (max-width: 768px)\n{\n  .my_container\n  {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .create_proof_option_section\n  {\n    width: auto;\n  }\n}<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">HTML<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>\n  &lt;div class=\"my_container\"&gt;\n    &lt;div class=\"my_section\"&gt;\n\n    &lt;\/div&gt;\n\n    &lt;div class=\"my_section\"&gt;\n    \n    &lt;\/div&gt;\n\n    &lt;div class=\"my_section\"&gt;\n    \n    &lt;\/div&gt;\n  &lt;\/div&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Centering multiple div sections as columns or vertically for mobile CSS HTML<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[368,367],"tags":[],"class_list":["post-4827","post","type-post","status-publish","format-standard","hentry","category-examples-flexbox","category-flexbox"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=4827"}],"version-history":[{"count":5,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4827\/revisions"}],"predecessor-version":[{"id":5141,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4827\/revisions\/5141"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=4827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=4827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=4827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}