CSS flex-direction Ating Pagtutukoy sa Direction ng Flex

Paglilinaw at paggamit

Ang property ng flex-direction ay nagtutukoy sa direksyon ng malayang proyekto.

Komentaryo:Kung ang elemento ay hindi isang malayang proyekto, ang property ng flex ay hindi magagamit.

សូមអានផងដែរ：

CSS ការបង្រៀន：CSS កម្មវិធីបន្លាស់

ទំព័រផ្នែក CSS សំខាន់：flex អត្តបទ

ទំព័រផ្នែក CSS សំខាន់：flex-basis អត្តបទ

ទំព័រផ្នែក CSS សំខាន់：flex-flow អត្តបទ

ទំព័រផ្នែក CSS សំខាន់：flex-grow អត្តបទ

ទំព័រផ្នែក CSS សំខាន់：flex-shrink អត្តបទ

ទំព័រផ្នែក CSS សំខាន់：flex-wrap អត្តបទ

ទំព័រផ្នែក HTML DOM សំខាន់：flexDirection អត្តបទ

ឧទាហាន

កំណត់ទិសដើមឡើយ សំរាប់អត្តបទរុងច្រើន ដែលស្ថិតនៅក្នុង <div> នោះ：

div {
  display: flex;
  flex-direction: row-reverse; 
}

ព្យាយាមដោយខ្លួនឯង

ហ្គ្រាមវិទ្យា CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

តម្រូវការអត្តបទ

តម្រូវការ ការពន្យល់
row តម្រូវការដើមដំបូង。
row-reverse ដូចជាបន្ទុកតារាង ប៉ុន្តែមានទិសដើមឡើយ。
column បង្ហាញអត្តបទរុងច្រើន ដោយដោយកំពុងតែបង្ហាញអត្តបទជាបន្ទុកតារាង。
column-reverse ដូចជាបន្ទុកតារាង ប៉ុន្តែមានទិសដើមឡើយ。
initial កំណត់អត្តបទនេះទៅជាតម្រូវការដើម។ សូមអាន： initial。
inherit បន្ទាប់ពីការបន្តបន្ទាប់ពីអត្តបទនេះ គឺជាការបន្តពីអត្តបទឪោនបង្ហាញនោះ。 inherit。

ពត៌មានបច្ចេកទេស

តម្រូវការដើមដំបូង： row
ការកាន់ទុក្ខពី： ទោះបីជាមិនទេ
ការបង្កើតរូបភាព： មិនគាំទ្រឡើយ។ សូមអាន：គុណតាងទាក់ទងនឹងការបង្ហាញរូបភាព。
កំណែទម្រង់： CSS3
JavaScript ហ្គ្រាមវិទ្យា： object.style.flexDirection="column-reverse"

ឧទាហានផ្សេងៗ

ប្រើប្រាស់ flex-direction និង media query ដើម្បីបង្កើតការរៀបចំតារដែលមានទំហំប្រព័ន្ធ/ឧបករណ៍ផ្សេងៗសំរាប់ទំហំអេក្រង់ផ្សេងៗ:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* ការរៀបចំការប្រតិបត្តិ - បង្កើតការរៀបចំតារដោយ100% ជាជាតិតែមួយ និងមិនជាការរៀបចំតារដោយ50% ជាពីរតារដែរ */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

ព្យាយាមដោយខ្លួនឯង

ការគាំទ្រនៃកម្មវិធីប្រើប្រាស់

ចំនួនជាក់ស្តែងនៅក្នុងតារាងបង្ហាញថាជាការគាំទ្រទាំងស្រុងរបស់កម្មវិធីប្រើប្រាស់ដំបូងដែលគាំទ្រកត្តិបុគ្គលិកនោះ。

ចំនួនជាក់ស្តែង -webkit- ឬ -moz- បង្ហាញថាការប្រើប្រាស់មុននេះគឺជាចំណែកដំបូងដែលមានបញ្ជីមុខ。

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0