Css свойство flex

Краткий перечень основных возможностей T-FLEX CAD

  • Быстрое и параметрическое 2D-эскизирование;
  • Параметрическое 2D/3D-проектирование с использованием гибридной параметризации, объединяющей преимущества классической параметризации, основанной на элементах построения, и размерной параметризации, основанной на ограничениях и управляющих размерах;
  • Прямое чтение и импорт форматов различных CAD-систем: Siemens NX, CATIA, Creo, Pro/ENGINEER, I-DEAS, SolidWorks, Solid Edge, Autodesk Inventor, AutoCAD, Revit, Parasolid, ACIS, STEP, IGES, JT и др.;
  • Экспорт в форматы других CAD-систем: Parasolid, ACIS, STEP, IGES, JT, PRC, STL, PDF/3D PDF, DWG и др.;
  • Единый формат файлов для 3D-моделей и сборок с различными видами многостраничных чертежей, спецификаций, графиков, баз данных, данных приложений, макросов;
  • Полная ассоциативная связь между 3D-моделью и её чертежом;
  • Полный набор средств подготовки конструкторской документации в соответствии со стандартами ЕСКД, ISO, DIN и ANS, включая модуль автоматического создания отчётов и спецификаций;
  • Средства автоматизации, позволяющие избежать рутинных действий при модификации проекта и оформлении деталировочных чертежей и спецификаций;
  • 3D-моделирование деталей любой сложности (твердотельное, проволочное и поверхностное моделирование);
  • Создание сборочных чертежей и 3D-сборок любой сложности без ограничений на количество деталей и глубину иерархии;
  • Возможность комбинировать методы работы «снизу-вверх» (от детали к сборке) и «сверху-вниз» (от сборки к детали);
  • Работа со ссылочной геометрией с возможностью управлением процессом обновления;
  • Инструменты коллективной работы над проектами;
  • Инструменты по созданию конфигураций 3D-моделей и 3D-сборок;
  • Управление структурой сборки и структурой изделия;
  • Встроенный модуль по созданию замечаний, включая создания замечаний в режиме коллективной работы;
  • Встроенный модуль проверки качества модели по установленным правилам;
  • Инструменты, позволяющие использовать технологии виртуальной реальности (VR) при проектировании изделий;
  • Проектирование деталей из листового металла;
  • Поддержка PMI, включая форматы других CAD-систем;
  • Проектирование коммуникаций (трубопроводов, вентиляционных каналов и др.);
  • Проектирование электрических схем и прокладки кабельных изделий — от построения двумерных схем до размещения 3D-моделей электрических компонентов, создания проводов, кабелей и соединений, укладки в жгуты и генерации полностью интегрированных спецификаций, которые включают в себя как механические, так и электрические детали;
  • Геометрический анализ и измерения 3D-деталей и 3D-сборок;
  • Бесплатный модуль инженерного экспресс-анализа деталей методом конечных элементов;
  • Оптимизация деталей и конструкций, включая КЭ-оптимизацию;
  • Безопасность. Возможность криптозащиты документов, библиотек пользователя, с привязкой к ключу аппаратной защиты;
  • Создание фотореалистичных изображений по технологиям GPU и CPU;
  • Запись анимации сборки/разборки, пользовательских сценариев с фотореалистическим качеством;
  • Мощный API-интерфейс для разработки собственных приложений;
  • Редактор переменных с поддержкой многострочных выражений и подсветкой синтаксиса;
  • Поддержка работы с внутренними и внешними базами данных;
  • Бесплатная библиотека пружин с расчётом;
  • Бесплатная библиотека болтовых соединений с расчётом;
  • Большой набор бесплатных параметрических библиотек стандартных изделий по ГОСТ;
  • Простое и удобное создание параметрических пользовательских библиотек с диалогами управления;
  • Создание и подготовка 3D-моделей для 3D-печати.

Преимущества T-FLEX CAD Есть вопросы? Напишите нам!

Что такое низкий флекс

Вроде бы разобрались, что такое флекс. Но и это еще не все. Пытаясь говорить на одном языке с подростками и демонстрируя, насколько хорошо вам удалось познать молодежный сленг, вы можете столкнуться с очередной трудностью: в кругах тинеджеров также популярно выражение «низкий флекс». И у него тоже есть несколько значений.


Первое из них — это плохо выглядеть, недостаточно стильно, не выигрышно на фоне своих друзей и знакомых. Если слово адресовано конкретному человеку, это значит, что он небогат, одет немногим лучше бездомного, не производит должного впечатления на окружающих.

Низкий флекс — это также танцевальный элемент у рэперов, представляющее собой кружение у пола. И хотя это сложное движение, выполнить которое под силу будет не каждому, в переносном смысле термин приобретает резко негативный оттенок.

Теперь вы знаете, что такое флексить и можете продемонстрировать полученные знания в разговоре с молодым поколением или сверстниками, если вы сами являетесь подростком. 

Свойство align-self

Свойство определяет выравнивание выбранного элемента внутри гибкого контейнера.

Свойство переопределяет выравнивание по умолчанию, установленных контейнеров свойства .

Пример

Выровнить третий гибкий элемент в середине контейнера:

<div class=»flex-container»>   <div>1</div>   <div>2</div>   <div style=»align-self: center»>3</div>   <div>4</div></div>

Пример

Выровнить второй гибкий элемент в верхней части контейнера, и третий гибкий элемент внижнем контейнере:

<div class=»flex-container»>  <div>1</div>   <div style=»align-self: flex-start»>2</div>   <div style=»align-self: flex-end»>3</div>   <div>4</div></div>

Выравнивание flex-элементов

Во Flexbox выравнивание элементов внутри контейнера осуществляется по двум направлениям (осям).

Выравнивание flex-элементов по направлению главной оси

Выравнивание элементов вдоль основной оси осуществляется с помощью CSS свойства :

justify-content: flex-start; 
/* flex-start (flex-элементы выравниваются относительно начала оси) – по умолчанию
   flex-end (flex-элементы выравниваются относительно конца оси)
   center (по центру flex-контейнера)
   space-between (равномерно, т.е. с одинаковым расстоянием между flex-элементами)
   space-around (равномерно, но с добавлением половины пространства перед первым flex-элементом и после последнего) */

Выравнивание flex-элементов вдоль поперечной оси

Выравнивание flex-элементов во flex-контейнере по направлению поперечной оси осуществляется с помощью CSS-свойства :

align-items: stretch;
/* stretch (растягиваются по всей длине линии вдоль направления поперечной оси) – по умолчанию
   flex-start (распологаются относительно начала поперечной оси)
   flex-end (относительно конца поперечной оси)
   baseline (относительно базовой линии)
   center (по центру) */

Выравнивание линий flex-контейнера

CSS Flexbox позволяет выравнивать не только сами flex-элементы, но и линии на которых они расположены.

align-content: stretch
/* stretch (растягиваются по всей длине поперечной оси) – по умолчанию
   flex-start (относительно начала поперечной оси)
   flex-end (относительно конца поперечной оси)
   center (по центру)
   space-between (равномерно, т.е. с одинаковым расстоянием между линиями)
   space-around (равномерно, но с добавлением половины  пространства перед первой линией и после последней) */

Свойство имеет смысл использовать только тогда, когда flex-элементы во flex-контейнере располагаются на нескольких линиях. Чтобы это произошло, необходимо, во-первых, чтобы ширина всех flex-элементов была больше ширины flex-контейнера, а во-вторых flex-контейнер должен иметь в качестве CSS-свойства значение или .

CSS-свойство align-self

Свойство в отличие от предыдущих (, и ) предназначено для flex-элементов. Оно позволяет изменить выравнивание flex-элемента вдоль направления поперечной оси. Свойство может принимать такие же значения как .

align-items: stretch; /* auto (по умолчанию) || stretch || flex-start || flex-end || baseline || center */

Пример:

<div class="flex-container">
  <div class="flex-container_element-1">
    1
  </div>
  <div class="flex-container_element-2">
    2
  </div>
  <div class="flex-container_element-3">
    3
  </div>
  <div class="flex-container_element-4">
    4
  </div>  
</div>

CSS:

.flex-container {
  display: flex;
  width: 300px;
  height: 150px;
  align-items: center;
  padding: 10px;
  background-color: #efefef;
}
.flex-container_element-1,
.flex-container_element-2,
.flex-container_element-3,
.flex-container_element-4 {
  flex-basis: 70px;
  text-align: center;
  padding: 15px;
  font-size: 30px;
} 
.flex-container_element-1 {
  align-self: flex-start;
  background: #fe4;
} 
.flex-container_element-2 {
  align-self: flex-end;
  background: pink;
} 
.flex-container_element-3 {
  align-self: stretch;
  background: lime;
}
.flex-container_element-4 {
  align-self: auto;
  background: cyan;
}  

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

Задача 3

Теперь давай поговорим о том, как сделать вот такой пример:     Его фишка в том, что здесь текст как бы обрамляется вокруг некой фигуры которая здесь предложена. В данном случае этой фигурой является круг.   Во-первых, отрисуем SVG при помощи тегов HTML. Пишем тег , внутри него пишем атрибут со значениями «0 0 100 100». Далее внутри пишет тег с радиусом и координатами , . Создаем тег с атрибутами , , . Внутри него прописываем два пустых div-а с классами и . А также третий div с классом внутри которого будут теги и . Переходим к CSS. Для начала зададим стили :

height: 100vh;
margin: 0;
display: flex;

Зададим стили для svg:

margin: auto;
width: 50%;
max-width: 100%;

Делаем заливку тегу :

fill: red;

Добавляем высоту, ширину и внутренние отступы для класса :

height: 100%;
width: 50px;
shape-margin: 3px;

И теперь поработаем над :

float: left;
shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/circle-left.svg);

По тому же принципу прописываем стили для

float: right;
shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/circle-right.svg);

Дело осталось за малым, нам нужно еще немножко поработать над текстом. Используем класс :

color: #fff;
font-size: 4px;
width: 100px;
height: 100%;
text-align: center;
line-height: 1.6;
hyphens: auto;

Осталось стилизовать теги и :

h1 {
font-size: 7px;
margin-bottom: 5px;
padding-top: 10px;
text-align: center;
}

p { 
margin: 0; 
text-align: justify;
text-align-last: center;
}

Вот таким методом мы смогли сделать так, что бы в нашем круге оказался текст.Что было сделано: Мы создали некую фигуру при помощи HTML-тегов, в данном случае это круг. И далее при помощи свойства мы задали некие ограничивающие линии, которые не позволили нашему тексту расползтись по всему сайту.  Ознакомиться подробнее с HTML и CSS можно тут:  Итоги: Итак, это был первый урок из рубрики «Магия CSS» и сегодня мы поговорили о том, как создать обтекание текста вокруг не стандартных форм.   Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.  Смотреть видео:

Свойства для родительского элемента (Flex-контейнера)

display

Определяет flex-контейнер; строковый или блочный зависит от переданного значения. Включает flex-контекст для всех своих прямых, дочерних элементов.

Обратите внимание, что CSS колонки не влияют на flex-контейнер

flex-direction

Устанавливает основную ось, таким образом определяет направление элементов расположенных в контейнере. Flexbox (помимо опциональной обёртки) представляет собой концепцию однонаправленного макета. Думайте о flex-элементах, прежде всего как горизонтальных строках или вертикальных колонках.

  • row (по умолчанию) —  слева направо в ; справа налево в ;
  • row-reverse — справа налево в  ; слева направо в  ;
  • column — тоже самое что , только сверху вниз;
  • column-reverse — тоже самое что , только снизу вверх;

flex-wrap

По умолчанию, элементы будут пытаться заполнить только одну строк. Вы можете изменить это поведение и позволить элементам переноситься на следующую строку, при необходимости.

  • nowrap (по умолчанию) — все flex-элементы будут расположены на одной строке;
  • wrap — flex-элементы будут расположены на нескольких строках, сверху вниз;
  • wrap-reverse — flex-элементы будут расположены на нескольких строках, снизу вверх;

justify-content

Определяет выравнивание вдоль основной оси. Это помогает распределить свободное пространство, оставшееся после того как все фиксированные и не фиксированные по ширине flex-элементы достигли максимального размера. Оно также помогает осуществлять некоторый контроль над выравниванием элементов, когда они переполняют строку.

flex-start (по умолчанию) — элементы прижимаются к началу строки; flex-end — элементы прижимаются к концу строки; center — элементы располагаются по центру вдоль строки; space-between — элементы размещаются равномерно на линии; первый элемент находится в начале строки, последний элемент находится в конце строки; space-around — элементы размещаются равномерно на линии с одинаковым пространством возле них

Обратите внимание, что визуально пространство не одинаковое, так как у всех элементов одинаковое пространство с обеих сторон. У первого элемента будет одна единица пространства со стороны контейнера, но две единицы между ним и следующим элементом, потому что у следующего элемента также по одной единице с двух сторон.

align-items

Это свойство определяет поведение flex-элементов вдоль поперечной оси на текущей строке. Думайте о нём как о , только для поперечной оси (перпендикулярной основной оси).

  • flex-start — элементы размещаются в начале поперечной оси;
  • flex-end — элементы размещаются в конце поперечной оси;
  • center — элементы располагаются по центру поперечной оси;
  • baseline — элементы выравниваются по базовой линии;
  • stretch (по умолчанию) — растягиваются чтобы заполнить весь контейнер (по-прежнему соблюдают / );

align-content

Примечание. Это свойство не действует, когда есть только одна строка flex-элементов.

  • flex-start — строки располагаются в начале контейнера;
  • flex-end — строки располагаются в конце контейнера;
  • center — строки размещаются по центру контейнера;
  • space-between — строки распределяются равномерно, первая строка располагается в начале контейнера, а последняя строка в конце;
  • space-around — строки распределяются равномерно, с одинаковым расстоянием между ними;
  • stretch (по умолчанию) — строки растягиваются по всей ширине, чтобы занять оставшееся пространство;

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

The align-items Property

The property is used to align the flex items.

In these examples we use a 200 pixels high container, to better demonstrate the property.

Example

The center value aligns the flex items in the middle of the container:

.flex-container {  display: flex;  height: 200px;  align-items: center;}

Example

The flex-start value aligns the flex items at the top of the container:

.flex-container {  display: flex;  height: 200px;  align-items: flex-start;}

Example

The flex-end value aligns the flex items at the bottom of the container:

.flex-container {  display: flex;  height: 200px;  align-items: flex-end;}

Example

The stretch value stretches the flex items to fill the container (this is default):

.flex-container {  display: flex;  height: 200px;  align-items: stretch;}

Example

The baseline value aligns the flex items such as their baselines aligns:

.flex-container {  display: flex;  height: 200px;  align-items: baseline;}

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:

2

Разница между устаревшими подходами и современными стандартами

Теперь, когда у вас есть представление о том, как проблему решали раньше, давайте взглянем, на что способны Flexbox и Grid.

Flexbox и Grid — это идеальные решения для CSS-разметки, являющиеся современными стандартами. Если вам необходимо писать CSS-код на хорошем уровне, то обязательно изучите их.

Решение задачи с помощью Flexbox


Контекст форматирования Flexbox инициализируется путем создания flex-контейнера.

Родительским элементом является . Он содержит боковую панель и основную зону. Создаём контейнер:

И получаем:

Flexbox в действии

Не забудем о пропорциях:

Вуаля! Проблему можно считать решенной:

Задача решена

С Flexbox можно делать много разных вещей:

  • Отцентрировать боковую панель и основную зону по вертикальной оси:

  • Изменить положение одного из дочерних элементов:

  • Менять порядок дочерних элементов без изменения HTML-кода:

И я затронул лишь верхушку айсберга Flexbox.

Flexbox доступен в большинстве поддерживаемых браузеров. Им можно полноценно пользоваться в Firefox с 28 версии, Chrome с 29, Safari с 6.1 и Edge с 12.

Прим. перев. Разобраться с Flexbox поможет наше наглядное введение.

Решение проблемы с помощью Grid

В отличие от Flexbox, который по большей части работает в одном измерении, с CSS Grid вы можете использовать как ряды, так и колонки. Посмотрим, как решить нашу проблему с его помощью.

Начинается всё так же, как и в случае с Flexbox. Создаём контейнер:

Вот весь CSS:

И вот что мы получим:

Первичный вариант

Grid доступен в большинстве поддерживаемых браузеров, хотя и в меньшем количестве. Им можно полноценно пользоваться в Firefox с 52 версии, Chrome с 57, Safari с 10.1 и Edge с 16.

Наше последнее изображение пока никак не отличается от предыдущих. Так в чём же магия?

Что, если мы разделим пропорции ширины, как раньше:

Пропорциональное распределение ширины для дочерних элементов

Да, результат отличается, но нам он не подходит. Боковая панель пока не расположена сбоку от главной зоны.


Вот мы и подошли к сути Grid-разметки. После инициализации Grid-контейнера при помощи необходимо определить ряды и строки внутри него.

Вот как это делается:

Решение в одну строку — красиво, не правда ли? определяет пропорции столбцов в сетке.

Задача решена

Но с помощью Grid можно сделать гораздо больше.

Сначала добавим немного цвета главному блоку, чтобы примеры были более наглядными:

Вот что мы должны получить:

Заливка цветом зоны основного контента

Посмотрим, что хорошего может предложить Grid:

  • Можно определить разрыв между столбцами:

    Вот результат:

    Нет необходимости в добавлении отступов к блокам и : это делает .

  • Можно сделать столько столбцов, сколько вам нужно. Примеры выше использовали только по одному элементу и . Добавим ещё два:

    Grid сам понял, что нам надо — не пришлось даже трогать CSS.

  • Можно определить пробел между строками:

    Для упрощения можно использовать сокращение: вместо и .

  • Можно определять размеры строк:

    Теперь высота первой, второй и третьей строк равна 200, 300 и 400 пикселей соответственно.

Для начала хватит и этого — но это далеко не всё.

The align-self Property

The property specifies the alignment for the selected item inside the flexible container.

The property overrides the default alignment set by the container’s property.

Example

Align the third flex item in the middle of the container:

<div class=»flex-container»>  <div>1</div>  <div>2</div>  <div style=»align-self: center»>3</div>   <div>4</div></div>

Example

Align the second flex item at the top of the container, and the third flex item at the bottom of the container:

<div class=»flex-container»>  <div>1</div>  <div style=»align-self: flex-start»>2</div>   <div style=»align-self: flex-end»>3</div>   <div>4</div></div>

Изменение порядка следования flex-элементов

По умолчанию flex-элементы отображаются во flex-контейнере в том порядке, в котором они расположены в HTML коде. Для изменения порядка следования одних flex-элементов относительно других в CSS Flexbox можно использовать свойство . Данное CSS свойство выстраивает flex-элементы во flex-контейнере в порядке возрастания их номеров.

order: 0; 
/* 
  0 (по умолчанию)
  целое положительное или отрицательное число
*/

Например:

<div class="flex-container">
  <div class="flex-container_element-1">...</div>
  <div class="flex-container_element-2">...</div>
  <div class="flex-container_element-3">...</div>
  <div class="flex-container_element-4">...</div>
</div>
CSS:
.flex-container {
  display: flex;
}
/* переместим 2 flex-элемент в конец */
.flex-container_element-2 {
  order: 2;
} 
/* передвинем 3 элемент до 2 */
.flex-container_element-3 {
  order: 1;
}
/* расположим 4 flex-элемент до 1 */
.flex-container_element-4 {
  order: -1;
}

CSS Flexbox Properties

The following table lists the CSS properties used with flexbox:

Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand property for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container’s align-items property
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties

Дополнительные услуги

Перечень дополнительных услуг
Выезд специалиста на объект абонента 300 руб.
Ремонтные работы 150 руб./час
Изготовление дубликата договора по запросу абонента 90 руб.
Перемонтаж оборудования при смене адреса нахождения клиентского оборудования (при наличии технической возможности) 50% стоимости подключения
Подключение дополнительного компьютера (при наличии технической возможности) 50% стоимости подключения
Повторная настройка программного обеспечения для доступа в ИНТЕРНЕТ (при установленных у абонента ОС и ПП фирмы Microsoft) 300 руб.
Переоформление договора на другое лицо (смена собственника) 350 руб.

Телематические услуги

Перечень телематических услуг
Организация домена в зоне .ru («ваше-имя».ru)
Организация и поддержка в течение первого года 900 руб.
Поддержка в течение последующих лет 900 руб./год
Поддержка первичной зоны DNS (для «ваше-имя».ru)
Организация 600 руб.
Поддержка 300 руб./мес.
Поддержка вторичной зоны DNS (для «ваше-имя».ru)
Организация бесплатно
Поддержка
Организация домена в зоне noginsk.ru, flex.ru (для «ваше-имя».*.ru)
Организация 600 руб.
Поддержка 60 руб./мес.
Регистрация почтового ящика 84 руб.
Поддержка почтового ящика 84 руб./мес.
Для абонентов ООО «ФЛЕКС» регистрация и поддержка первого почтового ящика осуществляется бесплатно

С этим читают