Meta tags:
description= A propriedade align-self define o alinhamento de itens individuais no contêiner. Experimente exemplos com seus valores.;
Headings (most frequently used words):
align, self, propriedade, com, exemplo, css, da, valor, como, se, relaciona, items, sintaxe, no, grid, quando, usar, valores, prática, propriedades, relacionadas, resultado, flex, end, stretch,
Text of the page (most frequently used words):
align (64), self (40), flex (37), border (34), grid (33), css (32), contêiner (24), div (24), text (22), items (21), style (21), background (21), font (20), item (18), color (18), itens (17), html (16), aprender (16), #propriedade (16), box (15), valor (14), width (14), que (13), the (13), column (13), com (12), uma (12), height (12), para (11), animation (11), experimente (11), end (11), start (11), auto (11), stretch (10), top (10), break (10), section (9), margin (9), padding (9), title (9), right (9), left (9), bottom (9), image (9), child (8), position (8), stroke (8), todos (7), padrão (7), são (7), center (7), display (7), não (7), nth (7), exemplo (7), overflow (7), decoration (7), offset (7), page (6), eixo (6), alinha (6), elemento (6), body (6), head (6), você (6), type (6), variant (6), w3docs (5), propriedades (5), valores (5), quando (5), sintaxe (5), como (5), longo (5), content (5), linha (5), faz (5), forma (5), copiar (5), template (5), first (5), transition (5), line (5), last (5), outline (5), radius (5), formatter (5), generator (4), prática (4), usar (4), alinhamento (4), direction (4), justify (4), por (4), posicionados (4), altura (4), topo (4), único (4), for (4), columns (4), property (4), enquanto (4), caixas (4), mode (4), transform (4), fill (4), size (4), list (4), row (4), gap (4), rule (4), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), this (3), delay (3), flexbox (3), define (3), qual (3), vertical (3), dentro (3), seus (3), pai (3), seu (3), initial (3), preencher (3), mesmo (3), apenas (3), verticalmente (3), mas (3), precisa (3), diferente (3), demais (3), vez (3), repeat (3), funciona (3), bloco (3), here (3), set (3), example (3), 8ebf42 (3), 1c87c9 (3), 99caff (3), 120 (3), document (3), doctype (3), transversal (3), está (3), object (3), css3 (3), definido (3), word (3), wrap (3), spacing (3), range (3), origin (3), before (3), after (3), max (3), letter (3), clip (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), ferramentas (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), web (2), relacionadas (2), relaciona (2), guia (2), principal (2), linhas (2), versão (2), permite (2), individuais (2), herda (2), inherit (2), base (2), baseline (2), defina (2), deixar (2), links (2), logotipo (2), dos (2), deve (2), usadas (2), substitui (2), default (2), mesma (2), sua (2), second (2), sem (2), substituindo (2), ela (2), absoluta (2), margem (2), tem (2), efeito (2), visibility (2), unicode (2), timing (2), function (2), duration (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), blend (2), min (2), rows (2), flow (2), feature (2), empty (2), counter (2), count (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, sobre, empresa, try, tutoriais, gratuitos, desde, 2014, next, previous, yes, was, helpful, todas, encaixam, definitivo, portanto, controla, múltiplas, desta, nível, verificar, contêineres, cria, nova, camada, página, usada, alterar, cor, fundo, especificado, seja, substituído, final, início, centro, expandirem, este, descrição, precisarem, isso, mais, limpo, repetir, cada, filho, cartões, igual, force, cartão, expandir, barra, navegação, centraliza, fixa, fixação, centralizada, maioria, alinhar, ícone, emblema, chamada, ação, posição, palavras, chave, conceito, idêntico, one, hugs, its, cell, featured, every, exclusivo, alinhando, coluna, área, ocupa, conteúdo, necessita, definir, esse, cresça, toda, extensão, mantêm, natural, funcione, definição, aqui, onde, três, segunda, especificada, mantém, centralizadas, caixa, sobe, resultado, alignself, dom, animável, herdado, posicionadas, aplica, inicial, ignorado, possui, automática, prevalece, absorve, espaço, livre, também, células, tabela, independentes, informação, aceita, mesmos, conjunto, simplesmente, significa, então, segue, comportamento, geral, determina, aquele, específico, individual, relação, posicionado, simples, motivo, pelo, até, das, destacar, alinhá, esta, usa, fugir, fixar, cabeçalho, permanecem, centralizados, zoom, index, writing, will, change, widows, white, space, user, select, bidi, underline, orientation, indent, ink, combine, upright, table, layout, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, opacity, rotate, distance, fit, mix, media, lines, clamp, keyframes, isolation, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, play, state, name, iteration, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, out, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, checked, active, seletores, selectors, guides, gradientes, nomes, cores, tabelas, class, uso, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,
Text of the page (random words):
propriedade css align self w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender css css basic introdução ao css uso do css sintaxe css css id e class css text css font css links tabelas css css border css padding css margin nomes de cores css gradientes css css guides guia do flexbox propriedades css3 css selectors seletores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propriedade css align self a propriedade align self define o alinhamento de itens individuais no contêiner experimente exemplos com seus valores a propriedade css align self alinha um único item flex ou grid ao longo do eixo transversal do seu contêiner substituindo o valor de align items definido no contêiner enquanto align items alinha todos os itens do contêiner de uma vez align self permite destacar um único item e alinhá lo de forma diferente esta é a propriedade que você usa quando um elemento precisa fugir do padrão por exemplo fixar um logotipo no topo de uma linha de cabeçalho enquanto os demais itens permanecem centralizados verticalmente align self só funciona quando o item está dentro de um contêiner flex um contêiner grid ou está posicionado de forma absoluta em um elemento de bloco simples ela não tem efeito motivo pelo qual um valor como stretch não funciona até que você defina display flex ou grid no elemento pai é uma das propriedades css3 como se relaciona com align items a relação é contêiner vs item align items é definido no contêiner e alinha todos os itens ao longo do eixo transversal align self é definido em um item individual e substitui o que o align items do contêiner determina para aquele item específico como align self aceita os mesmos valores que align items você só precisa aprender o conjunto de valores uma vez o valor padrão auto simplesmente significa usar o valor de align items do contêiner então um item sem align self segue o comportamento geral i informação align self é ignorado quando o item flex possui uma margem vertical auto a margem automática prevalece e absorve o espaço livre também não tem efeito em células de tabela ou em caixas de bloco independentes que não são itens flex grid valor inicial auto aplica se a itens flex itens grid e caixas posicionadas de forma absoluta herdado não animável não versão css3 sintaxe dom object style alignself auto sintaxe sintaxe da propriedade css align self align self auto stretch center flex start flex end baseline initial inherit copiar exemplo da propriedade align self exemplo da propriedade css align self com o valor flex start doctype html html head title the title of the document title style section display flex align items center height 120 px padding 10 px background 99caff div height 60 px background 1c87c9 margin 5 px div nth child 1 align self flex start background 8ebf42 style head body h2 align self property example h2 p here the align self for the first box is set to flex start p section div box 1 div div box 2 div div box 3 div section body html copiar experimente você mesmo resultado o align items center do contêiner mantém as caixas 2 e 3 centralizadas verticalmente enquanto a caixa 1 com align self flex start sobe para o topo substituindo o valor do contêiner apenas para ela mesma aqui está um exemplo onde três caixas são usadas e a segunda é especificada com o valor flex end exemplo da propriedade align self com o valor flex end exemplo da propriedade css align self com o valor flex end doctype html html head title the title of the document title style section display flex align items center height 120 px padding 10 px background 99caff div height 60 px background 1c87c9 margin 5 px div nth child 2 align self flex end background 8ebf42 style head body h2 align self property example h2 p here the align self for the second box is set to flex end p section div box 1 div div box 2 div div box 3 div section body html copiar experimente você mesmo exemplo com o valor stretch por padrão um item flex ocupa apenas a altura que seu conteúdo necessita definir align self stretch em um item faz com que esse único item cresça para preencher toda a extensão transversal do contêiner enquanto os demais mantêm sua altura natural para que o stretch funcione você deve deixar o height do item sem definição ou auto doctype html html head title the title of the document title style section display flex align items center height 120 px padding 10 px background 99caff div height 60 px background 1c87c9 margin 5 px div nth child 2 align self stretch height auto background 8ebf42 style head body h2 align self property example h2 p here the align self for the second box is set to stretch p section div box 1 div div box 2 div div box 3 div section body html copiar align self no css grid align self não é exclusivo do flexbox funciona da mesma forma dentro de um contêiner grid alinhando um item grid ao longo do eixo de bloco coluna de sua área de grid grid display grid grid template columns repeat 3 1 fr align items center default for every item grid featured align self start this one item hugs the top of its cell copiar no grid as palavras chave start e end são usadas em vez de flex start e flex end mas o conceito é idêntico o contêiner define um padrão com align items e align self o substitui por item quando usar align self um item diferente dos demais a maioria dos itens deve se alinhar de uma forma mas um único elemento um ícone um emblema uma chamada para ação precisa de uma posição diferente fixação no topo ou na base em uma linha centralizada uma barra de navegação que centraliza verticalmente seus links mas fixa um logotipo no topo deixar um cartão se expandir em uma linha de cartões de altura igual force apenas um a preencher a altura com align self stretch se todos os itens precisarem do mesmo alinhamento defina align items no contêiner isso é mais limpo do que repetir align self em cada filho valores valor descrição experimente auto o item herda a propriedade align items do contêiner pai este é o valor padrão experimente stretch faz os itens se expandirem para preencher o contêiner experimente center os itens são posicionados no centro do contêiner experimente flex start os itens são posicionados no início do contêiner experimente flex end os itens são posicionados no final do contêiner experimente baseline os itens são posicionados na linha de base do contêiner experimente initial faz a propriedade usar seu valor padrão experimente inherit herda a propriedade do elemento pai prática prática o que a propriedade align self no css faz o que a propriedade align self no css faz permite que o alinhamento padrão ou o especificado por align items seja substituído para itens flex individuais é usada para alterar a cor de fundo de um elemento cria uma nova camada na página da web alinha itens flex ao longo da linha vertical dentro de seus contêineres verificar propriedades relacionadas align items a versão desta propriedade no nível do contêiner align content alinha as linhas de um contêiner flex de múltiplas linhas justify content alinha os itens ao longo do eixo principal flex direction define qual eixo é o eixo principal e portanto qual o align self controla o guia definitivo de flexbox como todas as propriedades de alinhamento flex se encaixam was this page helpful yes no previous animation next animation delay on this page como se relaciona com align items sintaxe align self no css grid quando usar align self valores prática propriedades relacionadas w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores
|
