НАЧАЛО
Թարմացվել է 11.03.2024

Доси:

CSS-FLEX

Приблизительное чтение: 5 минут 0 просмотров

align-content

align-content — гибкий контейнер (display: flex;) устанавливает положение содержимого гибкого контейнера по вертикали (содержимое гибкого контейнера установит горизонтальное положение justify-content свойство).

Краткая информация:

Նախասահմանված արժեքը  stretch
Ժառանգվում ենНет
Կիրառվում ենС контейнером типа Flex.
Ենթարկվում է անիմացիայիНет

Значения следующие:

Արժեքը Դիրքը Предыдущий

flex-start
Содержимое сортируется по порядку, начиная с верхнего левого угла контейнера.

center
Содержимое располагается по порядку, начиная с середины контейнера. Изображение отличается, чтобы показать разницу между свойствами align-content и align-items.

flex-end
Содержимое перемещается на дно контейнера.

space-betweent
Содержимое разделено на две части и расположено вверху и внизу контейнера.

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

space-evenly
Содержимое разделено на две части и расположено в контейнере так, чтобы над первой строкой и под последней строкой было одинаковое пустое пространство, а пустое пространство между двумя строками было равно им.

stretch
Содержимое равномерно покрывает всю высоту контейнера.
 
				
					.conteiner-01 {
   display: flex;   /* կոնտեյները դարձնում է flex տեսակի */
   align-content: stretch;
   flex-wrap: wrap;   /* թույլ է տալիս, որ flex-ները հաջորդ տող անցնեն։ */
   width: 450px;
   height: 360px; 
   float: left;
   margin-right: 40px;
   border: 2px solid black;
   background: orange;
 }
 .conteiner-02 {
   display: flex;
   align-content: space-evenly;
   flex-wrap: wrap;
   width: 450px;
   height: 360px;
   float: left;
   border: 2px solid black;
   background: orange;
 }
 .conteiner-01 div {
   width: 100px;
   border: 2px solid black;
 }
 .conteiner-02 div {
   width: 100px;
   height: 100px;
   border: 2px solid black;
 }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
      
    <div class="conteiner-01">
      <div class="red" style="background: red"></div>
      <div class="blue" style="background: blue"></div>
      <div class="green" style="background: green"></div>
      <div class="brown" style="background: brown"></div>
      <div class="red" style="background: red"></div>
      <div class="blue" style="background: blue"></div>
      <div class="green" style="background: green"></div>
      <div class="brown" style="background: brown"></div>
    </div>
    
    <div class="conteiner-02">
      <div class="red" style="background: red"></div>
      <div class="blue" style="background: blue"></div>
      <div class="green" style="background: green"></div>
      <div class="brown" style="background: brown"></div>
      <div class="red" style="background: red"></div>
      <div class="blue" style="background: blue"></div>
      <div class="green" style="background: green"></div>
      <div class="brown" style="background: brown"></div>
    </div>
    
  </body>
</html>

align-items

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

Если:  align-contentпринимается в случае Содержимое flex-контейнера, align-items -ը каждый элемент позиционируется отдельно в соответствии с его размером. 

Сравните два объекта недвижимости, чтобы увидеть разницу center ценности.

Краткая информация:

Նախասահմանված արժեքը  stretch
Ժառանգվում ենНет
Կիրառվում ենС контейнером типа Flex.
Ենթարկվում է անիմացիայիНет

Значения следующие:

Արժեքը Դիրքը Предыдущий

flex-start
flex-элементы расположены в верхней части гибкого контейнера.

center
Каждый гибкий элемент расположен в середине гибкого контейнера.

flex-end
flex-элементы расположены в нижней части гибкого контейнера.

stretch
Гибкие элементы расположены по всей высоте гибкого контейнера.

baseline
first-baseline
last-baseline

flex-элементы располагаются в flex-контейнере в соответствии с базовой линией указанной линии (вертикальное выравнивание). Каждый элемент располагается в направлении своей первой или последней базовой линии.
 
				
					.conteiner-01 {
   display: flex;
   align-items: center;
   width: 450px;
   height: 360px;
   float: left;
   margin-right: 40px;
   border: 2px solid black;
   background: orange;
 }
 .conteiner-02 {
   display: flex;
   align-items: baseline;
   width: 450px;
   height: 360px;
   float: left;
   border: 2px solid black;
   background: orange;
 }
 .conteiner-01 div {
   width: 100px;
   border: 2px solid black;
 }
 .conteiner-02 div {
   width: 100px;
   height: 100px;
   border: 2px solid black;
 }
				
			
				
					<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HAYTI</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="conteiner-01">
    <div class="red" style=" width: 100px; height: 200px; border: 2px solid black; background: red;"></div>
    <div class="blue" style=" width: 100px; height: 250px; border: 2px solid black; background: blue;"></div>
    <div class="green" style=" width: 100px; height: 100px; border: 2px solid black; background: green;"></div>
    <div class="brown" style=" width: 100px; height: 360px; border: 2px solid black; background: brown;"></div>
  </div>
  <div class="conteiner-02">
    <div class="red" style=" width: 100px; height: 200px; border: 2px solid black; background: red;"><span style=" font-size: 30px; color: white; ">привет</span></div>
    <div class="blue" style=" width: 100px; height: 250px; border: 2px solid black; background: blue;"><span style=" font-size: 40px; color: white; ">привет</span></div>
    <div class="green" style=" width: 100px; height: 100px; border: 2px solid black; background: green;"><span style=" font-size: 15px; color: white; ">привет</span></div>
    <div class="brown" style=" width: 100px; height: 337px; border: 2px solid black; background: brown;"><span style=" font-size: 20px; color: white; ">привет</span></div>
  </div>
</body>
</html>

align-self

align-self – устанавливает положение гибкого элемента по вертикали в гибком контейнере. 

Работает align-itemsнравиться align-itemsзаданы общие элементы (определенные в гибком контейнере) и align-selfиз одного элемента(определено в гибком элементе). 


Краткая информация:

Նախասահմանված արժեքը  auto
Ժառանգվում ենНет
Կիրառվում ենС элементами типа Flex.
Ենթարկվում է անիմացիայիНет

Значения следующие:
auto – установит родительский элемент  align-itemsЗначение если родителя нет, он будет определять stretch ценить.
flex-start – flex-элемент располагается над flex-контейнером.
flex-end – гибкий элемент расположен в нижней части гибкого контейнера.
center – flex-элемент расположен в середине flex-контейнера.
baseline – гибкий элемент позиционируется на основе базовой линии гибкого контейнера.
stretch – гибкий элемент расположен по всей высоте гибкого контейнера.

				
					  .conteiner-01 {
    display: flex;
    align-items: center;
    width: 450px;
    height: 360px;
    float: left;
    margin-right: 40px;
    border: 2px solid black;
    background: orange;
  }
  .conteiner-01 div {
    width: 100px;
    border: 2px solid black;
  }
  .green {
    align-self: start;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
    <style data-no-auto-translation=""></style>
  </head>
  <body>
    <div class="conteiner-01">
        <div class="red" style=" width: 100px; height: 200px; border: 2px solid black; background: red;"></div>
        <div class="blue" style=" width: 100px; height: 250px; border: 2px solid black; background: blue;"></div>
        <div class="green" style=" width: 100px; height: 100px; border: 2px solid black; background: green;"></div>
        <div class="brown" style=" width: 100px; height: 300px; border: 2px solid black; background: brown;"></div>
    </div>
  </body>
</html>

flex-grow

flex-grow — определяет, сколько свободного места может занимать flex-элемент по сравнению с другими flex-элементами в контейнере.

Краткая информация:

Նախասահմանված արժեքը  0
Ժառանգվում ենНет
Կիրառվում ենС элементами типа Flex.
Ենթարկվում է անիմացիայիДа

Значение представляет собой целое число или дробное число. 

Отрицательное значение аннулируется.

Если 0, то элемент либо уже определен с определенным размером, либо размер будет определяться его содержимым.

 

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

Например, если пять элементов шириной 100 пикселей каждый находятся в гибком контейнере шириной 1000 пикселей, их пространство будет 500 пикселей, а оставшиеся 500 пикселей будут свободными. Если для каждого элемента установлено значение: flex-grow: 1, свободное пространство будет разделено на пять элементов поровну.

Если установлено первое из пяти элементов flex-grow: 4, и остальное  flex-grow: 1, как результат flex-growОбщая стоимость будет равна 8(4+1+1+1+1)и свободное пространство в 500 пикселей будет разделено. 8  часть(500 / 8  = 62.5px), որով каждый будет определен дополнительно 62.5px ширина и первый 62.5×4=250px.

Если определен только один элемент flex-grow собственности, все свободное пространство будет занято только им.

				
					.flex-container {
   display: flex;
   flex-direction: row;
   width: 1000px;
   height: 300px;
   background: black;
   color: white;
   font-size: 45px;
   padding: 10px;
 }
 .flex-item {
   display: flex;
   /*  բոլոր flex էլեմենտները դառնում են  flex կոնտեյներներ, ուստի դրա պարունակության համար կարող ենք օգտագործել  align-items և justify-content հատկությունները, որոնց միջոցով էլեմենտների տեքստերը տեղադրվել են մեջտեղում։ */
   align-items: center;
   justify-content: center;
 }
 .one {
   background: #a74f4d;
   width: 100px;
   flex-grow: 4;
 }
 .two {
   background: #4c5dbb;
   width: 100px;
   flex-grow: 2;
 }
 .three {
   background: #7a9d59;
   width: 100px;
   flex-grow: 1;
 }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item one">Первый</div>
      <div class="flex-item two">Во-вторых</div>
      <div class="flex-item three">Третий</div>
    </div>
  </body>
</html>

flex-shrink

flex-shrink – определяет, насколько сильно сжимать flex-элемент по сравнению с остальными flex-элементами в контейнере.

Краткая информация:

Նախասահմանված արժեքը  1
Ժառանգվում ենНет
Կիրառվում ենС элементами типа Flex.
Ենթարկվում է անիմացիայիДа

Значение представляет собой целое число или дробное число. 

Отрицательное значение аннулируется.

В случае 0  flex-shrink функция становится неактивной. В случае 1 гибкие элементы сжимаются одинаково.

В примере каждый из flex-элементов равен 200px, а общая высота flex-контейнера равна 400px. Если для них не установлено flex-shrink. Значение 1, тогда элементы выйдут за пределы flex-контейнера.

				
					.flex-container {
   display: flex;
   flex-direction: column;
   width: 1100px;
   height: 400px;
   background: black;
   color: white;
   font-size: 40px;
   padding: 10px;
 }
 .flex-item {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .one {
   background: #a74f4d;
   height: 200px;
   flex-shrink: 1;
 }
 .two {
   background: #4c5dbb;
   height: 200px;
   flex-shrink: 1;
 }
 .three {
   background: #7a9d59;
   height: 200px;
   flex-shrink: 2;
 }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item one">Первый</div>
      <div class="flex-item two">Во-вторых</div>
      <div class="flex-item three">Третий</div>
    </div>
  </body>
</html>

flex-basis

flex-basis – устанавливает ширину или высоту гибкого элемента. 

Если: flex-directionравно rowof , устанавливает ширину гибкого элемента, если она равна column- определяет высоту.

Краткая информация:

Նախասահմանված արժեքը  auto
Ժառանգվում ենНет
Կիրառվում ենС элементами типа Flex.
Ենթարկվում է անիմացիայիДа

Значения следующие:

auto – ширина или высота устанавливается автоматически в зависимости от содержимого flex-элемента.

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

				
					.flex-container {
   display: flex;
   flex-direction: column;
   width: 1100px;
   height: 400px;
   background: black;
   color: white;
   font-size: 40px;
   padding: 10px;
 }
 .flex-item {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .one {
   background: #a74f4d;
   flex-basis: 0;
 }
 .two {
   background: #4c5dbb;
   flex-basis: 100px;
 }
 .three {
   background: #7a9d59;
   flex-basis: 150px;
 }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item one">Первый</div>
      <div class="flex-item two">Во-вторых</div>
      <div class="flex-item three">Третий</div>
    </div>
  </body>
</html>

flex

flex — универсальное свойство, в котором определены 3 значения: flex-grow, flex-shrink, flex-basis: 

Порядок такой, как упоминалось ранее.

Краткая информация:

Նախասահմանված արժեքը  гибкий рост: 0;
гибкая термоусадка: 1;
гибкая основа: auto;
Ժառանգվում ենНет
Կիրառվում ենС элементами типа Flex.
Ենթարկվում է անիմացիայիДа

Значения следующие:

none - такой же как  0 0 auto тот

				
					.flex-container {
   display: flex;
   flex-flow: column wrap;
   width: 1200px;
   height: 300px;
   color: white;
   background: black;
   padding: 10px;
   font-size: 40px;
 }
 .flex-item {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .one {
   background: #a74f4d;
   margin-right: 10px;
   flex-basis: 100%;
 }
 .two {
   background: #4c5dbb;
   margin-bottom: 10px;
   flex: 1 0 0;
 }
 .three {
   background: #7a9d59;
   flex: 0 0 0;
 }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item one">Первый</div>
      <div class="flex-item two">Во-вторых</div>
      <div class="flex-item three">Третий</div>
    </div>
  </body>
</html>

flex-flow:  column  wrap; –установлены два значения свойства: flex-direction и: flex-wrap. В результате гибкие элементы должны располагаться вертикально (столбец) и разрешается перемещать их в следующий столбец (или строку), если размера контейнера недостаточно.

Итак, поскольку первый элемент занимал всю высоту контейнера (flex-basis:   100%;), оставшиеся два были перенесены в следующий столбец, где второй занимал все свободное пространство (flex:   1  0  0;), а третий занимал столько же, сколько и его содержимое (flex:   0  0  0;):

Ширина элементов равна стандартной " stretch " к

flex-direction

flex-direction — определяет направление flex-контейнера и соответственно расположение flex-элементов в нем.

Краткая информация:

Նախասահմանված արժեքը  row
Ժառանգվում ենНет
Կիրառվում ենС контейнером типа Flex.
Ենթարկվում է անիմացիայիНет

Значения следующие:

row - задает элементы, а также направление текста слева направо. Если также указан номер контейнера dir=”rtl” -ը, элементы будут расположены справа налево.

row-reverse -задает элементы, а также направление текста справа налево. Если также указан номер контейнера dir=”ltr” -ը, расположение элементов останется прежним, dir=”rtl” -ի դեպքում элементы будут расположены слева направо.

column – гибкие элементы располагаются вертикально сверху вниз.

column-reverse – гибкие элементы располагаются вертикально снизу вверх.

				
					.flex-container {
   display: flex;
   flex-direction: row;
   width: 1200px;
   height: 100px;
   background: black;
   color: white;
   font-size: 50px;
   padding: 10px;
 }
 .flex-item {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .one {
   background: #a74f4d;
   width: 100px;
 }
 .two {
   background: #4c5dbb;
   width: 100px;
 }
 .three {
   background: #7a9d59;
   width: 100px;
 }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item one">1</div>
      <div class="flex-item two">2</div>
      <div class="flex-item three">3</div>
      <div class="flex-item one">4</div>
      <div class="flex-item two">5</div>
      <div class="flex-item three">6</div>
      <div class="flex-item one">7</div>
      <div class="flex-item two">8</div>
      <div class="flex-item three">9</div>
      <div class="flex-item one">10</div>
      <div class="flex-item two">11</div>
      <div class="flex-item three">12</div>
    </div>
  </body>
</html>

flex-direction:   row;`

flex-direction:   row-reverse;`

flex-wrap

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

Краткая информация:

Նախասահմանված արժեքը  nowrap
Ժառանգվում ենНет
Կիրառվում ենС контейнером типа Flex.
Ենթարկվում է անիմացիայիНет

Значения следующие:

nowrap – все flex-элементы располагаются на одной линии.

wrap –flex-elements при необходимости может перейти к следующей строке (или столбцу).

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

				
					 .flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    width: 500px;
    height: 200px;
    background: black;
    color: white;
    font-size: 50px;
    padding: 10px;
  }
. 
. 
.

flex–flow

flex-flow – устанавливает значение двух свойств:  flex-direction  և flex-wrap :

Краткая информация:

Նախասահմանված արժեքը  гибкое направление. row;
гибкая упаковка.  nowrap;
Ժառանգվում ենНет
Կիրառվում ենС контейнером типа Flex.
Ենթարկվում է անիմացիայիНет

 

				
					  .flex-container {
    display: flex;
    flex-flow: column wrap;
    width: 500px;
    height: 200px;
    background: black;
    color: white;
    font-size: 50px;
    padding: 10px;
  }
. 
. 
.

justify-content

justify-content — гибкий контейнер (display: flex;) устанавливает положение содержимого гибкого контейнера по горизонтали (будет использоваться вертикальное положение содержимого гибкого контейнера) align-content свойство).

Краткая информация:

Նախասահմանված արժեքը  flex-start
Ժառանգվում ենНет
Կիրառվում ենС контейнером типа Flex.
Ենթարկվում է անիմացիայիНет

Значения следующие:

Արժեքը Դիրքը Предыдущий

flex-start
Содержимое располагается по порядку, начиная с левого угла контейнера.

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

flex-end
Содержимое располагается по порядку, начиная с правого угла контейнера.

space-between
Содержимое располагается равномерно по всей строке, а первый и последний располагаются в самом начале и в самом конце строки.

space-around
Содержимое выравнивается равномерно по всей строке. Перед первым элементом и после последнего элемента имеется пустое пространство, каждый из которых равен половине свободного пространства между соседними элементами.

space-evenly
Контент располагается равномерно по всей строке так, чтобы свободное пространство между соседними элементами, перед первым элементом и после последнего элемента было равным друг другу. 
				
					 .flex-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width: 1000px;
    height: 100px;
    background: black;
    color: white;
    font-size: 50px;
    padding: 10px;
  }
. 
. 
.

place-content

place-content – сравнивает значение двух свойств:  align-content  և justify-content։ 

Указание одного значения будет применяться к обоим свойствам (кроме растяжения).

Краткая информация:

Նախասահմանված արժեքը  flex-start
Ժառանգվում ենНет
Կիրառվում ենКонтейнер блочного типа,
Контейнер гибкого типа и
Контейнер сетчатого типа
с.
Ենթարկվում է անիմացիայիНет
 
 
				
					.one {
   display: flex;
   place-content: center center;
   flex-wrap: wrap;
   background: #a74f4d;
   width: 200px;
   height: 200px;
 }
 span {
   color: white;
   font-size: 50px;
   background: orange;
 }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="one"><span>1</span></div>
  </body>
</html>

order

order — flex-контейнер определяет порядок flex-элементов согласно номерам, установленным для их порядков, от большего к меньшему.

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

Краткая информация:

Նախասահմանված արժեքը  0
Ժառանգվում ենНет
Կիրառվում ենС элементами типа Flex.
Ենթարկվում է անիմացիայիДа

Значение обозначается одной из единиц измерения, а также 0 и отрицательным числом.

				
					.flex-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 1000px;
  height: 100px;
  background: black;
  color: white;
  font-size: 50px;
  padding: 10px;
}
.flex-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.one {
  background: #a74f4d;
  width: 100px;
  order: 4;
}
.two {
  background: #4c5dbb;
  width: 100px;
  order: 2;
}
.three {
  background: #7a9d59;
  width: 100px;
  order: 1;
}
.four {
  background: #a74f4d;
  width: 100px;
  order: 3;
}
.five {
  background: #4c5dbb;
  width: 100px;
  order: 5;
}
.six {
  background: #7a9d59;
  width: 100px;
  order: 5;
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HAYTI</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item one">1</div>
      <div class="flex-item two">2</div>
      <div class="flex-item three">3</div>
      <div class="flex-item four">4</div>
      <div class="flex-item five">5</div>
      <div class="flex-item six">6</div>
    </div>
  </body>
</html>
CSS – СВОЙСТВА -Предыдущий CSS-TEXT AND FONT (ՄԱՍ-2) Вперед - CSS – СВОЙСТВА CSS-GRID

Նմանատիպ հոդվածներ

Оставить комментарий

Կիսվել փաստաթուղթով
ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ

При поддержке Hayti:

ru_RURussian
hyArmenian ru_RURussian