flexbox

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

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

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

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

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

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}
<div class="container">
<div class="flex-column">
<section>

Ֆլեքսբոքսով հեշտ է

</section>
<section>

Lorem Ipsum-ը տպագրության և տպագրական արդյունաբերության համար նախատեսված մոդելային տեքստ է: Սկսած 1500-ականներից` Lorem Ipsum-ը հանդիսացել է տպագրական արդյունաբերության ստանդարտ մոդելային տեքստ, ինչը մի անհայտ տպագրիչի կողմից տարբեր տառատեսակների օրինակների գիրք ստեղծելու ջանքերի արդյունք է: Այս տեքստը ոչ միայն կարողացել է գոյատևել հինգ դարաշրջան, այլև ներառվել է էլեկտրոնային տպագրության մեջ` մնալով էապես անփոփոխ: Այն հայտնի է դարձել 1960-ականներին Lorem Ipsum բովանդակող Letraset էջերի թողարկման արդյունքում, իսկ ավելի ուշ համակարգչային տպագրության այնպիսի ծրագրերի թողարկման հետևանքով, ինչպիսին է Aldus PageMaker-ը, որը ներառում է Lorem Ipsum-ի տարատեսակներ:

</section>
</div>

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

.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;
}
<div class="initial">

Կլինի 200px լայնությամբ եթե տեղ կա, հակառակ դեպքում կփոքրանա մինչև 100px, բայց ոչ պակաս։

</div>
<div class="none">

Անկախ ամեն ինչից կլինի 200px լայնությամբ։

</div>
<div class="flex1">

Կզբաղեցնի մնացած լայնության 1/3 մասը։

</div>
<div class="flex2">

Կզբաղեցնի մնացած լայնության 2/3 մասը։

</div>

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

.vertical-container {
  display: -webkit-flex;
  display: flex;
  height: 300px;
}
.vertically-centered {
  margin: auto;
}
<div class="vertical-container">
<div class="vertically-centered">

Արդյունքում կհեշտանա CSS-ով որևէ բան կենտրոնական դիրքի բերելը։

</div>
</div>
  • Creative Commons License