Главная » Ответы

Вот свойства контейнера Flex-Box

На чтение 11 мин. Просмотров 36 Опубликовано

Свойства Flex-контейнера подразделяются на шесть категорий:…

  1. Направление флекса
  2. Обертывание флекса
  3. Flex Flow
  4. Обосновать содержимое
  5. Выровнять элемент
  6. Выравнивание Содержание

1. Направление флекса

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

Направление может быть либо необработанным, либо столбцом.

HTML ДОКУМЕНТ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
       <div id="one">item One</div>
       <div id="two">item two</div>
       <div id="three">item Three</div>
       <div id="four">item Four</div>
    </div> 
</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

НАПРАВЛЕНИЕ КОЛОНКИ ДОКУМЕНТА CSS

/*parent container */
.container {
    display: flex;
    flex-direction:column;
    border: 2px solid black;
    padding: 80px ;
    gap: 20px;
    /*child elements*/
}
#one , #two , #three , #four {
    height: 15vh;
    width: 10vw;
    border: 2px solid black;
    text-align: center;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

CSS DOUMENT RAW НАПРАВЛЕНИЕ 

/*parent container */
.container {
    display: flex;
    flex-direction: row;
    border: 2px solid black;
    padding: 80px 80px 80px 80px;
    gap: 20px;
    /*child elements*/
}
#one , #two , #three , #four {
    height: 15vh;
    width: 8vw;
    border: 2px solid black;
    text-align: center;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

2. Гибкое обертывание

Эта функция задает элементы, которые нужно обернуть при изменении размеров браузера или веб-страницы. Обычно она используется для настройки дочерних элементов и обычно применяется к родительскому элементу.

Flex Wrap имеет три значения flex no-wrap, Flex Wrap и Wrap -Reverse.

HTML ДОКУМЕНТ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>Angela </div>
        <div>Tom</div>
        <div>Mary</div>
        <div> John</div>
    </div>

</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT FLEX WRAP :NO-WRAP

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

/* Parent Elements*/
.container {
    display: flex;
    flex-wrap: nowrap;
    background-color: rgb(2, 192, 182);
    padding: 80px 80px 80px 80px;
    Gap: 20px;
}
/*Child Elements*/
.container> div {
    Padding: 2vh 2vw 2vh 2vw;
    background-color: rgb(11, 84,186);
    color: white;
}
Войти в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT FLEX WRAP :WRAP

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

/* Parent Elements*/
.container {
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(2, 192, 182);
    padding: 80px 80px 80px 80px;
    gap: 20px;
}
/*Child Elements*/
.container> div {
    padding: 2vh 2vw 2vh 2vw;
    background-color: rgb(11, 84,186);
    color: white;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

CSS FLEXWRAP REVERSE : ОБЕРНУТЬ В ОБРАТНУЮ СТОРОНУ

/* Parent Elemnts*/
.container {
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: rgb(2, 192, 182);
    padding: 80px 80px 80px 80px;
    gap: 20px;
}
/*Child Elements*/
.container> div {
    padding: 2vh 2vw 2vh 2vw;
    background-color: rgb(11, 84,186);
    color: white;
}
Войти в полноэкранный режим Выход из полноэкранного режима

3.Flex-Flow

Среди свойств Flex-контейнера есть flex- flow как для flex direction, так и для flex wrap. Однако, если элементы не являются гибкими, то свойство flex flow не будет действовать.

ГИБКИЙ ПОТОК CSS-ДОКУМЕНТА

/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;
Вход в полноэкранный режим Выход из полноэкранного режима

4.Flex Justify Content

Это свойство используется для выравнивания элементов вдоль главной оси. Существует два типа Flex-Justify Content.

— Raw Justify Content (Выравнивает элементы вдоль горизонтальной оси)

— Column Justify Content (Выравнивает элементы вдоль вертикальной оси).

Далее они подразделяются на пять значений:-

Justify Content : Flex- Start
Justify Content : Центр
Обосновать содержание : Flex-End
Уточнить содержание : Flex-Around
Уточнить содержимое: Пространство между

HTML ДОКУМЕНТ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Flex Justify Content </title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>Tomato </div>
        <div>Potatoes </div>
        <div>Onions</div>
        <div>Mango</div>
    </div>
</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Обосновать — содержание : Выравнивание начала

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

/*Parent Element */
.container {
    display: flex;
    justify-content: flex-start;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Вход в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Justify Content: По центру

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

/*Parent Element */
.container {
    display: flex;
    justify-content: center;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Войти в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Justify Content : Flex -End

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

/*Parent Element */
.container {
    display: flex;
    justify-content: flex-end;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Войти в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Justify Content :Space — Around

В этом виде пространство создается между и после строк.

/*Parent Element */
.container {
    display: flex;
    justify-content: space-around;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

CSS DOCUMENT Flex content :Space -Between

Здесь между элементами создается пространство.
Поскольку мы разобрались с выравниванием элементов по главной оси, давайте рассмотрим позиционирование по поперечной оси. Это включает в себя выравнивание элементов и выравнивание содержимого.

5.Выравнивание элементов

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

При выравнивании элементов во флекс-боксе есть пять значений, которые необходимо учитывать.

Align Items :Flex-Start
Выравнивание элементов :Flex-End
Align Items : Centre
Align Items : Base-Line
Выравнивание элементов : Растянуть

N/B: Во всех приведенных ниже примерах я буду использовать направление строки, которое используется по умолчанию.

HTML ДОКУМЕНТ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Flex Justify Content </title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>Tomato </div>
        <div>Potatoes </div>
        <div>Onions</div>
    </div>
</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Выравнивание элементов : Flex — Start

Здесь элементы располагаются в верхней части контейнера.

/*Parent Element */
.container {
    display: flex;
    align-items: flex-start;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Войти в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Выравнивание элементов : Flex-End

Здесь элементы выравниваются по нижней части родительского контейнера.

/*Parent Element */
.container {
    display: flex;
    align-items: flex-end;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Войти в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Выравнивание элементов : Центр

Эти элементы выравниваются по центру родительского контейнера

/*Parent Element */
.container {
    display: flex;
    align-items: center;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

CSS DOCUMENT Выравнивание элементов : По базовой линии

Здесь элементы располагаются по базовой оси. Это не зависит от размера элементов

/*Parent Element */
.container {
    display: flex;
    align-items: baseline;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

CSS DOCUMENT Выравнивание элементов :Растянуть

Растягивает контейнер для элементов, чтобы заполнить контейнер.

/*Parent Element */
.container {
    display: flex;
    align-items: stretch;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
    height: 70vh;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

6.Выравнивание содержимого

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

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

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

Он принимает следующие значения:-
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: пространство вокруг
выравнивание-контент: растянуть

HTML ДОКУМЕНТ 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div> Flex Item 1</div>
    <div> Flex Item 2</div>
    <div> Flex Item 3</div>
    <div> Flex Item 4</div>

  </div> 
</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

N/B Все мои примеры по умолчанию направлены в строку.

CSS DOCUMENT Выравнивание содержимого : Flex-Start

Выравнивает гибкие линии поверх родительского контейнера

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Вход в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Выравнивание содержимого :Flex -End

Выравнивает гибкие линии по нижней части контейнера.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Войти в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Align Content :Flex -Centre
Выравнивает гибкие линии по центру родительского контейнера.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Войти в полноэкранный режим Выйти из полноэкранного режима

CSS DOCUMENT Align Content :Space -Between

Пространство между гибкими линиями

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Войти в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Align Content : Space- Around

Гибкие линии с пробелами вокруг них

.

container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Войти в полноэкранный режим Выход из полноэкранного режима

CSS DOCUMENT Выравнивание содержимого :Растянуть
Гибкие линии растягиваются, чтобы заполнить контейнер.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
Войти в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий