Arquivado
Este tópico foi arquivado e está fechado para novas respostas.
- 0
Como faço pra fazer os meus dois containers de conteúdo e conteúdo lateral ficarem corretos com flexbox?
Perguntado por
andreymiragem
-
Conteúdo Similar
-
Por aldo silva
Estou desenvolvendo uma galeria de imagens. Mas não consigo remover o espaço vertical entre as imagens. Eu certamente estou fazendo algo errado, mas não consigo ver o erro. Preciso de ajuda. Eu tentei usar GRID, mas como as imagens são carregadas dinamicamente, não funcionou muito bem.
Este é o código HTML
<script> $(document).ready(function() { $.ajax({ type: "POST", url: "load-pics.php?id="+start, processData: false, contentType: "application/json", data: '', success: function(r) { r = JSON.parse(r) for (var i = 0; i < r.length; i++) { $('#gallery').append("<img class='item' id='" + r[i].id + "' src='/us/" + r[i].foto + "'>"); } start += 5; }, error: function(r) { console.log("Something went wrong!"); } }) }); </script> <style> .container { margin: 0 50px 0 50px; border: 1px solid #FF0000; height: 100%; } .flex { display: inline-flex; flex-direction: column; flex-wrap: wrap; flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; align-self: flex-start; } .item { border: 3px solid #000; box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.3); max-width: 23vw; } </style> <body> <div class="container"> <span id="gallery"> </span> </div> E este o resultado:
-
Por leandro32
Senhores, me ajudem pelo amor de Deus!!!
Estou montando uma "Base de Documentos" onde eu trabalho. Essa base é dividida por tipo de Documento (CNH/RG/OUTROS) e ano de expedição (2019/2018/2017...). As máscaras principais (HOME's) já foram feitas, o problema é que não consigo vincular esses botões dos anos em DIV's diferentes.
Alguém, em nome de Jesus Cristo, me ajuda a criar uma regra que, ao clicar no ano 2018, doc aparece na DIV ao lado com a barra de ZOOM??? Porque eu já estou ficando louco!!!
<!-- CÓDIGO DO SITE -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="estilo.css" />
<title>ACRE - RG</title>
</head>
<body>
<!-- CABEÇALHO COM MENUS -->
<header>
<div class="container">
<div class="zoom">
<img src="logo.png" class="img-responsive" height="95px" width="130px" border="2px">
<div id="menu">
<a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/Base%20Documental.html">HOME</a>
<a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/RG.html">RG</a>
<a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/CNH.html">CNH</a>
<a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/OUTROS.html">OUTROS</a>
</div>
</div>
</div>
</header>
<!-- O CORPO DO SITE -->
<div class="container2">
<fieldset>
<center><h2><i> Estado do ACRE - RG</i></h2></center>
</fieldset>
</div>
<div class="container3">
<!-- COLUNA DOS ANOS -->
<div class="container4">
<div class="col-lg-2 col-md-2 col-sm-2">
<div style="height: calc(100vh - 230px); overflow-y: scroll; overflow-x: hidden; right: 16px">
<div class="btn-group-vertical" role="group" aria-label="..."
<div class="zoom">
<button class="btn ng-scope btn-default" ng-class="{'btn-primary': analyser.selectedDocModel.guid === docModel.guid, 'btn-default': analyser.selectedDocModel.guid !== docModel.guid}" ng-repeat="docModel in analyser.filteredDocModels" ng-click="analyser.selectDocModel(docModel)" ng-show-img="areaimagem" style="-webkit-user-drag: none" class="ng-scope" img src="AM.01.jpg" class="img-responsive" href="AM.01.jpg" size="80%">
<small class="ng-binding">RG</small>
<br>
<small class="ng-binding">AM- 2019</small>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- O RODAPÉ Do SITE -->
<footer>
<span> <b>BASE DOCUMENTAL</b> - ©<i>Leandro do Nascimento Martins</i></span>
</footer>
</div>
</div>
</div>
</body>
</html>
<!-- ARQUIVO ESTILO.CSS -->
/* PADRÃO CSS */
/* eliminando configurações dos browsers*/
* {margin: 0; padding: 0; font-family: verdana, helvetica, arial;}
/* TODAS AS TAG's DECLARADAS */ /* PARA UMA "TAG - PARTE" NORMAL, USA-SE APENAS O NOME */
p {color: silver; font-size: 15px; text-align: center; font-family: arial, "Times new roman"; text-shadow: 1px 1px 1px #111111;}
body {background-color: #E8E8E8; width: 100%;}
header {background-color: #08298A; height: 100px; padding: 2px; width: 100%;}
footer {clear: both; color: white; background-color: #08298A; height: 40px; text-align: center ; padding: 10px; text-shadow: 1px 1px 1px black;}
h1 {color: SILVER; text-align: center; margin: 0 0 50px 0; text-shadow: 2px 2px 2px #111111;}
h2 {color: SILVER; text-align: center; margin: 5px 0 5px 0; text-shadow: 2px 2px 2px #111111;}
/* TODAS AS ID's */ /* PARA "IDENTIFICAÇÃO - ID" DA DIV USA-SE .#. HASHTAG */
#div_principal {background-color: white; clear: both; background-size: 65%; min-height: 485px; padding: 40px 0 40px 0; margin: 1% 1% 1% 1%; width: 100%;}
#logo {float: left; margin: 0 20px 0 10px;}
#menu {float: right; margin-top: 40px; text-transform: uppercase;}
#menu a {padding: 32px 20px; text-decoration: none; color: white; border-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; cursor: pointer; transition: background-color 1s;}
#menu a:hover {background-color: white; color: black;}
#btn-default {text-decoration: none;}
/* CLASS */ /* PARA CLASSES-CONTAINER's DIFERENTES USA-SE O PONTO . */
.efeito {background-color: rgba(0, 0, 0, 0.3); padding: 100px 0 100px 0;}
.container {width: 100%; /* largura */ margin: auto; /* ajuste automatico independente de resolução*/}
.container2 {width: 97%; /* largura */ margin: auto; /* ajuste automatico independente de resolução*/ background-color: white;}
.container3 {width: 95%; margin: auto; background-color: #FFFAFA; clear: both;}
.container4 {width: 10%; float: left; background-color: #FFFAFA; clear: both; }
.container5 {background-color: ; float: left;}
.col-lg-2 {width: 95%; }
.col-md-2 {width: 50px;}
.col-sm-2 { width: 79px;}
.col-lg-10 { width: 80%; }
-
Por Carcleo
Pessoal, estou com uma dúvida que está me tirando o sono!
Então, vou exibir 2 situações com Flexbox onde 1 delas está dando uma falha. (Será mesmo?).
Nessa versão, com DIV's, tudo funciona bem:
CSS:
span.vertical { writing-mode: vertical-lr; transform: rotate(180deg); } span.comum { } div.cabecalhoVertical{ display: flex; height: 200px; border: .1px rgb(0,0,0) solid; } div.cabecalhoVertical div { display: flex; flex-grow: 1; list-style: none; border-right: .1px rgb(0,0,0) solid; align-items: center; justify-content: center; } div.cabecalhoVertical div span { text-align: center; font-weight: bolder; } HTML:
<div class='cabecalhoVertical'> <div style='width:215px;'><span class='comum' >Nome do Gcéu </span></div> <div style='width:215px;'><span class='vertical'>Supervisor</span></div> <div style='width:215px;'><span class='comum' >Líder</span></div> <div style='width:035px;'><span class='vertical'>Houve Supervisão?</span></div> <div style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></div> <div style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></div> <div style='width:035px;'><span class='vertical'>Membros Compromissados</span></div> <div style='width:035px;'><span class='vertical'>Visitantes</span></div> <div style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div> <div style='width:035px;'><span class='vertical'>Total de presentes</span></div> <div style='width:035px;'><span class='vertical'>Ofertas</span></div> <div style='width:035px;'><span class='vertical'>Disicpulados</span></div> <div style='width:035px;'><span class='vertical'>Número de decisões</span></div> </div> Resultado:
Agora com UL -> A falha:
CSS:
span.vertical { writing-mode: vertical-lr; transform: rotate(180deg); } span.comum { } ul.cabecalhoVertical{ display: flex; height: 200px; border: .1px rgb(0,0,0) solid; } ul.cabecalhoVertical li { display: flex; flex-grow: 1; list-style: none; border-right: .1px rgb(0,0,0) solid; align-items: center; justify-content: center; } ul.cabecalhoVertical li span { text-align: center; font-weight: bolder; }
HTML:
<ul class='cabecalhoVertical'> <li style='width:215px;'><span class='comum' >Nome do Gcéu </span></li> <li style='width:215px;'><span class='vertical'>Supervisor</span></li> <li style='width:215px;'><span class='comum' >Líder</span></li> <li style='width:035px;'><span class='vertical'>Houve Supervisão?</span></li> <li style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></li> <li style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></li> <li style='width:035px;'><span class='vertical'>Membros Compromissados</span></li> <li style='width:035px;'><span class='vertical'>Visitantes</span></li> <li style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></li> <li style='width:035px;'><span class='vertical'>Total de presentes</span></li> <li style='width:035px;'><span class='vertical'>Ofertas</span></li> <li style='width:035px;'><span class='vertical'>Disicpulados</span></li> <li style='width:035px;'><span class='vertical'>Número de decisões</span></li> </ul> Percebam agora na print como aparece um bloco adicional no lado esquerdo antes da primeira LI
Gostaria de saber 2 coisas:
1) Porquê isso acontece uma vez que list-style está setado para none nas LI's?
2) Como corrigir essa falha?
Obrigado a quem puder ajudar.
-
-
Por Luccallp
space-between. Flex items são igualmente distribuídos na linha (se o espaço de sobra for negativo ou houver somente um flex item na linha, o comportamento é idêntico a flex-start)
MEU CSS:
#catalogoList {
width: 70%; margin-left: 3%; margin-right: 5%; padding-bottom: 15px; border-top: 2px solid #8A7E7B; float: right; height: 300px; margin-top: 50px !important; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap;
}
#catalogoList .item {
width: 24%; height: 360px; border: 1px solid #D9D9D9; margin-top: 15px; transition: 0.5s cubic-bezier(.77,.43,.42,1.34); overflow: hidden; position: relative;
}
No caso, são 4 blocos por linha, acontece que na última linha não tem 4 blocos, as vezes 2 ou 3 e ele acaba alinhando nas duas extremidades laterias (estou ciente do justify-content: space-between), mas não tem como fazer ele se comportar de outra forma, como o flex-start quando não tiver itens suficientes para preencher essa linha?
-
Eu consegui deixar ele assim, porém tive que usar margin pra fazer isso, e sei que não está correto, alguém pode me ajudar?
Compartilhar este post
Link para o post
Compartilhar em outros sites