CSS - lepszy sposób na ustawienie odległości między elementami Flexbox

Istnieją dwie najczęściej stosowane metody ustawiania odległości między elementami FlexBox, i.mi., użycie właściwości CSS w sprawie uzasadnienia z właściwością kosmiczną i właściwością przestrzenną między. Kiedy "justify-content„Właściwość CSS jest ustawiona na„kosmiczny”, Dodaje miejsce wokół każdego elementu Flexbox elementu HTML. Jednak gdy jego wartość jest ustalona jako „przestrzeń pomiędzy”, Dodaje przestrzeń między elementami elementu HTML.

W tym artykule pokazuje użycie zarówno wartości „przestrzennego”, jak i „przestrzennego” dla „justify-content” w celu dodania przestrzeni między elementami FlexBox.

Jak ustawić odległość między elementami FlexBox?

Składnia do zdefiniowania „justify-content„Aby ustawić przestrzeń i pomiędzy elementami FlexBox, jest następujące:

Justify-Content: Space-Around; Justify-Content: Space-Between;

Warunek: Tworzenie elementów FlexBox

Aby ustawić odległość między elementami FlexBox, najpierw należy utworzyć FlexBox z elementami Flexbox, a następnie zastosować na niej właściwości CSS.

Przykład

Dodajmy element kontenera Div, aby utworzyć główną div, a następnie niektóre elementy Div w nim, aby utworzyć elementy FlexBox:

A
B
C
D

W kodzie snappet dodany powyżej:

• A "div„Element kontenera został dodany z klasą zadeklarowaną jako„przewód".
• Wewnątrz dodaje się cztery kolejne elementy kontenera Div z nazwą klasy zadeklarowaną jako „przedmiot".
• Elementy DIV mają tekst „A”,„B”,„C" I "D„Napisane na nich.

Element stylu CSS będzie zawierał niektóre właściwości, aby uzyskać lepszy wyświetlanie elementów FlexBox:

.przewód

Wyświetlacz: Flex;
Wysokość: 50 VH;
Wyrównanie: Center;

.przedmiot

szerokość: 40px;
Wysokość: 40px;
kolor tła: proszek;
Text-Align: Center;
Wyściółka: 25px;

W powyższym fragmencie kodu dodano następujące właściwości CSS:

• „„wyświetlacz„Własność została zdefiniowana jako„przewód„Aby prawidłowo wyrównać tekst wewnątrz pojemnika Div.
• „„wysokość„Nieruchomość została ustawiona na„50vh„Aby ustawić pionową długość elementu kontenera Div.
• „„Wyrównanie„Własność jest zdefiniowana jako skoncentrowana w celu wyrównania elementu DIV do centrum.
• Po ".przewód„Selektor klasy,„.przedmiot”Dodano selektor klasy, który ma właściwości CSS dla elementów wewnątrz głównego kontenera Div.
• „„szerokość„Własność jest zdefiniowana jako„40px„Aby ustawić poziomy długość każdego z elementów Flexbox.
• „„wysokość„Elementy FlexBox jest ustawione na„40px".
• „„kolor tła„Elementy FlexBox jest zdefiniowane jako„Powderblue".
• „„tekst-align„Centrum zostało zdefiniowane jako„Centrum„Aby wyrównać pisemne alfabety wewnątrz elementów Flexbox do środka.
• „„wyściółka„Własność została zdefiniowana jako„25px„Aby zdefiniować odległość między zawartością a granicą.

Powyższy fragment kodu wygeneruje następujące dane wyjściowe:

Teraz konieczne jest ustawienie odległości między utworzonymi elementami FlexBox.

Metoda 1: Zdefiniuj właściwość „Justify-Content” jako „przestrzeń”

Jedną z metod jest dodanie „Justify-Property”I zdefiniuj to jako„kosmiczny„Aby dodać przestrzenie lub odległość wokół każdego elementu Flexbox:

.przewód

Justify-Content: Space-Around;
…

.przedmiot

…

Powyższy przykład kodu wskazuje, że istnieje dodanie „justify-content„Własność, która została zdefiniowana jako„kosmiczny". Kropki wskazują, że wszystkie właściwości pozostają takie same, jak dodano powyżej w części wstępnej tego postu.

W rezultacie zdefiniowana przestrzeń zostanie dodana wokół elementów FlexBox:

Metoda 2: Zdefiniuj właściwość „Justify-Content” jako „spaceruj”

Inną metodą jest dodanie „Justify-Property”I zdefiniuj to jako„przestrzeń pomiędzy„Aby dodać przestrzenie lub odległość między każdym elementem Flexbox:

.przewód

Justify-Content: Space-Between;
…

.przedmiot

…

Powyższy przykład wskazuje, że istnieje dodanie „justify-content: przestrzeń pomiędzy”I wszystkie właściwości CSS również tutaj pozostają takie same.

Powyższy przykład doda odległość między każdym elementem Flexbox. Jednak nie będzie odległości między lewicą a prawym elementem a pojemnikiem Div, ponieważ dodaje tylko odległość między elementami Flexbox, w przeciwieństwie do „kosmiczny”:

To podsumowuje dwie różne metody ustawiania odległości między elementami FlexBox.

Wniosek

Aby ustawić odległość między elementami FlexBox, dodaj identyfikator lub selektor klas w elemencie stylu CSS odnoszącym się do elementu nadrzędnego, w którym utworzono wszystkie elementy FlexBox, a następnie zdefiniuj „justify-content: przestrzeń pomiędzy„Nieruchomość jako albo”kosmiczny" Lub "przestrzeń pomiędzy". Ten przewodnik na blogu o metodach ustawiania odległości między elementami FlexBox.