Jump to content

Typical society in the Telegram - This is the backup site feed forum.losper.net

Mass debate, problem-solving, assistance, support and a wonderful community ...

You can upload files in the Telegram channel and share link on the forum "Typical society."

This method helps to avoid broken links in the future and the loss of files on the site!

Important events on the site, you'll also find in our Telegram channel ...

Share your experiences with others, help, be responsive, friendly and communicate with other users.

Create New...
  • Совершенно свободно и бесплатно, Вы можете создавать свои Статьи, на различную тематику, делится опытом и знаниями с другими участниками и посетителями Типичного социума!
    Выделяйте свои Статьи, тегами и префиксами.
  • Полное руководство по CSS Flex + опыт использования

    Полное руководство по CSS Flex + опыт использования

     Share


    Полное руководство по CSS Flex + опыт использования

     
    f1772f3a4c02a8975d7767f4d19b5e56.gif
     

    Как и CSS Grid, Flex Box довольно сложен, потому что состоит из двух составляющих: контейнера и элементов внутри него.

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

    Это все, на что способен Flex.
    Это все, на что способен Flex.

    Но… давайте рассмотрим каждую диаграмму отдельно. К концу этого руководства по Flex вы узнаете обо всех его возможностях.

    CSS Flex или Flex Box

    Flex — это набор правил для автоматического растягивания нескольких столбцов и строк внутри родительского контейнера.

    display:flex

    В отличие от многих других свойств CSS, в Flex есть основной контейнер и вложенные в него элементы. Некоторые свойства CSS-Flex относятся только к контейнеру. А другие можно применить только к элементам внутри него.

    1d821401866e8cef280a35d97de7a8fe.png
     

    Вы можете думать о flex-элементе как о родительском контейнере со свойством display: flex. Элемент, помещенный в контейнер, называется item. Каждый контейнер имеет границы начала(flex-start) и конца гибкости(flex-end), как показано на этой диаграмме.

    Горизонтальная (main) и вертикальная (cross) оси

    Хотя список элементов представлен линейно, необходимо обращать внимание на строки и столбцы. По этой причине Flex включает в себя координатные оси. Горизонтальная ось называется main-axis, а вертикальная — cross-axis.

    Чтобы управлять шириной содержимого контейнера и промежутками между элементами, которые растягиваются вдоль main-axis, необходимо использовать Justify-content. Для управления вертикальными изменениями элементов необходимо использовать align-items.

    Если у вас есть 3 столбца и 6 элементов, Flex автоматически создаст вторую строку для размещения оставшихся элементов. Если у вас в списке более 6 элементов, будут созданы дополнительные строки.

    ff1b3b8751ebd0a542cb35d3ec308231.png
     

    По умолчанию, элементы Flex равномерно распределяются внутри контейнера по горизонтальной оси. Мы рассмотрим различные свойства и значения.

    Вы можете определять количество столбцов.
    Вы можете определять количество столбцов.

    Распределение строк и столбцов внутри родительского элемента определяется свойствами CSS Flex flex-direction, flex-wrap и некоторыми другими, которые будут продемонстрированы дальше.

    :У нас есть произвольное n-количество элементов, расположенных в контейнере. По умолчанию элементы растягиваются слева направо. Однако направление можно изменить.
    :У нас есть произвольное n-количество элементов, расположенных в контейнере. По умолчанию элементы растягиваются слева направо. Однако направление можно изменить.

    Direction

    Можно задать направление движения элементов (по умолчанию слева направо).

    e941b246c53e96565ef7c20ad7dad546.png
     

    flex-direction: row-reverse изменяет направление движения списка элементов. По умолчанию стоит значение row, что означает движение слева направо.

    Wrap

    f564d51c7ab92822c06a52f725503020.png
     

    flex-wrap: wrap определяет перенос элементов на другую строку, когда в родительском контейнере заканчивается место.

    Flow

    ba6787fe6418db24bddb94e151053708.png
     

    flex-flow включает в себя flex-direction и flex-wrap, что позволяет определять их с помощью одного свойства.

    Примеры:

    • flex-flow: row wrap определяет значения flex-direction как row и flex-wrap как wrap.

    2977db46ebac7f10a7b9a0180fb8110c.png
     
    • flex-flow:row wrap-reverse (перенос элементов вверх)

    59da3b6c7838b2bf728dff27f636a375.png
     
    • flex-flow:row wrap (стандартный перенос элементов); justify-content: space-between (пробел между элементами);

    cc6d6b1b7544c935333d6b9167c3d89e.png
     
    • flex-flow: row-reverse wrap (направление движения справа налево со стандартным переносом сверху вниз)

    d961fae00cabfb1bd8cef70099d45575.png
     
    • flex-flow: row-reverse wrap-reverse (направление движения справа налево и обратный перенос элементов);

    673d63867820a6c9bd669ad229be5ad6.png
     
    • flex-flow: row wrap; justify-content: space-between; (стандартный перенос и направление; расстояние между элементами)

    0a27d79b592d2be3873457e757fe3894.png
     

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

    5994e8ca1ff6339dd223751e38b543cd.png
     

    Когда мы меняем flex-direction на column, свойство flex-flow ведет себя точно так же, как и в предыдущих примерах. За исключением wrap-reverse, когда элементы переносятся снизу вверх.

    59454bee2e3a5481ce928246eae5375e.png
     

    justify-content

    b545cecf100faa8a31af1ec5a60068de.png
     

    Я получил много просьб прояснить приведенный выше пример. Для этого я создал анимацию:

    Анимированные возможности justify-content.
    Анимированные возможности justify-content.

    Надеюсь, эта CSS-анимация поможет лучше понять работу justify content.

    Свойства следующие:flex-direction:row; justify-content: flex-start | flex-end | center | space-between | space-around | stretch | space-evenly. В этом примере мы используем только 3 элемента в строке.

    Нет никаких ограничений на количество элементов, которые можно использовать в Flex. Эти диаграммы демонстрируют только поведение элементов, когда одно из перечисленных значений применяется к свойству justify-content .

    То же свойство justify-content используется для выравнивания элементов, когда flex-direction: column.
    То же свойство justify-content используется для выравнивания элементов, когда flex-direction: column.

    Packing Flex Lines (согласно спецификации Flex)

    e966852b285aaadaa5cac859156c7079.png
     

    Я не уверен, реализовано ли это в каком-либо браузере, но когда-то это было частью спецификации CSS-flex и, вероятно, стоит упомянуть об этом для полноты картины.

    В спецификации Flex это называется «Packing Flex Lines». По сути, это работает так же, как в примерах выше. Однако стоит обратить внимание, что интервал расположен между целыми группами элементов. Это полезно, когда вы хотите создать зазоры между группами.

    Packing Flex Lines, но теперь с flex-direction: column
    Packing Flex Lines, но теперь с flex-direction: column

    align-items

    d14db16f5e18523c881a23486b9ede8f.png
     

    align-items контролирует выравнивание элементов по горизонтали относительно родительского контейнера.

    flex-basis

    55b82ab2dd9b267557e8c02e46e39c6e.png
     

    flex-basis работает аналогично другому свойству CSS: min-width. Оно увеличивает размер элемента в зависимости от содержимого. Если свойство не задействуется, то используется значение по умолчанию.

    flex-grow

    94e50bec2b4cadb65bda0f35e4fbec8c.png
     

    flex-grow применяется к конкретному элементу и масштабирует его относительно суммы размеров всех других элементов в той же строке, которые автоматически корректируются в соответствии с заданным значением свойства. В примере значение flex-grow для элементов было установлено на 1, 7 и (3 и 5) в последней строке.

    flex-shrink

    c38c0e66a43df8f6b84d5a37f8003455.png
     

    flex-shrink — это противоположность flex-grow. В примере значение flex-shrink равно 7. При таком значении размер элемента равен 1/7 размера окружающих его элементов (размер которых автоматически скорректирован).

    cc7094d75ee03959a426af93a8309a8a.png
     

    При работе с отдельными элементами можно использовать только одно свойство из трёх: flex-grow , flex-shrink или flex-base.

    order

    Используя свойство order , можно изменить естественный порядок элементов.

    5bf372ca43fe484dcbfa01feb64a0993.png
     

    justify-items

    62af433526d3b5f0b698bb0113c5f0ac.png
     

    И последнее, что нужно для тех, кто хочет использовать CSS Grid вместе с Flex Box... justify-items в CSS Grid похожи на justify-content в Flex. Свойства, описанные на приведенной выше диаграмме, не будут работать в Flex, но в значительной степени эквивалентны сетке для выравнивания содержимого ячеек.


    AndrewPro
     Share


    User Feedback

    Recommended Comments

    There are no comments to display.



    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.Privacy Policy

Search In
  • More options...
Find results that contain...
Find results in...

Write what you are looking for and press enter or click the search icon to begin your search

-->