{"componentChunkName":"component---src-templates-blog-post-js","path":"/flexbox/","result":{"data":{"markdownRemark":{"fields":{"slug":"/flexbox/"},"frontmatter":{"titulo":" FlexBox - Guia visual","data":"19/01/2021","tag":"Programação","image":{"childImageSharp":{"fluid":{"src":"/static/dc64a82e37a06c1259d56b2ee9fc45f3/46604/destaqueflexbox.png","base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAvklEQVQ4y2P4T2XAsHzl2v/UxAz6xrb/qYkZbB29/lMTM1jbe/ynJsZqoJWdO1Y+ujjZBpIiz4BLMYi2sHEFYzMrl//m1hAM4uMzFKcL7Z29//sGRPz38An57xcUBcY+QL6rZ+B/S1s30rwM0uDg4gs2LCwy8X9yWu7/mIT0/3GJmf8DgqPBLiXbyyDNZlbOcEy2l5H5NpRECsXpkOo5Rc/I5j81McOUabP/UxMzUL08/PPnz39qYuq7kNoGAgCg6MZ6x+chCwAAAABJRU5ErkJggg==","aspectRatio":1,"srcSet":"/static/dc64a82e37a06c1259d56b2ee9fc45f3/7e7e9/destaqueflexbox.png 225w,\n/static/dc64a82e37a06c1259d56b2ee9fc45f3/62b1f/destaqueflexbox.png 450w,\n/static/dc64a82e37a06c1259d56b2ee9fc45f3/46604/destaqueflexbox.png 500w","sizes":"(max-width: 500px) 100vw, 500px"}}}},"html":"<p>Fala galera!</p>\n<p>Primeiramente esse e o primeiro post de 2021 \\o/</p>\n<p><img src=\"https://media.giphy.com/media/3o7btV5GAWaGkwjTrO/giphy.gif\" alt=\"https://media.giphy.com/media/3o7btV5GAWaGkwjTrO/giphy.gif\"></p>\n<p>Estou muito animada e ansiosa para esse ano, mas vamos ao que interessa, ao conteúdo!</p>\n<p>Hoje vou dar exemplos visuais sobre flexbox, para você entender melhor os conceitos do flexbox!</p>\n<p>O que vamos aprender hoje?</p>\n<ul>\n<li>Arquitetura</li>\n<li>flex-direction</li>\n<li>justify-content</li>\n<li>align-content</li>\n<li>align-items</li>\n<li>align-self</li>\n<li>flex - grow | shrink | wrap</li>\n</ul>\n<p><strong>flex</strong>: É uma abreviação para flex-grow , flex-shrink e flex-basis combinados, você vai aprender melhor sobre eles lendo esse artigo 😉</p>\n<h3>Arquitetura</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 41.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsSAAALEgHS3X78AAABqUlEQVQoz32S32vTcBTF+8fuzVcV3KNS2B4Kk7kHUfBN0AcFfzwpstlO5tCydbad66/EpGmz9QdZ0vxOPt5vGmUgGDjk5tyTk3tzvhU/jImTlChO/iIUKM5xV/SGOr/GEzTDEoy59vyiF5baOM2KZ4Ugiqmo4n9X4IeEobwYJSRJ/E8/SROyLCvrjEpUGhr2As2eYC4sjNmEvmEztK7Qpga6pWHMLxmYV8LZmHOr0Om2zcxxCcsPqeEKw1Scm50+j5/02a5a7D7U+XT0g49f2uztjKjdH/H02ZB6s8XbD11q2yZbD0xevemThJ44peR5LhOm65V9P6DVuWBna8SdDYvqPZP60Rn7h22qdzU2NzQe1XSOT055977L5q0xt0X34vmAdLUkdX1yWXu9crxeuXmucdDsUD/p0mj9lPsFjdMeDcUdtzg865WcwjmfRfe1PWApwamhcvmNyquiXKM4ZjpbFAl6EoK3CnAVpHZdj+vLOa703JL3ZKNVEDJbOswd50ZEORUVv9pdoaByRd+QCJHJccjLJP9olCiVsQI/5tvLKft7Bt9fT/kNe5VQNrWW/nQAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/untitled.png\"\n        title=\"/untitled.png\"\n        data-src=\"/static/4b52cb7670f7bf67b272736bdd9ff267/d9199/untitled.png\"\n        data-srcset=\"/static/4b52cb7670f7bf67b272736bdd9ff267/8ff5a/untitled.png 240w,\n/static/4b52cb7670f7bf67b272736bdd9ff267/e85cb/untitled.png 480w,\n/static/4b52cb7670f7bf67b272736bdd9ff267/d9199/untitled.png 960w,\n/static/4b52cb7670f7bf67b272736bdd9ff267/07a9c/untitled.png 1440w,\n/static/4b52cb7670f7bf67b272736bdd9ff267/f2f8c/untitled.png 1490w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3>Propriedades</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 914px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 64.58333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAACFElEQVQ4y42TS2/TQBSF8/PYIbFkAVvWoCI2NFQF0ZYmNCmUVhWPAkkK7SLibwCbqqgSSx5qE8czHs/Dbx/ujPMigMRIx75zbX9z7txx7fSLwfGhxnHP4H3X4F1H46hrY+3i/9VRT+PTR43aUU/h2mWFxv0Qm6sSrbUYGyshmg802hS3HkZjxbP72kxbNH/WjHHjqsH2pkLNurt3W4OJC8SphB1MeHRN8O9RLgh4/iRG2wKt1bs3NXzOwIIQcZIhlBpaR1BWyjgZE1dzUlEQpqyUZdUSu48J+EhVJVsgFxwXQw+BkOCBwHDkw/MZvBFzsc84zgeemwcinMpnIfJSLgKNA1pQSktyepEHoZtPPmQ8cLkRgZM0RU42syxHkuTkL/8TKKRwL5sohgjlFGrjQFTwkc+m8Wyh0JW8tzUHXL5FDgNGe6eQ58W4FO5cOWfT8gIHszlbSVGUSNPCNWbOoZ7uoS2lpJ2e7OHQ8yGVdg4KKtECpiorZVn5dyALOJXEyWHpuj30GAYEtB233bT5eaCbk7Jk7LAZob0hx+dwSSPJBaJEuIdxGkIZTmLUQTN39hbP4mzs7+VoNQ0BaQ+vX1HYJnprXWGnYf8ASX9A6NQe53Ya0W96Srn9+ggHd36iu3KOpUvfsVsfoHZyotE5kCSFty8V3ryQ7t55VWmSW9Rryh+uf0O/fob+6lf0l8/w+cMP/AJzAplD9cR0TAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/planilha.png\"\n        title=\"/planilha.png\"\n        data-src=\"/static/21d49aa8cdb5f3c30b5fd2e735919052/076ca/planilha.png\"\n        data-srcset=\"/static/21d49aa8cdb5f3c30b5fd2e735919052/8ff5a/planilha.png 240w,\n/static/21d49aa8cdb5f3c30b5fd2e735919052/e85cb/planilha.png 480w,\n/static/21d49aa8cdb5f3c30b5fd2e735919052/076ca/planilha.png 914w\"\n        sizes=\"(max-width: 914px) 100vw, 914px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3>flex-direction</h3>\n<p>A direção em que os flex-items são distribuídos dentro do flex-container</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 41.25%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsSAAALEgHS3X78AAAB9ElEQVQoz2WRzU9TQRTF+8epSRHKa6Gv7esnpbXluxGNFo0EJWoJlLaxNH4QhERBEzEaNcaNC+PKmCYuXLCQuHJhTDCdGfrJj3l97lyc3DlzM+eeOdf17rWkXJDUypKN9f+x/VCxu6Oxrdi6L6gWRf++2u+LPmolQemu5K3WcpUKgpEzguiwg4jHqTFDEnA7PBWQZEKSqLdHcLCne4q4V/e8TSxvh9hok9GzgvU7WtCekDIlubQkHRJkLEk2LLmgzx8/tPlW7zAVaxDzdXlTuc3XJ2PMxH6TsE5YMut8GpjnRug7kZE2G8UGLvsLCZ9kOiG1E0E6aIs5gnuPj3n/qslUXDDmb/Ng8Tm7hRoT4SOSoQ75wAHPjBpXrUPCRpPqmrAdSsJDgnFTkPQ7NR3UCClMo4vf0yWlh2SsBv5BMNxofkxW8+hoC68HEmazH9O9tX9fToxI5sY1kpLJqOg7nIgI9ocr7HkfkYq0SJodXhRLfN6aZSb+R79RFG9JDg/arN1UWOedBbkqK3bwjmAupfoZxnUESb/evPsp5YGXOvQWUaPN5uIm+6vLpM0jrCHFcl5R/9Jl+XoT3zlFZVXh2tm0FyK4Mi24POnU/KzGnGQ+d6LRY2FOsJATXJyEXBbdV1zT/NKUNpL4y1LgJ4ueH+yu/OIUrATDc2geL3AAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/flexdirection.png\"\n        title=\"/flexdirection.png\"\n        data-src=\"/static/851b4c7ec8bd448f3cef76652e1bdcae/d9199/flexdirection.png\"\n        data-srcset=\"/static/851b4c7ec8bd448f3cef76652e1bdcae/8ff5a/flexdirection.png 240w,\n/static/851b4c7ec8bd448f3cef76652e1bdcae/e85cb/flexdirection.png 480w,\n/static/851b4c7ec8bd448f3cef76652e1bdcae/d9199/flexdirection.png 960w,\n/static/851b4c7ec8bd448f3cef76652e1bdcae/e515d/flexdirection.png 1430w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 242.50000000000003%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,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'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/column.png\"\n        title=\"/column.png\"\n        data-src=\"/static/a1b0243572a2944974bc71f1d1a83f97/fcda8/column.png\"\n        data-srcset=\"/static/a1b0243572a2944974bc71f1d1a83f97/8ff5a/column.png 240w,\n/static/a1b0243572a2944974bc71f1d1a83f97/e85cb/column.png 480w,\n/static/a1b0243572a2944974bc71f1d1a83f97/fcda8/column.png 590w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3>justify-content</h3>\n<p>Essa propriedade organiza os flex-items ao longo do <strong>eixo principal (Main axis)</strong> dentro de um container.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 57.08333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACQ0lEQVQoz2WTfU/TYBTF+XRKDMoYdGXt1pW1rEMIGI2JJigYyGQwx4vAiIJBcKhEEBESYkLUxERjYvwssudh4CI/n6eVl8Q/Tm57e3Nyzj23TVtvJKVRyeOSZGZcMv0PMxOqFiVLFUH1mWB1UbI4J5kqns+czSqUC5L1qqSpNCowLgnSrQL7alQ1klcEZrPqtf4h3Q5O5x+cRINMm/wPbrtU85KRu4Km6XFBtkNyp++Q29clgS3JGoLdt0f8/AE7cyU+PRlgs6VMJbaJZ/8msMQZcklBT0riJSTFB5qwKHBikj5X0utIujsVYYdgeaHOzuYJiyMbVAsVllrXeBTfx7ePyduCvHUQIkjWwvcuJWpsKFQoQ4teQoREvilCUiemV1AL7abikEmBaynbMdVTAnQ/3RH1/VSDrnYREU4phZm45FZe0p+NFGrklY3AUkgqFdYvcuZB+PzxQ4O97SN2Zwd5V3zIxuUyBeMbaaNBcagWWdaLveFFtk8V5qxz8pBYQVvc267zfl3yuljmxfACr5pnGTW+XyC8YNkzxLlCO1KpF+7GBalrNRxlM94MRhuYhkpewU1Dd/qCZZ2yoxX6EYFWmEtGinTVZMuVOp/3YW1ilb25e6zEnzPftoVvHRKYOpyaugwVyrAinBzTdye5GUQkOhh9Alqlb0bhrD6t8/ULvJxYYWd6kGpLhUrLOq55jJ+IXOkcCvcV4fykbgh6MxH63Aj92VPI8N78zhrd9om6QwiyJ/R4jfCbnhnwtDuh/hbBX7rTZkMUy8CNAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/justify.png\"\n        title=\"/justify.png\"\n        data-src=\"/static/680b51484cbe282693283bddb9307da6/d9199/justify.png\"\n        data-srcset=\"/static/680b51484cbe282693283bddb9307da6/8ff5a/justify.png 240w,\n/static/680b51484cbe282693283bddb9307da6/e85cb/justify.png 480w,\n/static/680b51484cbe282693283bddb9307da6/d9199/justify.png 960w,\n/static/680b51484cbe282693283bddb9307da6/07a9c/justify.png 1440w,\n/static/680b51484cbe282693283bddb9307da6/6f278/justify.png 1488w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 45.416666666666664%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAACHklEQVQoz12S205TQRSGeTslhNQetnX3XEpbKqWlRVpoESillIMQhKjBGEhU9MZ44wOYYNBgTIyJGt/AiAdCO9ODjflYe/dGvVjZs9f8863515qBR/ua5ZJmdVFTX5CvxNKsoj6vWZPcZq3F7VtwZ6vLVk3ZutpSj/piW/aVrVmvaKrCeHygGaiWFP5hTfyaJmZooh5NpdBmIqIJOqxcg+rECZnQV8KuDlFXk4LjMwnnD4LOFmGnIuJWeC8ranMCXJUqSZ+mON4il9BkY5pPH3rsrrcIONpkI984PkhRzZwQMmDC/M6LoRXmvR+J+nokzSZjfk3oimJjSYDWlYMOxYihiEqlUW9/bcWYX5HwtYkIaNTsyn+TuL9DLNAjbraIi3ZUnCXMPsOyPlBfUMSuam6kNNMSI2J7b7vDm6Pfkm+T8v3k6EGWlewrTDfUXK95OnTPhlgwC/oP0LIcdmrbtrUxYjSZyzdYq4hl1xnJ0JnYfUc6fEpYNGnfKRXjrdzwXNxYvf8PaE0q6tb2EMbDmlRQCrikweUWGyKIGh3Wpo6pZN+TlMObnpcC/WVbT5h9WPLvHi6XFQGZctoChrRd1Tfc5Nlhlyf7HYzBDoe1HbaLzwmJ7uGlu+QcXwh6ukSc/eLWy/AOKlZuCnBvR3p3XTGbVcxkFKVJTSl/TiGt7CiL/ek0FDM9yTcoTP1hJt+knGv0tZNKWqRkBor7u5oLHN32XffJ7QMAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/justify2.png\"\n        title=\"/justify2.png\"\n        data-src=\"/static/a3d853083822739f8562b27bceaab488/d9199/justify2.png\"\n        data-srcset=\"/static/a3d853083822739f8562b27bceaab488/8ff5a/justify2.png 240w,\n/static/a3d853083822739f8562b27bceaab488/e85cb/justify2.png 480w,\n/static/a3d853083822739f8562b27bceaab488/d9199/justify2.png 960w,\n/static/a3d853083822739f8562b27bceaab488/07a9c/justify2.png 1440w,\n/static/a3d853083822739f8562b27bceaab488/da952/justify2.png 1872w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3>align-content</h3>\n<p>Ela organiza os flex-items ao longo do <strong>cross axis</strong> dentro de um flex container, bem semelhante a ao justify-content.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 70.83333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAACuklEQVQ4y62T/0sTYRzH94/1kwhhkPZNK9RE+iGKCvqhoJ+CEKMkyIry25QgKkQTScOiadPN1Lkvbrvttrnp5nZuN7d58253u7u9e56bm2nQTz3wvnvuw3Ov5/PVVFJUqJqOsqr9JWoXSzJSuxmk0jxESf7nWcoyqZoGuiqVk6IPQCcHZUWBopSh6zpqhyuHqu3polATpf+vRVkmjdwqyyq4XQkZvoRsTiL7Evg9yRDd7+Ul6hYkWUFOOEChKCKbF8DnCsgLoqGiWKoC6UGfV0R3q4CH93IYGkng2jkRfU85PO/jcPWMhNGxFAHqiMQzsKz5seRmMWdzYdbqwM/1ABYcAawHYkdA74aI9uYD3L9dwNuBJFobFfQ+zuDZkzQuNsgYGeHqwB+rDBadLIGGYPOEsOhiySUUuHUc2HWhiAd38xh7F8fNTgEv+5PEyzQuny7BPFoFbiYysHl9sHuDsDqrot4u+/1wh2JQyodAj1vElSYRt7oE4j5LwmDxy8+g51EGzacUDA3uEqAGNsrj1es4JmdiWPIEiXdBfLeF8aJ/Bwv2BLSKWgVuxfcxPLqF95+2ya2sEYaN/DDxJYrB4Ti+WmKGh342i46WIvGewxrLYDXIYHouikuNEiY/00vLMNEWSufysBO3V5iAAauGQ0LxBbESIHZ/2KgyE86iu23fyPOMJYLxqRimv22i/ewBpqZrQPLisgXMk8RandUk10WgC44g7J7IEZB0g3lsx8jvnesCAUbR2XICmOLzpHr+egvURb4tawyWXCED6GN5tDUJeDOQQG8Phxsd+ySfEZxvEDE+wdVCrmCvUISDicHNbsNJ+ml+xQO7K1D/3ggnjEnYTpIuMJNetCYxO8fh4wcey844zENZrDozJMukKHJZhf7HbFLRmdX14zaNzKluzKxmFOhINVsFlPUb4MblMlUmYG4AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"assets/img/align1.png\"\n        title=\"assets/img/align1.png\"\n        data-src=\"/static/dc6e64e835481713ac994968c67056e1/d9199/align1.png\"\n        data-srcset=\"/static/dc6e64e835481713ac994968c67056e1/8ff5a/align1.png 240w,\n/static/dc6e64e835481713ac994968c67056e1/e85cb/align1.png 480w,\n/static/dc6e64e835481713ac994968c67056e1/d9199/align1.png 960w,\n/static/dc6e64e835481713ac994968c67056e1/07a9c/align1.png 1440w,\n/static/dc6e64e835481713ac994968c67056e1/764d7/align1.png 1782w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 119.16666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAAsSAAALEgHS3X78AAACv0lEQVQ4y62VW08TQRTH+XDGJ0M0akyQSzQq6oN+CRNJIDzwgIIxGDU+EC8EMSTl0hZKKZRi6WW72xu90AKVhlIo3d3S/jkz20Wq7S4SJ/lnzs4585szO2d2247KCmS1grJSgVxX+Vyfy+8jv19EvlDE3v4BSq3iaawkK2hjRqtWq9UQT6SwmUzznklV1ZbxlZMTtDG6PvlvtV7oT7GmVkyBNVSrVZLeV88mXxrIoRxcM4xpCrxsawrUB6LpHURSjQpEkvCKcUiJ7NlYlCQltun0DxvmNwDLdOy2tRDm3UGScKavM058mrLCsuyDlfsF6gVYXH7EMzk9zSZARcWSN4zFnxIcpMW6nL4oXP4YHOd8zGaLJ7f39I03B7Jg+xrJI2FhXZNtTYTNLWLBoy3AfZ4w5lcFJLO/DDKUKcMNCS5BwKoYwpJPJICIlRB7FuD0ixzoEkJwk3/BG0RCBzbLUKkomHVGMDSUxWD/DiamYzzbwYFt9L3IYXxikzIWMfwqQ2O7+DgeQzpnkKFaVTA1G8O9myXcuarg7Viatirh/q0Sbl9RMDycoe2KeNJV5P6+lxlk8waHop4o+DEXw+POQ/RcP8a7Dyl6fxKedhfRTc8jo1sc+PxhgfxlDAxsIbN3AWBvxxG62ssYe5/iGfbePUTnNRmvRzTgswcH6G6X0d9PwItk+KijSMBjDcgy7DlAz40SRt+k68ACX9AUKFPZ2N1hfJmK4fNkHBZHmB/CpCVKBxTFzFKYl9G3ac3/fU5CasesbLxUyP4QloMiHBtambByYXJ4tTJitov89nXhd9nUjArboxWxVth1+1yh6za7gkkzoH71zOSgnVhNrx5t2e4J8YvP7qnVQDaKm10JYNPo46DQ/yUQTcMXScFvJorzSkns5guNny9ZqeB/NQ5kv1FmsOyY5H+UPk8hxjG9slMeM+W89bg9zwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"assets/img/align2.png\"\n        title=\"assets/img/align2.png\"\n        data-src=\"/static/16d7b839350c7ada69fe0eb95a08bbfe/d9199/align2.png\"\n        data-srcset=\"/static/16d7b839350c7ada69fe0eb95a08bbfe/8ff5a/align2.png 240w,\n/static/16d7b839350c7ada69fe0eb95a08bbfe/e85cb/align2.png 480w,\n/static/16d7b839350c7ada69fe0eb95a08bbfe/d9199/align2.png 960w,\n/static/16d7b839350c7ada69fe0eb95a08bbfe/1be7e/align2.png 1059w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 70.83333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAAC4UlEQVQ4y6WT2U8TYRTF+cf0QUOiL2rEJZgYXB9cIhGDGFzZxB0EQWVRWQQXXCLRohIWY1zAuAQUpC0tDO3MlE6nON2m28+ZaVGiiS/e5M795ubk3HO+mZsT1RMkkiniieRfafbD0RheyYdXniccif0Ta3LlmAcz0um0+bTqYpqRSqWI6Tq6HrfOWfASzG+syZVjsv+KNP8V8WQyo1CPJ9CiGtGkRjC0QDCsoIYCVi+S0NAiYVMUkZjOj4jRi4cIaguomkpYDxHSjZ4esaznmEDJr9J+Z5qmZi9tXRNcuPSV+qvjdBq9hkYPz4dclnyn4KP7oYOOLoHuR9+42TVmYGa51enmxYCHRCqRIZQDKocL/WzK1ak44adgnU7hbo3SogBrl+l03PaYt4lj1sfBPQp5K+JUnvJTUrhA/uoYG3OjnC/XTNOLCoM8eTnFo6fTPBu0G9VJb78d25Cd+0+cDI04MwrnfNTUChwvUWhuFaiv93Cq1M/JUpnO9nljZFahpKi0trmprZHoujdDY6OXy7UidXUiNZdEnvW7LcLpOZmz1R4e9Lro7nFbmMGRKSrLJF6PzpJML7F8pGie/FUxTpfL7NoUYuuaCNvzwmxeFfll2STcU6DS0jpnDPVwaG8Q26CDbXkaLwc9xsgsoWhYtr2atCz2v5mib9huWe994eSxzcHwaMayyytTtM9vuWi5IXCsWLEU7t+hMvxW+G1ZNizXX5mj/JhiTa8qm6fmosTb8UnejE3wftxh/WfmV64sEzlT6eNGm8DFcxJ1tZLlrqfHt/QOAxwtESlYH+J0hcjuLQsU7VUY+jDBwMg3Xn+ashR+n5bZt9PPuuU61VUixQcUNqyMsSE3TPXJH4tfOY0S1Hj32WXkLKNjM0ad4f2XGT59d/NxwsWYXbAUClKAjnaZpgaV3qcid+/6aLmmcr1Boc+mZhTGjC1JZXfyz1y610ljjzM4c5+T2bp4zrybXD8Ba87WWJxVWzwAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"assets/img/align3.png\"\n        title=\"assets/img/align3.png\"\n        data-src=\"/static/45b0c3924234714d741fb535535c3ffb/d9199/align3.png\"\n        data-srcset=\"/static/45b0c3924234714d741fb535535c3ffb/8ff5a/align3.png 240w,\n/static/45b0c3924234714d741fb535535c3ffb/e85cb/align3.png 480w,\n/static/45b0c3924234714d741fb535535c3ffb/d9199/align3.png 960w,\n/static/45b0c3924234714d741fb535535c3ffb/07a9c/align3.png 1440w,\n/static/45b0c3924234714d741fb535535c3ffb/764d7/align3.png 1782w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3>align-items</h3>\n<p>Distribui flex-items ao longo do <strong>Cross Axis</strong></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 70.41666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAACtklEQVQ4y62U2UsbURTG85cVCkIXuliqVLrQ5aUvlkqhIFKEUrrS0j5VpJsSa22LKNhapVGDMdaYGJNMnGTiMolxksxMNtPMZJ18vfeO1rbiWy983DOXw4/vnHvuWEqVGmp1A9VafZ9qdXNPpBTIauavs/25BijLQhPoajQOUgPlSgXVapVmmSJnjR3txnRRloXS/9eiLEvdIFbLNUgJHSlZh5rRSFyCktahqDokqYRMTmfOtFIZ2e0icgUNSjYPJZMncZGdFfUSqtQhTeQCGi6fLaDrVga9r+K4dFrHs6dJPHmYQtsxDQPvEwwYFpOYWlyBY1nAxJwX444lzHrDmHbzCKxusj4yYIAAL54qovNmDj09ElqbKnj8QMaj+wqJy7AOJBlQiKYIMASHV8CcLwKnP8Lg0+QssBrfAzKHZ36isyOHPusm2q9u42XPFoEqOHe0RByawEgsBScXxDwXZs6onH4B88EVBNf/cOj3aWg7ruHGtQJLciyHscDzuHsnjeZDFfT3pwjQACfIeP5iC6PjInEYZpqwr5H2SFjwSoS008NofBvvrCKGhqMEKDDR5JGvG3jTH4PNEWUOvQEV508U0dsrwS3wTJ9Go2hp0mGblungwEJHSM7mmG0XH2I9McsR8CNIna7Aza+xsVjmVFxpKeBtH3H5bQOfR0UMj4m4cLKIKTutgjikI5lM5zHjps02m/xbBGr3hOHi1k1g0ARaB+O4163idnueVCGyC52yy3vAhJqDzRWEfSmEGQ/PxoDudk+Ijcm8f5UBPX4ZrUcKeN0XQ3eXjI7rWXwcWUfz4SImbcndkhtsMH1CDNxaHH6yz7o5uAIRBOl3JIaQmGDA6FYOQx9UOBcTmPwuY+yLgkWfhMGBNPhImlwbueVytQbD2HubB4mOhPlmjZ03bfwTN9jP4RffhuY+yB0LSAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"assets/img/alignitem1.png\"\n        title=\"assets/img/alignitem1.png\"\n        data-src=\"/static/c732f2eb0507d5f9cbd28a255be8c36c/d9199/alignitem1.png\"\n        data-srcset=\"/static/c732f2eb0507d5f9cbd28a255be8c36c/8ff5a/alignitem1.png 240w,\n/static/c732f2eb0507d5f9cbd28a255be8c36c/e85cb/alignitem1.png 480w,\n/static/c732f2eb0507d5f9cbd28a255be8c36c/d9199/alignitem1.png 960w,\n/static/c732f2eb0507d5f9cbd28a255be8c36c/07a9c/alignitem1.png 1440w,\n/static/c732f2eb0507d5f9cbd28a255be8c36c/575bd/alignitem1.png 1791w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 70.41666666666667%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAACV0lEQVQ4y62T2U8TcRDH+f/0QXkyPoiaqIkSw6ERJfHFeOAR9cn4oA9GjaLRAmk4pYVeIhTK1d0FSmlESitt2aPbvb/Ob7eHSkl88JfMzrGTz878ZralopswLRuGaR0Q0/L0zm4euZ+FP2IHc20wVgtLYMdxHNSOZzt1W9d1GIZRz2HatatSizNWC6P/r8NYboU2fUEqVzxRVBT2JYik5apvVa9kX5EhqQqKkoyCWERJUlxfVBTYtuNVaNnUu6YjNC9gKs6Eh38qjuBc0o0FZpPYl8sEV+EbXYP/SwpjkSRe9S9hIsZjcCyF4eA63Z8Oi6AuUCVgZIlHZJlDKCFgJikgvCggSrHpRBIlUYVmK7jWsYfrXUV88G3hTKuGT/5NdJwXcf9uDlQWTJMBqR3N0DES3IBveBOBb2vo96UxHvWq8Y2uuxVqFgE793CDgOx927Fyc6BBD4ech305XDwlYXA0hbbjKt68z+BmT8GtSq4oqPwNpJxDgSCn73Ye504oGBhJ4eSRCl6/y6D3ShHd7YUGsOMfgKZF07E1F/D0yQ7Gwut4/CiLofENvHj5Hc+eZ2iKTVo+DFgbSmxZQGyFQ5iG8jXJIbLIk8/TcBpD6SFgb3eJhpLG6VYVnwnYeUHEg3v5g8DgHIfJWa6uA3OeTMysoiiWqWUZXe05XL28h7cf6VqOKugf2MCls0XcuZWF9TtQN0wkhAwW+C0sCA1hsTiXph3UaM80BMI/MB3NIr6yjfHJXcyvbiMQyiIyu0NLbXp7qBnMsGnTDxPH/VOYeP93c80YjPULOqnqTC4jopcAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"assets/img/alignitem4.png\"\n        title=\"assets/img/alignitem4.png\"\n        data-src=\"/static/ae6ed8da35afc2c8c1856a8e1c050a70/d9199/alignitem4.png\"\n        data-srcset=\"/static/ae6ed8da35afc2c8c1856a8e1c050a70/8ff5a/alignitem4.png 240w,\n/static/ae6ed8da35afc2c8c1856a8e1c050a70/e85cb/alignitem4.png 480w,\n/static/ae6ed8da35afc2c8c1856a8e1c050a70/d9199/alignitem4.png 960w,\n/static/ae6ed8da35afc2c8c1856a8e1c050a70/07a9c/alignitem4.png 1440w,\n/static/ae6ed8da35afc2c8c1856a8e1c050a70/575bd/alignitem4.png 1791w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 125%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAZCAYAAAAxFw7TAAAACXBIWXMAAAsSAAALEgHS3X78AAACt0lEQVQ4y62V208TQRTG+ef0wcQIxoiigBogmnh7EHgwPmog6IOGEAXFoCFESAg0miiIlJtCoQKFdrcXyxYFeoHulm632yJ8npl2ubTNgsokXzuz881vT/ecsy2Kayno6S0kU7lK0/XfiMbiCG/IWI/GoMTVrDed59dJajKFIjYpPHb458paEILHB78UQCgcgdlI0c2K2N348Z2dgsq7jYlPzwXmHjLm29vbXPuv5foLAv9HphH+7SgINB6qEk/kaTORREzVuA7sbSagavru+Tzg2rqM4RkXRr+LXGOzbgxOOtBp+Yy3fQN4b53G+Jxnd495Hd5lM6AC64zAzYbY4S+2RS4rAYxr7Jt5F7w/zYHDZBqxuzEyww4aUIrK7smuxcw+rYenCegzA0YUjM25MO12wSa6MD4vcgCbM31dEDh0yiVwz8SC0zzCiCKju9+HpoYQHjcG8WHIh6FvHjxpCqLhYQjveiV6hiJaWlbQ+CiMF23LWPxh8gyjahTPWwMoO6Xj8mmNAH58HPGioljD+RMpPHu6igmHgNtVMVqnUXc3AueSCXAjHkVbu4Rr5xKoKlXR0+/Hp1EvaspUVJzReGQMWHtLRmVxEg/qw4cAKcLWlxJqLmiouZhAd18mwhvlKqpLk2huzgDv3ZRx9ayO+3VHAb6SKLqDwOuXVIp6D1hLwCslRwEe90/OJEXiSSnfl5TKEkrKyb2k3KlWUErr+sOSEpJlWAbdeP1GIi1hYJyK1+ZGR6eE9o4ALAM+qlMRXT1LtL+Mrl6fedmwwh6dpSIWBEyRjMKe4msqbIfIC3vSKVCh077jkMIOZns502r7+tme1W4rZtqRtalp661GZAzZnLDaBQ42FXmYd94TMMmyEsesW+KvpHmPuZiHef2/QrnALRzX4ED2X8re1Lqh1D+IzjEGY/0BiIUd1/tkAXgAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/alignitems2.png\"\n        title=\"/alignitems2.png\"\n        data-src=\"/static/6a7ec42187e00be361a880e2d36f00e2/d9199/alignitems2.png\"\n        data-srcset=\"/static/6a7ec42187e00be361a880e2d36f00e2/8ff5a/alignitems2.png 240w,\n/static/6a7ec42187e00be361a880e2d36f00e2/e85cb/alignitems2.png 480w,\n/static/6a7ec42187e00be361a880e2d36f00e2/d9199/alignitems2.png 960w,\n/static/6a7ec42187e00be361a880e2d36f00e2/d6a46/alignitems2.png 1008w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3>align-self</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 936px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACOUlEQVQoz32SWU8TURTH+/kkPig2MYUqVFMalTWhxAeXKKgfAH3Q+KCJD0YaCYtisCVq6UoUaGepdLN7p8tMZzpLS/XvnZkGkmq4yW/Ouefc+7/nzj0WpdOFrA6gdaEQJEVDsyVBkGQ0BBGSrBlx+T/ocZHkLThjaKqKH4cUcvkCKPYnVDI/a+iiFpV8SlURZU46gWuKqPEmXLNFbAsNUmldEA3fzLVOfI5YXmyT23Vg+VUQMHezhmmnQOAx62ri/Yck/AcMfBEWuzEay8sFuKcbuLNQw+25Bp4+y+PxYoX4dRKrwz1Tg/drDmpX1QVbuH5ZxI1RFbeuqrhmleHZSCNIsfiyl0CEpfHwbg22cxocVgX28xqW7lcx42wZvuOSAtuQgq3tIrReX3DCzmPC1oZrRILTJsGznkbgkMVOJIEQxeDRgyrGLspwjUpEtI0nS2XMTzbJ4eaesWEJn7x9wRIn4N3aEVaIiGc9hZW1FBbvcXBP8cb15id5PH+Rw+rHpJHT2fQdYXXLnHs2Uni7mkT4IEtem7xypS6Q/0WTSvRqWARiLNxExDGsYWpcwchQB6/f5PA9RRtVG2uIDcZNX2c3xmA/kTXazFKq8dgOxbETZQy8YQYLsxzGrSJcdgFXLoh4+SoDP2kfPefrr/NFT/3PYQpRKo22Lqg3bTyZB5MpgkkXQRNCe2V8C1ThD1YMu0+XwGYLRo4ZhOyjUgVkipzZNlr3GJ0Ben+O8RundHt6vPfPukFEUuFfyvD4K5u9aD0AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/align-self.png\"\n        title=\"/align-self.png\"\n        data-src=\"/static/71cbd88b8e13923bae3c1bbfaa619754/6d2da/align-self.png\"\n        data-srcset=\"/static/71cbd88b8e13923bae3c1bbfaa619754/8ff5a/align-self.png 240w,\n/static/71cbd88b8e13923bae3c1bbfaa619754/e85cb/align-self.png 480w,\n/static/71cbd88b8e13923bae3c1bbfaa619754/6d2da/align-self.png 936w\"\n        sizes=\"(max-width: 936px) 100vw, 936px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3>flex - grow | shrink | wrap</h3>\n<ul>\n<li>flex-grow: aumenta o tamanho de um flex-item com base na largura do flex-container.</li>\n<li>flex-shrink : A capacidade de um flex item encolher com base na largura do flex-container.</li>\n<li>flex-wrap : Quantidade de Flex-item que você deseja em uma linha / fileira.</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 20.416666666666668%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsSAAALEgHS3X78AAAA5ElEQVQY012LzUrDUBBG835u1E0XtoogKlJBxLX4Li6KP6UlaOtGEVz2BQTtT9oi2iZ3knsxlSZwvLdR0C4+vpkzZ7yveQbkf5ItdY5OQyKRJe+/4zLPM7xYz/Abmsa15saPqV8Y7h8i6peGdkto3cbUzhXPLxF37cTyH8/enes3E/ufcFUzDEcp3tvEsFsO2S4pqjsTNlZjzk7HVNaF4+o7RwcFe3z64OQwtLzwKmtC2fL9rSl7myGlFaHT0Xj6c0YvELqBojdUdAdCf1y0211eB4qpMvRHsph/vYXj/oLCUUnKN0jWFLtXZtmTAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/flex-grow.png\"\n        title=\"/flex-grow.png\"\n        data-src=\"/static/11d8520e234007790ef4e763149969dd/d9199/flex-grow.png\"\n        data-srcset=\"/static/11d8520e234007790ef4e763149969dd/8ff5a/flex-grow.png 240w,\n/static/11d8520e234007790ef4e763149969dd/e85cb/flex-grow.png 480w,\n/static/11d8520e234007790ef4e763149969dd/d9199/flex-grow.png 960w,\n/static/11d8520e234007790ef4e763149969dd/07a9c/flex-grow.png 1440w,\n/static/11d8520e234007790ef4e763149969dd/191e2/flex-grow.png 1836w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 20.416666666666668%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsSAAALEgHS3X78AAAA6UlEQVQY012Ky0rDQABF84G+cKPUuhDERSkiduVG3OiPCD5bCqW0KCiKCxf9AiGtaRskpMnMdAZTSQrHaboxLi73ca7zk2bA/I+yf56ik4hJHOe5yIo5nWc4Ss9oNTXNuqbdUjRuDU/PMY07Q7ej6LQVV5eCDzfi8UFxf22o31jWlZbL/P/yGttNMxonOF+h4aAcsbclqO6H7Gwozk59djclx9WAo4rd1hVv7wEntZDtFUVpVVE7DHJetv+L8zGlNUGvp3H094zBUNIfCgYjQd+TfPpLX/SFXE8wEQbPl3l2C0zaffkR04RffvUVQ6pjtHgAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/flex-shrink.png\"\n        title=\"/flex-shrink.png\"\n        data-src=\"/static/80a0d71b7317e6405099f901d15e5387/d9199/flex-shrink.png\"\n        data-srcset=\"/static/80a0d71b7317e6405099f901d15e5387/8ff5a/flex-shrink.png 240w,\n/static/80a0d71b7317e6405099f901d15e5387/e85cb/flex-shrink.png 480w,\n/static/80a0d71b7317e6405099f901d15e5387/d9199/flex-shrink.png 960w,\n/static/80a0d71b7317e6405099f901d15e5387/07a9c/flex-shrink.png 1440w,\n/static/80a0d71b7317e6405099f901d15e5387/191e2/flex-shrink.png 1836w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 960px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 64.16666666666666%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAAC60lEQVQ4y02TS28bZRSG/YdYs+i/gC3rSgWpVAIVhIRAYsUCsSmLSkCRqFpUoAWpCNKSpr5P7MSN7cR2JrYn43js2J7xJR57PBf74Xx2Unqko28uZ555z3u+LzZbBPhhxCIICWSNolAykIxYrlYs/IDewKHbG+C6M5bLldQtJVeE0RJfvvOD6DUjpiBXEcgDxwVnBmM3YHQxxR5POev0OXPG9D2fiRcw913mgctM7t+MlQiIKarnLfAXHub5hLJ2h7Z2A20vTr095GLqUmkP2L33mFe3vkJLaPz0oMOd70yqp2drkFK9WZcClJZsZ0iv3xfAiEriUwbxa2SyTzHOp4S+z5E1IPHND+TfvUH2RZwvvnS4ef2cI8N8DVTq1kDV/1VMplMqpza11ojj1gDd7Eh2qRkWVavPccfmxOpRa3Qo6x06g9FVsxuwatlfDyJi6sE0QIwV04MAb+HjzhfMxadI/qwilFplmy8aQhme74tdknMZzlzq1TxiSqZlu+xr92lqn5HJJ/ntmUaurNO1x+xVDCpNaw0s19uk8ykS2R1+30rzZDvLn8/k/kWOl/vVdf0lcI6e+gQ3/haF/GOe5xtYPXsNMbs2R42N+dW6ji3+TpJvk8rtsnNoon19l/K1d0g9+pvuxUyA0ndXvNguGcRrbRKlJslCjdTBMfu1BvFCharR+V9h5gm53T9IiKJkqU7meZr89w9JpAp0hxcClP67E5fM3Ye8ev9z0tu7pI/q/JvRuX3T4edfDJrdTcs1AVu2x2i2IndokD2s8Ohpm49ve2yl6/RHow3QGrskvr3H3nsf8vKfNPGSzlayykcfOPx4vy6T3bSsvOw5I2bzOVq5QbJ4yINfG9y6PuCvnSq9oQAj2UPDyZRCw+Kg1aPYaFM8NimdtKiapxRPjLWPKprtPvsypAN5r7Kot8QGc113oJ/iiLDYTMYdRputE11uoUhUqwzlzKrzqt6rM6uu1RaK3ljDy7ro8lz/B4xQsQjnG15xAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"/wrap.png\"\n        title=\"/wrap.png\"\n        data-src=\"/static/e6193046fddd542711010ad7b44b7f89/d9199/wrap.png\"\n        data-srcset=\"/static/e6193046fddd542711010ad7b44b7f89/8ff5a/wrap.png 240w,\n/static/e6193046fddd542711010ad7b44b7f89/e85cb/wrap.png 480w,\n/static/e6193046fddd542711010ad7b44b7f89/d9199/wrap.png 960w,\n/static/e6193046fddd542711010ad7b44b7f89/8b936/wrap.png 1368w\"\n        sizes=\"(max-width: 960px) 100vw, 960px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h3>Conclusão</h3>\n<p>E isso então, espero ter contribuído para seu aprendizado de alguma maneira, foco aqui não foi técnico e sim entender o conceito que também e importante.</p>\n<p><strong>As sugestões e críticas são altamente apreciadas.</strong></p>\n<p>Até o próximo.</p>\n<p><img src=\"https://media.giphy.com/media/FRIC8vM3QBU7S/giphy.gif\" alt=\"https://media.giphy.com/media/FRIC8vM3QBU7S/giphy.gif\"></p>","timeToRead":1}},"pageContext":{"slug":"/flexbox/","previousPost":{"fields":{"slug":"/descubra-as-4-diferencas-entre-map-e-foreach/"},"frontmatter":{"templateKey":"blog-post","data":"30 de Janeiro de 2021","tag":"Javascript","titulo":"Descubra as 4 diferenças entre map e foreach","locale":"pt"},"timeToRead":3},"nextPost":{"fields":{"slug":"/meu-ano-de-2020/"},"frontmatter":{"templateKey":"blog-post","data":"24 de Dezembro de 2020","tag":"Carreira","titulo":"Meu ano de 2020 | Retrospectiva","locale":"pt"},"timeToRead":5},"locale":"pt"}}}