» » » Примеры использования flexbox в css
38 0  

Примеры использования flexbox в css

Примеры наиболее частого использованя flexbox в css. Просто так их не придумали и у флексов есть то чего невозможно сделать с помощью обычного css.

fellow У Флексов есть минус - в контейнере (display: flex;) не работает абсолютное позиционирование.!

1. Удобно менять блоки местами:

➦ О свойстве order.

<div class="flex">
    <div class="itm1">1</div>
    <div class="itm2">2</div>
    <div class="itm3">3</div>
    <div class="itm4">4</div>
</div>
<style>
.flex .itm1 {  order: 4; }
.flex .itm2 {  order: 1; }
.flex .itm3 {  order: 3; }
.flex .itm4 {  order: 2; }
</style>


2. Задавать пропорци блокам относительно один одного:

<div class="cont-var3">   
   <div class="colv-1">..1.</div> <!--  1 блок -->   
   <div class="colv-2">..2.</div> <!--  шире в 2 раза чем первый блок -->   
   <div class="colv-3">..3.</div> <!--  шире в 3 раза чем первый блок -->
</div>

<style>
.cont-var3{display: flex;}
.colv-1{flex: 1; background:#222;}
.colv-2{flex: 2; background:#444;}
.colv-3{flex: 3; background:#666;}
</style>

Пример:

..1.
..2.
..3.

3. Выровнять текст по центру по вертикали:

<div class="center-text">
	Текст по середине
</div>

<style>
.center-text {
  display: flex;
  justify-content: center;  /* Центр по главной оси */
  align-items: center;      /* Центр по вторичной оси */
}
</style>


4. Сделать колонки одинаковыми по высоте:

<div class="container23">
  <div>.1..</div>
  <div>.2..</div>
  <div>.3..<br /> <p>---</p> <br /> <p>---</p> <br /> <p>---</p></div>
</div>

<style>
.container23 {
  display: flex;
  flex-direction: row; /* Элементы внутри контейнера будут позиционироваться горизонтально */
  align-items: stretch; /* Элементы внутри контейнера будут занимать всю его высоту */
}
.container23 > div { flex: 1; background:#222; margin:0 4%;color:#fff;}
</style>

Пример:

.1..
.2..
.3..

---


---


---


Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019