43:["$","title",null,{"children":"Posicionamento em CSS - parte 1 | carolx | Observable"}] 4b:T432,# Posicionamento em CSS - parte 1 A propriedade *display* do css serve para dar instruções ao navegador de como queremos posicionar um elemento. Vamos entender melhor sobre posicionamento, usando as seguintes opções de *display* - **display: inline** e **display: inline-block** - **display: block** - **display: flex** **Antes de começar:** 1. Para criar uma versão dessa página na sua própria conta, clique no menu do topo da página e na opção FORK (veja imagem) 2. Tome nota das dúvidas para tirar em sala ![image@1.png](${await FileAttachment("image@1.png").url()}) **Você poderá editar os blocos de código dessa página de acordo com as sugestões de prática. Quando editar um código, use as teclas shift + enter para aplicar a mudança.** **Observação:** Nos exemplos a seguir, você verá a tag `4e:[{"id":"de08118601fc2e0ddb65a91ffdca1fda56ddc703746634c2a7570604c65d1512731ea35fc1c08d8b6746c1aedc3a3734557987e32074b2bbdec8b8844663aab2","href":"https://static.observableusercontent.com/files/de08118601fc2e0ddb65a91ffdca1fda56ddc703746634c2a7570604c65d1512731ea35fc1c08d8b6746c1aedc3a3734557987e32074b2bbdec8b8844663aab2","name":"image@1.png","type":"image/png","lastModified":1646437285579.41,"size":6420}] 47:{"id":"08f25e357ff1bb93","slug":"propriedade-display-parte-1","title":"Posicionamento em CSS - parte 1","thumbnail":"370f371d626be267a751f609fa891a8f976e434d1de7d8fc6f11dda31b3722b3","access_level":"public","create_time":"$D2022-03-04T16:44:32.847Z","update_time":"$D2022-03-14T17:12:46.495Z","view_time":null,"first_public_time":"$D2022-03-05T00:44:33.870Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1203,"publish_version":1203,"role":null,"authored":false,"authors":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"role":"editor"},{"type":"individual","id":"d65a29b738c2e74f","login":"tiagombp","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c9efc3ec79f2da0371c9ed09baf9e22624bf7477f9dfc315c05d581f8e0a4daa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":30,"collection":{"id":"bfe1f0fd95ab6ced","slug":"programacao-web-introducao","title":"Programação Web - Introdução","owner":{"id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx"}},"type":"notebook","body":{"titling":"auto","title":"Posicionamento em CSS - parte 1","cells":[{"id":840,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"# 1. inline e block\n- Use a opção **inline** se você quer que o elemento siga o fluxo de texto. Por exemplo, um link dentro de um parágrafo. \n- Use a opção **block** para que o elemento html seja mostrado como um bloco de conteúdo. Por padrão, o elemento terá largura de 100%, e altura que segue o conteúdo. Você pode alterar as dimensões depois.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"

\n Isto é um LINK no meio de um texto\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":533,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"### Pratique: \nNo css acima, experimente as seguintes mudanças:\n\n(Lembre-se de usar shift + enter ou clicar no pequeno botão de play após cada edição para aplicar as edições)\n- Tente alterar a largura do link, definindo um valor para ***width*** (por exemplo, *width: 120px;*). Repare que no EXEMPLO 1-A a mudança é ignorada. Isso é porque o elemento com *display: inline* sempre acompanha o tamanho do conteúdo, e não permite definição de tamanhos\n- Troque o valor da propriedade ***display***, de *inline* para *inline-block*. Note que agora a largura é aplicada\n- Troque o valor da propriedade ***display*** para *display: block*. Repare no que acontece com o EXEMPLO 1-A. O bloco é passado para uma outra linha, pois por padrão o elemento com *display: block* não permite outros elementos nas suas laterais\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"### EXEMPLO 1-B - Float\nA propriedade *float:right* ou *float: left* pode ser usada em conjunto com *display: block*. Ela permite que outros elementos possam fluir em volta de um elemento do tipo block, e alinhar o bloco à direita ou à esquerda. \n\nO bloco de texto a seguir tem um elemento `` (link) no modo inline. \n\n**Importante:** Devido a diversos problemas causados pelo comportamento da propriedade float, ela caiu em desuso e não aconselhamos usá-la para estruturar sua página. Seu uso hoje é limitado.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"

\nLorem ipsum, LINK consectetur adipiscing elit. Quisque egestas laoreet sollicitudin. Phasellus sollicitudin commodo sem in blandit. Etiam vehicula eros sit amet sapien volutpat, sed tincidunt tortor elementum. Phasellus hendrerit ultrices enim, a faucibus magna auctor ut. Aliquam vitae lacinia lorem, sed luctus felis. Proin maximus lorem et leo cursus, rhoncus blandit turpis condimentum. Quisque lacinia leo lacus, a ullamcorper purus facilisis vel. Nullam a luctus lorem, nec iaculis ex. Maecenas eu sagittis purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam vehicula viverra justo at aliquet. Vestibulum a vestibulum erat.\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":401,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":591,"value":"### Pratique: \nNo css acima, experimente as seguintes mudanças:\n- Troque o valor da propriedade ***float***, de *right* para *left* e observe a mudança no EXEMPLO 1-B.\n- Altere o valor da propriedade ***margin*** para que a margem esquerda seja diferente da direita. Por exemplo, *margin: 5px 15px 5px 0px;*\n\n**Dica:** Quando tiver dúvidas sobre que valores uma propriedade css aceita, consulte aquela propriedade na [referência do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference). Como exemplo, veja a lista de [opções possíveis para a propriedade *float*](https://developer.mozilla.org/pt-BR/docs/Web/CSS/float#sintaxe)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"# 2. flexbox\n\nUma opção mais versátil e controlável que o float. Esta opção permite que os filhos de um elemento sejam empilhados em linha ou coluna. O padrão é o empilhamento em linha, na horizontal.\n\nQuando precisar relembrar quais são as propriedades auxiliares ao display: flex, você pode buscar uma \"cheatsheet\" online, como a dessa página: https://flexbox.malven.co/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"web-aula-5","database":"$undefined"},{"id":1032,"value":"

`. Dentro dele, há 5 elementos filhos com a classe `class=\"box\"`, numerados de 1 a 5.\n\nNo css, a regra para o elemento pai (com o id *#box-container*) define a propriedade *display: auto*. O valor *auto* significa que o navegador deve usar o valor padrão para as tags div (o padrão é block). Vamos alterar esse valor para usar o posicionamento com flexbox.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":645,"value":"### Pratique:\nNo css acima, experimente as seguintes mudanças:\n\n- Na regra de css para o elemento pai, modifique a propriedade *display:* para *flex*\n- Na regra de css para os elementos filhos, adicione outra linha e inclua a propriedade *flex-grow: 1;* Repare que os filhos \"crescem\" proporcionalmente na horizontal, até preencher o tamanho do elemento pai\n- **Após** o fechamento da regra dos elementos filhos, adicione uma nova regra para o elemento box-2 *#box-container > .box-2* Nela, defina a propriedade *flex-grow: 3;* Após aplicar o novo valor para *flex-grow: 3*, somente a caixa com o número 2 terá um tamanho 3 vezes maior que as outras.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":727,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":754,"value":"$4d","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":876,"value":"### Pratique:\nNo css acima, experimente as seguintes mudanças:\n\n- Na regra de css para o elemento pai, altere a propriedade *flex-direction*, de *row* para *column*. Observe a diferença no layout.\n- Na regra de css para o elemento pai, altere a propriedade *justify-content*, de *flex-start* para *space-between*. Os filhos irão se distribuir entre as bordas do eixo principal, criando espaços automáticos entre eles\n- Na regra de css para o .box-2, inclua a propriedade *align-self: stretch*. Somente o box-2 irá se esticar para se ajustar ao tamanho do pai no eixo secundário","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1038,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1042,"value":"### EXEMPLO 2-C\n**align-content** vs **align-items**\n\nEssas duas propriedades podem ser um pouco confusas a princípio, pois parecem fazer a mesma coisa, mas não exatamente.\n\n- **align-items:** alinhamento de cada filho no eixo secundário\n- **align-content:** alinhamento do grupo de filhos no eixo secundário, mas só funciona se a propriedade flex-wrap estiver configurada para permitir múltiplas linhas (*flex-wrap: wrap* ou *flex-wrap: wrap-reverse*)\n\nNo exemplo a seguir, os filhos têm alturas diferentes. O *flex-wrap* está ativado, e o alinhamento está à esquerda e ao topo. Como alinhar os filhos de maneira diferente?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1050,"value":"\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1056,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1100,"value":"### Pratique:\n\n- Experimente mudar, no elemento pai, *align-items: start;* para *align-items: center;* Repare que os elementos alinham-se ao centro na sua própria linha, no eixo vertical\n- Ainda no elemento pai, altere *align-content: start;* para *align-content: center;* Repare que agora, todo o bloco de conteúdo dos filhos alinham-se ao centro do elemento pai.\n- Você pode experimentar as outras opções de *align-content* e *align-items* nessa [cheatsheet de Flexbox](https://flexbox.malven.co/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 42:null