flexbox

flexbox-ը display հատկության նոր արժեքներից է։ Այն պատրաստ է փոխել էջատման ներկայիս եղանակները։ Դժբախտաբար սպեցիֆիկացիան հաճախակի է փոխվում, այդ պատճառով այն տարբեր եղանակներով է իրականացված տարբեր դիտարկիչներում։

Ամեն դեպքում ես ցանկանում եմ ցուցադրել որոշ օրինակներ, որպիսի դու իմանաս թե ինչ է սպասվում ապագայում։ Այս օրինակները ներկայումս աշխատում են միայն այն դիտարկիչներում, որոնք ապահովում են ստանդարտի վերջին վարկածը։

Շրջապատում կան բազմաթիվ ժամկետանց նյութեր flexbox-ի մասին։ Եթե ուզում ես իմանալ ավելին սկսիր այստեղից։ Նաև ես գրել եմ մանրամասն հոդված օգտագործելով ամենաթարմ շարահյուսությունը.

flexbox-ով կարելի է անել ավելին․ այստեղ միայն մի քանի օրինակ կլինի գաղափար կազմելու համար։

Flexbox-ի օգտագործմամբ պարզ էջատում

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

«Թույն» էջատում ֆլեքսբոքսի օգտագործմամբ

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

ֆլեքսբոքսով կենտրոնացում

.vertical-container {
  display: -webkit-flex;
  display: flex;
  height: 300px;
}
.vertically-centered {
  margin: auto;
}