기타 FlexBox

O CSS Flexible Box Layout, conhecido como Flexbox, é um modelo de layout da Web CSS3. Está no estágio de recomendação de candidatos (CR) do W3C. O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela (ou dispositivo).

위키백과의 모든 권한은 Wikipedia에서 찾을 수 있으며, 가장 중요한 레이아웃은 다음과 같습니다... FlexBox에서 가장 중요한 레이아웃은 다음과 같이 복잡합니다.

Flexbox의 기능

우리는 단순함을 확신하고 Flexbox의 일반적인 응용 프로그램을 사용하여 문제를 해결할 수 있는 자산을 소유할 수 있습니다. 코모 아심?

<div class="container">
 <h1>Eu sou o filho 1</h1>
 <h2>Eu sou o filho 2</h2>
</div>

Podemos dizer que a nossa div com a classe container é a candidata perfeita para ser display: flex

Propriedades do Flexbox

A partir do momento que definimos um elemento com display: flex , podemos usar as propriedades align-items , justify-content e flex-direction , alem de outras.

플렉스 방향

Por padrão a propriedade flex-direction vem com o valor padrão de row, isso significa que o posicionamento será semper na horizontal. Podemos modifica-lo para flex-direction: column que muda o comportamento para colunas, ou seja, na vertical. Flexbox를 독점하는 것보다 더 많은 영향을 미치기 때문에 flex-direction seja column, align-items 또는 justify-content vão inverter 방향으로.

정렬 항목

A propriedade align-items possui a função de alinhar os filhos na horizontal/vertical e tem como principais valores: center , flex-start e flex-end .

센터 코모 오 프로프리오 노메 디즈, 포시시오나 오스 엘레멘토스 수평/수직 센트로.

flex-start os elementos horizontalmente/verticalmente ao inicio 위치.

flex-end posiciona os elementos horizontalmente/verticalmente no final.

정당화-내용

A propriedade justify-content possui a função de alinhar os filhos na horizontal/vertical e tem como principais valores os mesmo do align-items com a adição de space-between e space-around .

space-between posiciona todos os elementos horizontalmente/verticalmente com o máximo de espaço entre eles

space-around posiciona os elementos horizontalmente/verticalmente com o máximo de espaço ao redor deles.

광장 um exemplo com Flexbox

Vamos는 Dev.to의 기본 탐색을 구성합니다. Com apenas 3 linhas de CSS conseguimos ter o posicionamento idêntico, mostrando o poder do Flex box.

HTML

<nav>
  <div>
    logo
    <input type="search">
  </div>

  <div>
    <button>Write a post</button>
    <span>Icone 1</span>
    <span>Icone 2</span>
    <span>Imagem</span>
  </div>
</nav>

CSS

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Claro, estamos olhando apenas para o posicionamento dos elementos e não para a estilização.

결과