Unatka.ru

Виртуальный офис VO

Раздел: Создание сайта html. Практика

Глава: css

Flex css

Flex дословно переводится как гибкий или гибкость, Flexbox, в смысле верстки страницы - гибкое поле.

Модуль css Flexbox Layout ( Flexible Box Layout Module ) уже поддерживается всеми последними версиями популярных браузеров, кроме IE, где применение ограничено.
Позволяет аккуратно выполнять верстку, не заботясь о длине колонок. Элементы контейнера способны пропорционально растягиваться и сжиматься. Вместе со свойством grid Flexbox позволяет делать оптимальную адаптивную верстку.

Пример: Вы хотели бы видеть в области section три элемента — 1: picture, 2: p, 3: table (рис.1). Здесь флекс-контейнер — тег section, а внутренние теги — флекс-элементы.

Пример разметки с помощью flex на сайте https://unatka.ru
Рис.1. Демонстрация примера

Свойста Flexbox


Свойства существуют как для родительского элемента, так и для дочерних. Родительский элемент - контейнер, дочерние — элементы. Элементы вложены в контейнер.

Flexbox на примерах:


Родительский элемент flex — контейнер.

Чтобы сделать тег section flex — контейнером, добавим к нему id и присвоим идентификатору стиль
display: flex;
Например, для section id=“box“ в файл css впишем:

#box{ display: flex; }

Свойства display: flex по умолчанию:

flex-flow: row, nowrap; justify-content: flex-start; align-items: stretch;

Подробнее:
flex-flow


Объединенное свойство flex-direction и flex-wrap.
По умолчанию: row, nowrap.

ВИД:

Пример по умолчанию

©

Свойства по умолчанию

КОД:

<meta charset="utf-8">
<title>Пример по умолчанию</title>
<style>
  #box {
    display : flex;
    border: dotted 1px red;
    font-size: 12px;
    }
  #box figure, 
  #box p, 
  #box table {
    border: dotted 2px green;
    width: auto;
    }     
</style>

  <section id="box">
    <figure>
      <h3>©</h3>			          
    </figure> 
    <p>Свойства по умолчанию</p>
    <picture>
      <source srcset="/images/green-32.webp">
        <img itemprop="/image" src="/images/green-120.png">                    
    </picture> 
  </section>

flex-direction

определяет направление оси расположения флекс-элементов. 

#box{
flex-direction: 
row|row-reverse|column|column-reverse;
}


По умолчанию: row;

Что это значит:
row — все элементы располагаются в одну строку, для русского языка - слева направо (предыдущий пример).


Reverse — противоположное направление. Поэтому, row-reverse элементы расположены справа налево.

column - флекс-элементы расположены вертикально, сверху вниз.
column-reverse — флекс-элементы расположены вертикально, снизу вверх.

ВИД:

Вертикальное расположение

©

flex-direction: column

КОД:

<meta charset="utf-8">
<title>Вертикальное расположение</title>
<style>
  #examplebox {
    display: flex;
    flex-direction: column;
    border: dotted 1px red;
    font-size: 12px;
    }
  #examplebox figure, 
  #examplebox p, 
  #examplebox table {
    border: dotted 2px green;
    width: auto;
    }     
</style>

  <section id="examplebox">
    <figure>
      <h3>©</h3>			          
    </figure> 	
    <p>flex-direction: column</p>
    <picture>
      <source srcset="/images/green-32.webp">
        <img itemprop="image" src="/images/green-120.png">                    
    </picture> 
  </section>

 

flex-wrap

.container {
flex-wrap: nowrap|wrap|wrap-reverse;
}


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


По умолчанию: nowrap;

nowrap — все флекс — элементы расположены в одной строке.
wrap - флекс — элементы могут быть перенесены на другие строки, сверху вниз.
wrap — reverse - элементы могут быть перенесены на другие строки, снизу вверх.

ВИД:

Свойство wrap

Ω

flex-wrap: wrap

КОД:

<meta charset="utf-8">
<title>Свойство wrap</title>
<style>
  .box {
    display: flex;
    flex-wrap: wrap; 
    border: dotted 1px red;
    font-size: 12px;
    }
  .box figure, 
  .box p, 
  .box table {
    border: dotted 2px green;
    width: 60%;
    }     
</style>



  <section class="box">
    <figure>
      <h3>Ω</h3>			          
    </figure> 
    <p>flex-wrap: wrap</p>
    <picture>
      <source srcset="/images/green-32.webp">
        <img itemprop="image" src="/images/green-120.png">                    
    </picture> 
  </section>

 

В примере изменим ширину элементов. Сработает свойство wrap.

justify-content


При необходимости определяет расположение элементов относительно горизонтальной оси контейнера.

.container {
justify-content: flex-start|flex-end|center|space-between|space-around;
}


По умолчанию flex-start;


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

ВИД:

justify-content

Свойство justify-content: center

©

Центр

Свойство justify-content: end

©

Конец

Свойство justify-content: space-between

©

Распределение

КОД:

<meta charset="utf-8">
<title>justify-content</title>
<style>
  #boxcenter, 
  #boxend, 
  #boxbtw {
    display : flex;        
    border: dotted 1px red;
    font-size: 12px;
    }
  #boxcenter {
    justify-content: center;
    }
  #boxend {
    justify-content: end;
    }
  #boxbtw {
    justify-content: space-between;
    }
  #boxcenter figure, 
  #boxend figure, 
  #boxbtw figure, 
  #boxcenter p, 
  #boxend p, 
  #boxbtw  p, 
  #boxcenter table, 
  #boxend table, 
  #boxbtw table {
    border: dotted 2px green;
    background-color: lightgreen;
    width: auto;
    }     
</style>

  <h3>Свойство justify-content: center</h3>
    <section id="boxcenter">
      <figure>
        <h3>©</h3>			          
      </figure> 			
      <p>Центр</p>
     <picture>
      <source srcset="/images/green-32.webp">
        <img itemprop="image" src="/images/green-120.png">                    
    </picture> 	
    </section>
    <h3>Свойство justify-content: end</h3>
    <section id="boxend">
      <figure>
        <h3>©</h3>			          
      </figure> 		
      <p>Конец</p>
      <picture>
      <source srcset="/images/green-32.webp">
        <img itemprop="image" src="/images/green-120.png">                    
    </picture> 		
    </section>
    <h3>Свойство justify-content: space-between</h3>
    <section id="boxbtw">
      <figure>
        <h3>©</h3>			          
      </figure> 			
      <p>Распределение</p>
      <picture>
      <source srcset="/images/green-32.webp">
        <img itemprop="image" src="/images/green-120.png">                    
    </picture> 	
    </section>

 

align — items


При необходимости определяет расположение элементов относительно вертикальной оси контейнера

.container {
align-items: flex-start|flex-end|center|baseline|stretch;
}


По умолчанию stretch, элементы растягиваются так, чтобы заполнить весь контейнер.
flex — start прижимает элементы к верхней части контейнера;
flex — end прижимает элементы к нижней части контейнера;
center выравнивает элементы по центру;
baseline выравнивает элементы по базовой линии.

ВИД:

align-items

Свойство align-items: start

©

Старт

Свойство align-items: center

©

Центр

Свойство align-items: end

©

Конец

Свойство align-items: baseline

©

Распределение

КОД:

<meta charset="utf-8">
<title>align-items</title>
<style>
  #boxstrt, 
  #boxcenter1, 
  #boxend1, 
  .boxbase {
    display : flex;        
    border: dotted 1px red;
    font-size: 12px;
    height: 200px;
   }
   #boxstrt {
     align-items: start;
     }
   #boxend1 {
     align-items: end;
     }
   #boxcenter1 {
     align-items: center;
     }   
   .boxbase {
     align-items: baseline;
     }
    
   #boxcenter1 figure, 
   #boxend1 figure, 
   #boxstrt figure, 
   .boxbase figure, 
   #boxcenter1 p, 
   #boxend1 p, 
   #boxstrt  p, 
   .boxbase p, 
   #boxcenter1 table, 
   #boxend1 table, 
   #boxstrt table, 
   .boxbase table {
     border: dotted 2px green;
     background-color: lightgreen;
     width: auto;
     }     
</style>

  <h3>Свойство align-items: start</h3>
    <section id="boxstrt">
      <figure>
        <h3>©</h3>			          
      </figure> 		
      <p>Старт</p>
     <picture>
      <source srcset="/images/green-32.webp">
      <img itemprop="image" src="/images/green-120.png">                    
    </picture>		
    </section>
    <h3>Свойство align-items: center</h3>
    <section id="boxcenter1">
      <figure>
        <h3>©</h3>			          
      </figure> 		 
      <p>Центр</p>
     <picture>
      <source srcset="/images/green-32.webp">
      <img itemprop="image" src="/images/green-120.png">                    
    </picture>	
    </section>
    <h3>Свойство align-items: end</h3>
    <section id="boxend1">
      <figure>
        <h3>©</h3>			          
      </figure>		
      <p>Конец</p>
      <picture>
        <source srcset="/images/green-32.webp">
        <img itemprop="image" src="/images/green-120.png">                    
      </picture>	
    </section>
    <h3>Свойство align-items: baseline</h3>
    <section class="boxbase">
      <figure>
        <h3>©</h3>			          
      </figure> 			
      <p>Распределение</p>
      <picture>
        <source srcset="/images/green-32.webp">
        <img itemprop="image" src="/images/green-120.png">                    
      </picture>		
    </section>

 

В примере элементам флекс задана фиксированная высота для улучшения демонстрации.

Дочерние флекс - элементы


Flex-элементы по умолчанию располагаются в порядке натурального ряда. Например, если мы имеем 4 элемента, они расположатся в порядке 1, 2, 3, 4.


order


Свойство изменяет порядок флекс - элементов внутри контейнера. Класс присваивается элементу.
.item {
order: integer;
}

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


flex-grow


Определяет возможность элемента растягиваться в заданном порядке.
По умолчанию: 0. Если все элементы имеют значение 1, то свободное пространство равномерно распределяется в контейнере. Если один из элементов будет иметь значение 2, то указанный элемент будет растянут на вдвое большую ширину.

В примере присвоим класс element таблице и зададим растягивание вдвое.

flex-basis


Определяет размер элемента по умолчанию. Размер может быть указан как размерная единица (пкс, мм, %), 0 или auto.
По умолчанию: auto (все предыдущие примеры).

В примере добавляем класс baseln к тегу p и задаем ему размер. 

ВИД:

order-flexes

Порядок flex-элементов

©

Был 2 до изменения

Растягивание элементов

©

Центр

flex-basis

©

Фиксированный размер элемента

КОД:

<meta charset="utf-8">
<title>order-flexes</title>
<style>
  #boxorder, 
  #boxgrew, 
  .boxbase {
    display : flex;        
    border: dotted 1px red;
    font-size: 12px;
    height: 200px;
    }
  #boxorder, 
  #boxgrew, 
  .boxbase {
    align-items: center;
    }    
  #boxgrew figure, 
  #boxorder figure, 
  .boxbase figure, 
  #boxgrew p, 
  #boxorder  p, 
  .boxbase p, 
  #boxgrew table, 
  #boxorder table,
  .boxbase table {
    border: dotted 2px green;
    background-color: lightgreen;
    width: auto;
    } 
  .item {
    order: 3;
    } 
  .element {
    flex-grow: 2;
    }  
  .baseln {
    flex-basis: 250px;
    } 
</style>

  <h3>Порядок flex-элементов</h3>
  <section id="boxorder">
      <figure>
        <h3>©</h3>			          
      </figure> 		
      <p class="item">Был 2 до изменения</p>
      <picture>
        <source srcset="/images/green-32.webp">
        <img itemprop="image" src="/images/green-120.png">                    
      </picture>		
    </section>
    <h3>Растягивание элементов</h3>
	<section id="boxgrew">
      <figure class="element">
        <h3>©</h3>			          
      </figure>			
      <p>Центр</p>
      <picture>
        <source srcset="/images/green-32.webp">
        <img itemprop="image" src="/images/green-120.png">                    
      </picture>	 		
    </section>		
    <h3>flex-basis</h3>
    <section class="boxbase">
     <figure>
        <h3>©</h3>			          
      </figure>			
      <p>Фиксированный размер элемента</p>
      <picture>
        <source srcset="/images/green-32.webp">
        <img itemprop="image" src="/images/green-120.png">                    
      </picture>	
    </section>

flex


.item {
flex: none|flex-grow (flex-shrink || flex-basis )
}
Сокращенная запись. Рекомендуется к применению.
По умолчанию: 0 1 auto;
При задании свойств, отличных от свойств по умолчанию, flex — grow указывать обязательно, остальные можно не указывать.

Итоги

В этой статье я изложила основные свойства модуля css Flexbox. Модуль удобно использовать для отдельных элементов страницы. 

Опубликовано впервые: 2024-12-26

Хочу оставить комментарий
X

Политика ...обработки ПД веб-сайта unatka.ru и его поддоменов



Посмотреть комментарии

Назад ◄ к стр. О сайте caniuse и валидаторе W3C

Вперед ► к стр. CSS Grid. Родительский элемент. Основные свойства раскладки

Комментариев пока нет

Этот сайт использует сервис веб-аналитики Яндекс Метрика, предоставляемый компанией ООО «ЯНДЕКС».

Чтобы сохранить конфиденциальность персональных данных, Условия использования сервиса Яндекс Метрика запрещают передавать идентификационную информацию в Метрику.

Подробнее