Всякий раз, когда мы создаем какой-либо макет, он должен быть создан таким образом, чтобы он подходил и реагировал на все размеры экрана. Мы используем Float, table, positioning и inline-block для обработки макетов в Интернете.
Однако гибкий макет имеет все эти функции и очень хорошо справляется с дизайном макета.
Зачем использовать макет Flex?
Макет Flex обрабатывает ширину и высоту элемента в соответствии с его размером в контейнере по отношению к разным размерам экрана.
Некоторые свойства flexbox применяются к его родительскому элементу, называемому flex container, а некоторые - к его дочернему элементу, который называется flex element. Гибкий контейнер растягивает свой элемент, чтобы заполнить свободное пространство, или сжимает его, чтобы предотвратить переполнение контейнера.
Создание гибкого контейнера
Запустите эту команду в интерфейсе командной строки, чтобы использовать гибкий макет: npm install @ angular / flex-layout -save
импортировать FlexLayoutModule в модуль приложения
src/app.module.ts
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { FlexLayoutModule } from ‘@angular/flex-layout’;
import { AppComponent } from ‘./app.component’;
@NgModule({
imports: [ BrowserModule, FlexLayoutModule ],
declarations: [ AppComponent ],
})
export class AppModule { }
app.component.html
<ul class=”container”> <li class=”odd-item”>item 1</li> <li class=”even-item”>item 2</li> <li class=”odd-item”>item 3</li> <li class=”even-item”>item 4</li> <li class=”odd-item”>item 5</li> <li class=”even-item”>item 6</li> </ul>
app.component.css
.container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: space-around;
flex-direction:row-reverse;
}
li {
width: 100px;
line-height: 150px;
height: 150px;
text-align: center;
font-weight: bold;
}
.even-item {
background: rgb(18, 102, 60);
}
.odd-item {
background: rgb(39, 108, 165);
}
Использование родительских контейнеров
fxLayout
Это используется для размещения гибкого элемента в контейнере по порядку. Есть 5 возможных значений для размещения гибкого элемента в гибком контейнере.
Свойство flex-direction используется для стилизации CSS.
Вот пример:
.container {
flex-direction: row /* all the item will show in a single row. */ |
: column /* each flex item will show in a single column */ |
: row-reverse /* all flex item will show opposite direction of
flex-direction:row. */ |
: column-reverse /* all flex item will show opposite direction
Of flex-direction:column. */ |
:row-wrap /* if the item doesn’t fit inside container
then item overwrap to the next line. */
}
Flex-wrap
Это свойство управляет гибким контейнером и используется для обертывания гибкого элемента в одну или несколько строк. Flex-wrap может иметь разные значения.
Например:
.container {
Flex-wrap : nowrap /* all flex items will be in one line. */ |
: wrap /* flex items will show in multiple line according
to their width from top to bottom. */ |
: wrap-reverse /* flex items will shows in multiples line from
bottom to top.*/
}
Flex Flow - сокращение от Flex-direction и Flex-wrap
- flex-flow: row - это значение по умолчанию. Предметы размещаются в одну линию и не ломаются.
- flex-flow: column wrap - элементы помещаются в столбец, а разрывы используются по мере необходимости.
Выравнивание содержания - выравнивание элементов главной оси
justify-content: flex-start | flex-end | center | space-between | space-around
.container {
justify-content: flex-start | flex-end | space-evenly | space-between | space-around | center;
}
Align-items - выравнивание поперечной оси
.container {
align-items: stretch /* flex item will stretch from cross-start to
cross-end. */ |
flex-start /* flex item are placed toward the cross-start
of the line. */ |
flex-end /* flex-item are placed toward the cross-end of
the line. */ |
center /* flex items are in the center */
}
Выровнять содержание
Когда у гибкого контейнера несколько строк, мы используем это свойство align-content. Он определяет выравнивание каждой строки в контейнере.
.container {
align-content: flex-start /* all lines are placed at the start of the
container. */ |
flex-end /* all lines are placed at the end of the
container. */ |
center /* all lines are placed in the center of the
container. */ |
space-between /* extra space distributed evenly among the
lines in the container.. */ |
space-around /* extra space distributed between the line
evenly with the equal space. */ |
stretch /* used to stretch the line to fill the free space
*/
}
Свойства дочерних элементов (гибкие элементы)
1) Заказ
Свойство Order используется для размещения гибкого элемента внутри контейнера в порядке возрастания или убывания. Стоимость заказа может быть отрицательной или указана пользователем.
Вот пример на Css:
.child-item { order:<integer>;/*default is 0 */ }
2) Самостоятельное выравнивание
Это дочернее свойство применяется к одному целевому гибкому элементу, а также используется для выравнивания поперечной оси. Вот пример:
.even-item {
align-self: stretch | center | flex-start | flex-end | baseline | initial | inherit;
}
3) Гибкий рост
Это дочернее свойство используется для увеличения гибкого элемента, чтобы заполнить свободное пространство в контейнере.
Примечание. Это значение может быть только положительным.
4) Гибкая усадка
Это используется для сжатия гибкого элемента, чтобы при необходимости предотвратить переполнение. Вот как это выглядит в действии:
Css: flex-item {
flex-shrink: <number>; /* default 1 */
}
5) Flex-основа
Это дочернее свойство используется для указания размера в зависимости от его содержимого или от заданных значений высоты и ширины. Например:
Css: flex-item {
flex-basis: <length> | auto; /* default auto */
}
6) Гибкость
Flex - это сокращенное свойство для сочетания flex-shrink, flex-grow и flex-base.
‘0’, ‘1’ и ‘auto’ - значения гибкости по умолчанию. Во флексе второе и третье значение необязательно:
.flex-tem {
Flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’>]
}
Надеюсь, это вам помогло. Спасибо за прочтение!
Многие разработчики пытаются понять, как изучение Flutter, React Native и Native может помочь им улучшить свои навыки разработки. В нашем посте ниже мы обсудим, что делает каждый из этих фреймворков таким эффективным.
Автор - Ниша Чаухан, DLT Labs ™
Об авторе: Ниша - инженер-программист в DLT Labs и часть нашей команды DL Certify, работающей над внешним и внутренним интерфейсом. Она владеет angular js, node js, PSQL, java-скриптами.
Использованная литература:
