FLEX

FLEX – это модуль CSS, который предоставляет набор свойств и значений для создания гибкого макета веб-страницы. Он используется для установки гибких и респонсивных макетов, позволяет легко располагать элементы внутри контейнера. CSS FLEX основан на концепции “гибкого контейнера” и “гибких элементов”.

Основные свойства FLEX:

1. display: flex; – устанавливает контейнеру режим flex.
2. flex-direction: row/column; – определяет направление основной оси (главной), по которой располагаются элементы в контейнере.
3. justify-content: flex-start/end/center/space-between/space-around; – горизонтальное выравнивание элементов в контейнере.
4. align-items: stretch/flex-start/flex-end/center/baseline; – вертикальное выравнивание элементов в контейнере.
5. flex-wrap: nowrap/wrap/wrap-reverse; – определяет, должны ли элементы переноситься на новую строку или оставаться в одной линии.
6. align-content: stretch/flex-start/flex-end/center/space-between/space-around; – управляет расположением линий элементов в случае переноса на новую строку.

Основные свойства FLEX для элементов:

1. order: число; – определяет порядок элемента относительно других элементов в контейнере.
2. flex-grow: число; – определяет, насколько элемент будет растягиваться в контейнере.
3. flex-shrink: число; – определяет, насколько элемент будет сжиматься в контейнере.
4. flex-basis: значение; – устанавливает базовый размер элемента.
5. align-self: auto/stretch/flex-start/flex-end/center/baseline; – устанавливает вертикальное выравнивание элемента относительно своего контейнера.

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

flex-direction

Пример

row row-reverse column column-reverse

child-item 1

child-item 2

child-item 3

flex-direction: row; /default value/

HTML код

				
					<h1>Flex Direction Examples</h1>

<div class="controllars">
  <label for="row"><input checked name="FlexDirection" type="radio" id="row"/>row</label>
  <label for="row-reverse"><input name="FlexDirection" type="radio" id="row-reverse"/>row-reverse</label>
  <label for="column"><input name="FlexDirection" type="radio" id="column"/>column</label>
  <label for="column-reverse"><input name="FlexDirection" type="radio" id="column-reverse"/>column-reverse</label>
</div>

<div class="flex-parent">
  <div class="child-item">
    child-item 1
  </div>
  <div class="child-item"> 
    child-item 2
  </div>
  <div class="child-item">
    child-item 3
  </div>
</div>
<h4>flex-direction: <span>row;  /*default value*/</span></h4>

CSS (SCSS) код

				
					 
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: #c03546;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  padding: 30px 50px;
  color: #fff;
}

h1 {
  color: #fff;
  font-size: 24px;
  display: block;
  padding-bottom: 10px;
  text-transform: uppercase;
}
h4 {
  color: #fff;
  font-size: 14px;
  display: block;
  font-weight: 400;
  margin: 10px 0 30px;
}
.controllars{
  margin-bottom: 20px;
  label{
    margin-right: 10px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    vertical-align: middle;
  }
  input{
    vertical-align: middle;
    margin: 0 3px 0 0;
  }
}

.flex-parent {
  display: flex;
  border: solid 1px #fff; 
  .child-item {
    background-color: #fff;
    color: #000;
    width: 150px;
    padding: 50px 10px;
    margin: 10px;
    font-size: 13px;
    font-weight: 600;
  }
}

//Flex demo here
.row-reverse{
  flex-direction: row-reverse;
}
.column{ 
  flex-direction: column;
}
.column-reverse{
  flex-direction: column-reverse;
}

SCRIPT код

				
					//for controller
//demo purpose only
$(".controllars label").click(function () {
  var thisId = $(this).find("input").attr("id");
  //alert(thisId);
  $(".flex-parent").attr("class", "flex-parent").addClass(thisId);
  $("h4 span").text(thisId + ";");
});

CSS FLEX