notas de uso de layout elástica Flex

(Nota para a presente pesquisa de referência)

display: Flex Introdução

  A propriedade deve ser o layout elástica, então alterar o layout de elasticidade cruzada vertical da razão pela qual poderosa e flexível, porque quebra um monte de regras antigas. Qualquer elemento pode ser configurado para layouts elásticos, layouts elásticos terá um impacto sobre seus elementos filho internos:

1. elementos de bloco já não são uma linha única (o que é unidimensional).
2. Se os elementos de bloco não explicitamente predeterminada largura, o elemento pai não é coberta lateralmente.
3. flutuar, clara e propriedade vertical-align falhará.
4. apresentação definido no elemento pai: cabo flexível; em seguida, a criança pertence ao layout elástica.

1.flex-sentido: fileira | fileira-reversa | coluna | coluna inversa | inicial | herdam (caixa de direcção arranjo)

(1) consecutivas: valor padrão, o fuso é horizontal, a posição inicial para a esquerda, da esquerda para item certo.
(2) linha-inversa: o veio principal é horizontal, na posição de partida para a direita, projecto da direita para a esquerda.
(3) coluna: um eixo vertical, a posição de partida no item superior apresentadas na vertical, de cima para baixo.
(4) Coluna-inversa: o eixo é vertical, a partir da posição inferior, projectos exibido verticalmente, de baixo para cima.

código:

		/*flex-direction: row;*/
		#main1{
			width:400px;
			display:flex;
			flex-direction: row;
			background: #ccc;
		}
		#main1 div{
			width:50px;
			height:50px;
		}
		/*flex-direction: row-reverse;*/
		#main2{
			width:400px;
			display:flex;
			flex-direction: row-reverse;
			background: #ccc;
		}

		#main2 div{
			width:50px;
			height:50px;
		}

2.flex-envoltório: nowrap | envoltório | wrap-reversa (linha de divisão ou de demolição coluna)

  Ou seja, linha após linha coberto.

(1) .nowrap: valor padrão, os itens predeterminados não são removidas no linhas ou colunas de contentores visor bipartido.
(2) .Wrap: itens predeterminados demolição linhas ou colunas recipiente apresentado automaticamente removido quando necessário.
(3) .Wrap-inversa: os itens no contentor de uma linha de divisão pré-determinado ou coluna exibida removida automaticamente, quando necessário, mas na ordem inversa.

código:

        #main2 {
            width: 200px;
            display:flex;
            flex-wrap: wrap;
            background:#ccc;
        }
        #main2 div {
            width: 50px;
            height: 50px;
            text-align:center;
            line-height:50px;
        }

Adicional: flex-fluxo (1,2 escrito ligação)

flex-fluxo: [flex-sentido] [flex-envoltório];
Este limite superior é escrito 1,2
flex-sentido posição flex-envoltório que pode ser escrito directamente para o valor de atributo 1, 2
códigos:

		#main {
			width: 200px;
			display:flex;
			flex-flow:row-reverse wrap;
			background:#ccc;
		}
		#main div {
			width: 50px;
			height: 50px;
			text-align:center;
			line-height:50px;
		}

(E entre o projeto eo espaço em torno da direção do eixo principal (direção horizontal padrão)) espaço-around | flex-start | flex-end | center | espaço-entre: 3.justify-content

(1) .flex-lo começar: valor padrão, um recipiente de produto predeterminada na posição de partida do fuso.
(2) .flex-final: o projecto está localizado numa posição pré-determinada do recipiente a extremidade do eixo.
(3) .center: projectar um fuso intermediário pré-determinado do recipiente.
(4) entre .space-: as duas extremidades são alinhadas de projectos do fuso predeterminados.
(5) em torno .space-: os lados do recipiente itens predeterminados são retidos igualmente espaçados.

código:

		#main1 {
			width: 400px;
			background:#ccc;
			display: flex;
			justify-content:space-between;
		}
		#main1 div {
			width: 70px;
			height: 70px;
			text-align:center;
			line-height:70px;
		}

		#main2 {
			width: 400px;
			background:#ccc;
			display: flex;
			justify-content:center;
		}
		#main2 div {
			width: 70px;
			height: 70px;
			text-align:center;
			line-height:70px;
		}

4.align-items estiramento | centro | flex-start | flex-finais | linha de base (tal como o centro de modo que todos os blocos de sub-elemento que verticalmente centrado)

(1) .stretch: esquema predefinido recipiente elástico vai ser esticado para encaixar os projectos de recipiente na direcção do eixo transversal.
(2) .center: elásticas itens de contentores disposição predeterminada centrado na direcção do eixo transversal.
(3) .flex-lo começar: elástico pré-determinado recipiente disposição nos projectos a partir da posição de alinhamento cruzar-eixo.
(4) .flex-final: um esquema produto posição final elástica eixo transversal predeterminada alinhado com o recipiente.
(5) .baseline: itens elástico recipiente esquema predeterminado alinhado com a linha de base da primeira linha de texto.

código:

        #main {
            width: 200px;
            height: 100px;
            background:#ccc;
            display: flex;
            align-items: center;
        }
        #main div {
            width: 70px;
	    	height: 20px;
        }

5.align-content: Estiramento | center | flex-start | flex-end | espaço-entre | espaço-around (atributo align-conteúdo só se aplica ao recipiente multi-linha Flex)

Com o Flex-wrap, melhor.

(1) .stretch: valor padrão, linha predeterminada é esticada para acomodar o tamanho do componente transversal eixo do recipiente, onde o produto vai ser esticado.
(2) .center: predeterminado linha vaso intersectando o eixo do recipiente centrado. (3) .flex-lo começar: uma linha predeterminada vaso intersectando o recipiente eixo alinhado posição inicial.
(4) .flex-final: o final de uma linha predeterminada intersectando o eixo do recipiente alinhado com a posição do recipiente.
(5) .space-entre: as linhas de recipiente alinhadas especificado eixos que se cruzam em ambas as extremidades, o intervalo entre as linhas são iguais.
(6) em torno .space-: a cada pré-determinados intervalos iguais em ambos os lados das filas de contentores. Por conseguinte, as bordas do recipiente de espaçamento entre linhas do que o espaçamento entre as linhas de dobrado.

código:

    #main {
        width: 200px;
        height: 300px;
        background:#ccc;
        display: flex;
        flex-wrap: wrap;
        align-content:space-between; 
    }
    #main div {
        width: 50px;
        height: 20px;
    }

<div id="main">
    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>

    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>

    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>
    
    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>
</div>

6. Alinhar-auto: auto | estiramento | centro | flex-início | flex-fim | linha de base (um elemento interno diferem no arranjo dos lados do eixo)

(1) .auto: valores de atributos padrão herdadas ALIGN-itens de recipiente elástico, o recipiente não é fornecido, se o programa ALIGN-itens elásticas, o alongamento valor padrão.
(2) .stretch: projectar um tamanho predeterminado para utilizar o recipiente é esticado no veio transversal.
(3) .center: projecto de um eixo pré-determinado que intersecta a linha centrada.
(4) .flex-lo começar: posição de um ponto predeterminado na linha começar estão alinhados que intersecta a direcção axial.
(5) .flex-final: projecto de um eixo pré-determinado que intersecta a posição de extremidade da fileira está alinhado.
(6) .baseline: proporcionar que o projecto está alinhada na linha na linha de base.

código:

        #main {
            width: 300px;
            height: 200px;
            background:#ccc;
            display: flex;
            flex-flow: row wrap;
        }
        #main div {
            width: 70px;
            height: 70px;
        }
        #main div:nth-child(2n) {
            align-self: center;
        }

<div id="main">
    <div style="background-color:coral;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:red;"></div>
    <div style="background-color:yellow;"></div>
</div>

Na prática, um múltiplo de itens 2n bloquear.

Adicionais 1: Diferença ALIGN-itens e alinhar-content

  atributo pode alinhar-itensAplicam-se a todos os navios de FlexSeu papel é o conjunto padrão criança eixo de alinhamento flexível na interseção de cada linha da flex.
  align-teorAplica-se apenas ao recipiente flexível multi-linhas(Isto é, recipiente criança flectir mais do que a única fileira atributo efeito), a sua função é a de flectir quando o recipiente quando houver espaço extra no eixo transversal, o sub-produto como um todo (valor de atributo: flex-início , flex-fim, o tempo de centro) estão alinhadas. Efeito de diferentes valores são como se segue

Adicionais 2: Diferença ALIGN-itens e alinhar-auto

ALIGN-itens são usados ​​como o contêiner pai (estilo de escrita na folha de estilo contém o display), então podemos configurar toda a criança com este modelo. Alinhar-auto para agir em contêiner filho, depois de configuração, só definir esta criança CCTV pode ter este modelo.

8.order: número | inicial | herdar (para definir a quota de localização container)

(1) .número: O valor padrão é 0. disposições de ordem projeto Flex (ou seja, definir a posição de cada cor).

        #main {
            width:400px;
            height:150px;
            display:flex;
            background:#ccc;
        }
        #main div{
            width:70px;
            height:70px;
        }
        div#coral{order:2;}
        div#lightblue{order:4;}
        div#lightgreen{order:3;}
        div#pink{order:1;}

<div id="main">
    <div style="background-color:coral;" id="coral">1coral</div>
    <div style="background-color:lightblue;" id="lightblue">2lightblue</div>
    <div style="background-color:lightgreen;" id="lightgreen">3lightgreen</div>
    <div style="background-color:pink;" id="pink">4pink</div>
</div>

9.flex-crescer: número (amplificação e padrões para 0 não amplificar)

  Ampliada flex-grow definição de atributo item da escala, o padrão é 0 não ou seja amplificado. Se o espaço restante do recipiente não estiver presente, ele não será capaz de fazer zoom

(1) .número: Um valor padrão para zero, para uma escala predeterminada de alargamento do submarino, a relação de contraste e outros artigos a ser determinado.

código:

        #main {
            width: 350px;
            height: 100px;
            background:#ccc;
            display: flex;
        }

        #main div{flex-basis:50px;}

        #main div:nth-of-type(1) {flex-grow: 1;}
        #main div:nth-of-type(2) {flex-grow: 3;}
        #main div:nth-of-type(3) {flex-grow: 1;}
        #main div:nth-of-type(4) {flex-grow: 1;}
        #main div:nth-of-type(5) {flex-grow: 1;}

10.flex-psiquiatra: número | inicial | herdar (encarna propriedade do layout de elástico "Qu" lado, para que o projeto pode reduzir o tamanho)

Este atributo especifica a taxa de redução do recipiente sobre o item do eixo, o valor padrão é um.
Precisamos prestar especial atenção aos seguintes pontos:

(1) Esta propriedade aplica-se a projecto acima do recipiente.
(2) o tamanho do recipiente sobre o eixo deve ser menor do que o tamanho do projecto, a redução possível.
(3) Um valor de zero indica projectos porção reduzida.
(4) deve ser aplicado ambiente de layout elástica, caso contrário inválido.
(5) Número: O valor padrão é 1, o recipiente para procurar itens com uma relação de outros itens.

código:

        #main {
            width:350px;
            height:100px;
            background:#ccc;
            display:flex;
        }
        #main div {
            flex-shrink:1;
            flex-basis:100px;
        }
        #main div:nth-of-type(2) {flex-shrink:3;}

11 flex-base: número | auto (para o projeto definir um tamanho inicial de referência)

  Quando a flex-base e atributos de largura existem, o atributo não é largura eficaz, a largura da largura do conjunto de cabo flexível para produto-base flexível

(1) número: unidade de comprimento ou a percentagem, um comprimento predeterminado de projecto inicial flex.
(2) auto: valor padrão, um comprimento igual ao comprimento do próprio projeto flexível, se o comprimento do item não for especificado, de acordo com o conteúdo da decisão.

Adicional 1: 1 = flexão

Flex: Flex-grow [] [flex-psiquiatra] [flex-base] | auto | 1
  Esta propriedade é um flex-crescer, flex-encolher escrita composta e propriedade-base flex. O valor do atributo padrão é 0 1 auto. Se o elemento não é um projeto Flex, esta propriedade não funciona. Agindo sobre a criança.

(1) .auto: 1 1 auto com a mesma.
(2) .none: 0 0 auto com a mesma.
(3) 1 0 1 valor padrão auto do mesmo.

Adicional de 2: Compatibilidade cabo flexível de corrente

Nós cabeça direto para uma mesa

, vemos que, flexbox já compatível com todos os navegadores, você pode usar flexbox para mostrar seu extraordinário talento dele!