{"id":13300,"date":"2023-04-23T21:30:49","date_gmt":"2023-04-24T00:30:49","guid":{"rendered":"https:\/\/idmotion.com.br\/?p=13300"},"modified":"2023-10-10T09:01:40","modified_gmt":"2023-10-10T12:01:40","slug":"como-impedir-distorcao-de-um-elemento-dentro-de-conteiner-flex-com-css","status":"publish","type":"post","link":"https:\/\/defluence.com.br\/insights\/desenvolvimento-web\/como-impedir-distorcao-de-um-elemento-dentro-de-conteiner-flex-com-css\/","title":{"rendered":"Como impedir distor\u00e7\u00e3o de um elemento dentro de cont\u00eainer flex com CSS"},"content":{"rendered":"\n<p>Para impedir que um elemento dentro de um container com <code>display: flex<\/code> tenha seu tamanho distorcido, voc\u00ea pode usar a propriedade CSS <code>flex-shrink<\/code> e definir seu valor como <code>0<\/code>. A propriedade <code>flex-shrink<\/code> controla como um item flex\u00edvel se encolhe quando o espa\u00e7o dispon\u00edvel \u00e9 insuficiente para acomodar todos os itens.<\/p>\n\n\n\n<p>Suponha que voc\u00ea tenha o seguinte elemento HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container-flex\"&gt;\n  &lt;div class=\"elemento-sem-distorcao\"&gt;\n    Conte\u00fado do elemento\n  &lt;\/div&gt;\n  &lt;div class=\"outro-elemento\"&gt;\n    Conte\u00fado do outro elemento\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>No seu arquivo CSS, adicione o seguinte c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container-flex {\n  display: flex;\n}\n\n.elemento-sem-distorcao {\n  flex-shrink: 0;\n}<\/code><\/pre>\n\n\n\n<p>Dessa forma, o elemento com a classe <code>.elemento-sem-distorcao<\/code> n\u00e3o ter\u00e1 seu tamanho distorcido quando estiver dentro de um cont\u00eainer flex\u00edvel. Ele manter\u00e1 seu tamanho original e n\u00e3o encolher\u00e1, mesmo que o espa\u00e7o dispon\u00edvel seja insuficiente. Se necess\u00e1rio, voc\u00ea tamb\u00e9m pode usar a propriedade <code>flex-basis<\/code> para definir o tamanho inicial do elemento flex\u00edvel. Por exemplo: <code>flex-basis: 200px;<\/code><\/p>\n\n\n\n<p>\u00c9 essencial lembrar que, na maioria dos casos, ser\u00e1 necess\u00e1rio definir as propriedades <code>height<\/code> e <code>width<\/code> para seu <code>.elemento-sem-distorcao<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda como impedir a distor\u00e7\u00e3o de um elemento em um cont\u00eainer flex com CSS. Descubra dicas pr\u00e1ticas para melhorar a qualidade do seu desenvolvimento web. Leia agora!<\/p>\n","protected":false},"author":1,"featured_media":13987,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[17],"_links":{"self":[{"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/posts\/13300"}],"collection":[{"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/comments?post=13300"}],"version-history":[{"count":0,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/posts\/13300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/media\/13987"}],"wp:attachment":[{"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/media?parent=13300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/categories?post=13300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/defluence.com.br\/insights\/wp-json\/wp\/v2\/tags?post=13300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}