# Estudos sobre FLEXBOX
Flexbox é destinado à criação de layout em uma dimensão, 수평 또는 수직.
Flex 컨테이너 및 구성 요소의 구성 요소는 최종 구성 요소에 따라 유연하게 구성할 수 있습니다.
Vamos utilizar a seguinte estrutura HTML para nossos 예시:
<div class="container">
<div class="item">item-1</div>
<div class="item">item-2</div>
<div class="item">item-3</div>
</div>
Nosso CSS 기본 버전:
* {
margin: 0;
padding: 0;
}
/* Flex Container */
.container {
max-width: 600px;
margin: 20px auto;
/* esquemas flexbox */
}
/* Flex items*/
.item {padding: 10px 0;text-align: center;}
.container> :nth-child(1){
background: cadetblue;
}
.container> :nth-child(2){
background: red;
}
.container> :nth-child(3){
background: yellowgreen;
}
프로프리데이드 디스플레이
A propriedade display foi criada em 1996 pela especificação para a CSS1 e só permitia os valores none, block, inline e list-item. 아고라 포데모스 우사르 또는 발러 플렉스.
Quanto definimos um elemento pai com o display flex ele se torna um container Flex e todos os seus 'filhos' passam a ser denominados como flex itens.
활용: 디스플레이: 플렉스;
Por padrão o display flex, definido no pai, tem seu flex-direction como row, ou seja, em linha.
프로프리데이드 방향
Destinado definir o sentido e direção do eixo principal. Podemos alterar essa direção indicando com as seguintes opções:
flex-direction: column; //deixa a direção do eixo em coluna
flex-direction: column-reverse; //deixa a direção do eixo em coluna reversa
flex-direction: row-reverse; //deixa a direção do eixo em linha reversa
flex-direction: row; //deixa a direção do eixo em linha
프로프리데드 랩
O flex-wrap 및 utilizado quando queremos que haja a quebra de linha dos flex itens. Isso Serve para que eles não fiquem compactados além do limite do seu conteúdo. Nele temos as seguinte opções:
flex-wrap: nowrap;//não deixa haver a quebra de linha
flex-wrap: wrap;//habilita a quebra de linha
flex-wrap: wrap-reverse;//habilita a quebra de linha reversa
프로제다드 플로우
O flex-flow é um atalho para usar o flex-direction e flex-wrap. Nele temos as seguintes opções:
flex-flow: row nowrap; //define o flex-direction como inline e sem quebra de linha
flex-flow: row wrap; //define o flex-direction como inline e com quebra de linha
flex-flow: column nowrap; //define o flex-direction como em coluna e sem quebra de linha
Propriedade Justify-컨텐츠
Justify-content é usado no flex container para alinhar os filhos em determinada direção para ocupar todo o conteúdo do seu container, isso se já não estiverem ocupando o espaço. Nele temos as seguintes opções:
justify-content: space-around;
justify-content: space-between;
justify-content: center;
justify-content: flex-end;
justify-content: flex-start;
Propriedade 정렬 항목
Utilizamos o align-items para fazer um alinhamentos dos filhos em relação ao eixo do container pai. Nele temos as seguintes opções:
align-items: baseline;
align-items: center;
align-items: flex-end;
align-items: flex-start;
align-items: stretch;
Propriedade align-content
콘텐츠 정렬 프리시사모스 퀘 오 컨테이너 플렉스(pai) 텐하 움 높이 정의 정의 que esse valor tem que ser maior que a soma das linhas dos filhos. o wrap pelo amor de Deus를 사용하십시오.
AGORA SOBRE OS ITENS
프로프리다드 성장
Destinado a definir o fator de crescimento do flex item do dentro do container quando nele há espaço disponível.
Pega o espaço restante e Divide pelo valor do growth definido no item.
코모 우사르:
flex-grow: N;(definir um numero)
프로제다드 축소
Destinado a definir o fator de encolhimento do flex item dentro do container quando a largura do container for menor do que a soma das larguras dos flex items. Nele temos as seguintes opções:
flex-shrink: 1;
flex-shrink: 0;
flex-shrink: número;
프로제다드 기반
Destinado a definir a dimensão inicial do flex item dentro do container, nos sentidos largura ou altura. Indica o tamanho inicial do flex item ANTES da distribuição do espaço restante. Nele temos as seguintes opções:
flex-basis: auto;
flex-basis: unidade;
flex-basis: 0;
프로프리다이드 플렉스
Propriedade que é a forma abreviada de se declalar as propriedades flex-grow, flex-shrink e flex-basis de uma só vez. O único valor obrigatório dessa propriedade é o flex-basis. O valor inicial dessa propriedade é 1 0 auto. 독점 사용을 권장합니다. 활용:
flex: 1; // Define flex-grow: 1; flex-shrink: 1; e flex-basis: 0;
flex: 0 1 auto; // Esse é o padrão,
flex: 2; // Define exatamente da mesma forma que o flex: 1; porém neste caso o flex-grow será de 2, o flex-shrink continuará 1 e o flex-basis 0.
flex: 3 2 300px; // flex-grow: 3, flex-shrink: 2 e flex-basis: 300px;
프로프리데드 오더
Destinado a reordenar os flex itens dentro do container pai sem zuar a ordem que eles ocupam na marcação. 스발로 이니셜 에제로. 코모 우사르:
order: N ; (definir um numero)
Proprideade align-self
Destinado ao ao alinhamento 개별 dos flex itens dentro do container pai e segundo direção e sentido eixo. Esse alinhamento acontece tanto em linha como em coluna. Nele temos as seguintes opções:
align-self: stretch;
align-self: baseline; //alinha conforme a tipografia
align-self: center; //alinha no centro
align-self: flex-end; //alinha ao final
align-self: flex-start; //alinha no inicio
align-self: auto;
Reference
이 문제에 관하여(# Estudos sobre FLEXBOX), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/diogomiaguy/estudos-sobre-flexbox-52k3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)