Oħloq Tqassim Flexbox Perfetta

Viżwalizza, ippersonalizza, u ġġenera kodiċi flexbox CSS bl-interface intuwittiv tagħna drag-and-drop.

Propjetajiet tal-Kontenitur

display

flex-direction

flex-wrap

justify-content

align-items

align-content

Propjetajiet ta' l-Item

Items

3 items

Item Magħżul

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

Kodiċi CSS iġġenerat

Presets Flexbox Popolari

Iċċentra Orizzontalment

Content

Perfetta għall-iċċentrar ta 'logo, buttuna, jew kwalunkwe element kemm orizzontalment kif ukoll vertikalment.

Spazjar Ugwali

Item 1

Item 2

Item 3

Oħloq spazjar ugwali bejn l-elementi bi spazju bejn jew spazju-madwar.

Menu Vertikali

Home

About

Contact

Ibni menu tan-navigazzjoni vertikali bi spazjar u allinjament konsistenti.

Grilja li tirrispondi

Box 1

Box 2

Box 3

Box 4

Box 5

Oħloq tqassim tal-grilja li jirrispondi li jgeżwer l-items ibbażati fuq l-ispazju disponibbli.

Banner tal-Eroj

Titolu Prinċipali

Taqsima tal-eroj b'sejħa għall-azzjoni

Iddisinja banner tal-eroj b'titlu, sottotitolu, u buttuna sejħa għall-azzjoni.

Tqassim tal-qiegħ il-paġna

Company

About Us

Careers

Support

Ċentru ta' Għajnuna

Ikkuntattjana

Ibni footer li jirrispondi b'kolonni li jinġabru fuq skrins iżgħar.

Eżempji tad-Dinja Reali

Bar tan-Navigazzjoni

Logo

Home

Products

About

Contact

Tqassim komuni tal-bar tan-navigazzjoni bil-logo fuq ix-xellug, oġġetti tal-menu fiċ-ċentru, u ikona tal-karrettun fuq il-lemin.

Card Grid

Titolu tal-Karta

Test ta 'deskrizzjoni tal-karta hawn

Titolu tal-Karta

Test ta 'deskrizzjoni tal-karta hawn

Titolu tal-Karta

Test ta 'deskrizzjoni tal-karta hawn

Grilja tal-biljett li tirrispondi li tadatta għal daqsijiet differenti tal-iskrin bl-użu ta 'proprjetajiet flexbox.

Tqassim tal-Artiklu

Titolu tal-Artikolu

Posted fuq Jannar 1, 2023 · 5 min moqri

Kontenut tal-artiklu hawn. Dan jista 'jkun sommarju qasir jew it-test sħiħ tal-artiklu. Flexbox jgħin biex jallinja l-immaġni u t-test b'mod viżwalment attraenti.

Tqassim ta 'artiklu komuni b'immaġni fuq ix-xellug u kontenut ta' test fuq il-lemin, f'munzelli fuq apparat mobbli.

Tqassim tad-Dashboard

Header

Sidebar

Kontenut Prinċipali

Footer

Tqassim tad-daxxbord bl-intestazzjoni, l-istrixxa tal-ġenb, iż-żona tal-kontenut ewlenija, u l-footer li jużaw flexbox kemm għall-allinjament orizzontali kif ukoll vertikali.

Fundamentali ta 'Flexbox

X'inhu Flexbox?

Flexible Box Layout, komunement magħruf bħala Flexbox, huwa mudell ta 'tqassim CSS3 li jipprovdi mod effiċjenti biex tqassam u tallinja l-ispazju fost l-oġġetti f'kontenitur, anke meta d-daqs tagħhom huwa mhux magħruf jew dinamiku.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

Kunċetti ewlenin:Flexbox jintroduċi żewġ kunċetti ewlenin: il-kontenitur flex and the Oġġetti flessibbli. Il-kontenitur huwa l-element ġenitur, u l-oġġetti huma t-tfal diretti tiegħu.

Assi Prinċipali vs Assi Trasversali

It-tqassim tal-Flexbox huma bbażati fuq żewġ assi: il-main axis and the assi trasversali.

L-Assi Ewlieni:L-assi primarju li matulu jitqiegħdu l-oġġetti flex. Definit minnflex-direction.
L-assi trasversali:L-assi perpendikulari għall-assi ewlieni. Id-direzzjoni tagħha tiddependi fuq id-direzzjoni tal-assi ewlieni.

L-Assi Prinċipali →

← Assi Trasversali

Start

Main

End

Propjetajiet tal-Kontenitur

Property	Description
`display`	Jiddefinixxi kontenitur flessibbli; inline jew blokka skont il-valur mogħti.
`flex-direction`	Jistabbilixxi l-assi ewlieni, u b'hekk jiddefinixxi d-direzzjoni li l-oġġetti flex jitqiegħdu fil-kontenitur flex.
`flex-wrap`	B'default, l-oġġetti flex kollha jippruvaw joqogħdu fuq linja waħda. Tista' tbiddel dan u tħalli l-oġġetti jitgeżwer kif meħtieġ b'din il-proprjetà.
`justify-content`	Allinja l-oġġetti flex tul l-assi prinċipali tal-linja kurrenti tal-kontenitur flex.
`align-items`	Allinja l-oġġetti flex tul l-assi trasversali tal-linja kurrenti tal-kontenitur flex.
`align-content`	Allinja l-linji ta 'kontenitur flex ġewwa meta jkun hemm spazju żejjed fl-assi trasversali.

Propjetajiet ta' l-Item

Property	Description
`order`	B'mod awtomatiku, l-oġġetti flessibbli huma stabbiliti fl-ordni tas-sors. Madankollu, il-`order`Il-proprjetà tikkontrolla l-ordni li fiha jidhru fil-kontenitur flex.
`flex-grow`	Jiddefinixxi l-abbiltà għal oġġett flex li jikber jekk meħtieġ. Jaċċetta valur mingħajr unità li jservi bħala proporzjon.
`flex-shrink`	Jiddefinixxi l-abbiltà għal oġġett flex li jinxtorob jekk meħtieġ.
`flex-basis`	Jiddefinixxi d-daqs inizjali ta' oġġett flex qabel ma kwalunkwe spazju disponibbli jitqassam skont il-fatturi flex.
`align-self`	Jippermetti l-allinjament default (jew dak speċifikat minn`align-items`) li għandha tinqabeż għal oġġetti flessibbli individwali.

Related Tools

Oħloq Tqassim Flexbox Perfetta

Viżwalizza, ippersonalizza, u ġġenera kodiċi flexbox CSS bl-interface intuwittiv tagħna drag-and-drop.

Stylus li konvertitur CSS

Ittrasforma l-kodiċi SCSS tiegħek f'CSS. Mgħaġġel, faċli, u sigur.

SCSS li konvertitur CSS

Ittrasforma l-kodiċi SCSS tiegħek f'CSS. Mgħaġġel, faċli, u sigur.

Konvertitur tal-Unità tat-Temperatura

Ikkonverti bejn unitajiet differenti ta 'temperatura bi preċiżjoni għall-bżonnijiet xjentifiċi u ta' kuljum tiegħek

Kalkulatur tas-CPM

Ikkalkula l-Ispiża Per Mille (CPM) għall-kampanji ta 'reklamar tiegħek bil-kalkulatur faċli biex tużah tagħna.

SHA3-384 Kalkulatur tal-Hash

Iġġenera hashes SHA3-384 malajr u faċilment