Свойство order
Свойство order флекс-контейнер ичидаги
алохида flex-блокнинг жойлашув
тартибини белгилайди. Алохида флекс-блокка татбиқ этилади.
Свойство мусбат ёки манфий бутун сон қийматини қабул қилади. Рақам қанча кичик бўлса, элемент шунча яқинроқ жойлашади, HTML кодда бошқа элементларга нисбатан жойлашган joyidan қатий назар.
Синтаксис
селектор {
order: мусбат ёки манфий сон;
}
Мисол
Бу мисолда барча блокларга order орқали жойлашув
тартиби белгиланган. Энг биринчи бўлиб манфий order -1
бўлган блок жойлашади, сўнгра order 1 бўлган блок ва ҳоказо осҳиш буйича:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
<div id="elem6">6</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
}
#parent > div {
border: 1px solid #696989;
min-width: 100px;
}
#elem1 {
order: 4;
}
#elem2 {
order: 5;
}
#elem3 {
order: 3;
}
#elem4 {
order: 2;
}
#elem5 {
order: 1;
}
#elem6 {
order: -1;
}
:
Қараш мумкин
-
flex-directionсвойстваси,
флекс блоклар ўқлари йўналишини белгилайди -
justify-contentсвойстваси,
асосий ўқ буйича текислашни белгилайди -
align-itemsсвойстваси,
кўндаланг ўқ буйича текислашни белгилайди -
flex-wrapсвойстваси,
флекс блокларнинг кўп қatorliligini белгилайди -
flex-flowсвойстваси,
flex-direction ва flex-wrap учун қисқартма -
align-selfсвойстваси,
бир блокни текислашни белгилайди -
flex-basisсвойстваси,
алохида флекс-блок ўлчамини белгилайди -
flex-growсвойстваси,
флекс блокларнинг "очиқкоʻзлиги"ни белгилайди -
flex-shrinkсвойстваси,
флекс блокларнинг қисқариш даражасини белгилайди -
flexсвойстваси,
flex-grow, flex-shrink ва flex-basis учун қисқартма