در قسمت قبل آموزش با این موضوع آشنا شدیم که با تقسیم بندی 12 ستونه در بوت استرپ میتوان وب سایت را صفحه بندی کرد و به انها سایز ها مورد نظر را اعمال کرد.
در css اگر میخواستیم موقعیت المان ها را تغیر بدهیم از float و position استفاده میکردیم
اما در بوت استرپ به جای این 2 میتوان از flex box استفاده کرد.
گام اول : ایجاد container flex
منظور از container این است که یک padding از 4 جهت در نظر میگیرد پس بهتر است از این کلاس استفاده شود.
برای ایجاد کلاس flex داریم :
<div class = "d-flex>
</div>
به صورت کامل تر داریم :
<body class= "container">
< div class = "d-flex">
<div class = " bg-danger"> number 1 </div>
</div>
</body>
در مرورگر , نمایش آن به صورت چپ به راست است که به صورت پیشفرض تعریف شده است
اگر بخواهی جهت آن را عوض کنیم یعنی از راست به چپ داریم :
<div class = "d-flex flex-row-reverse">
کد زیر بیانگر روشنتر موضوع است :
و نمایش مرورگر آن به صورت :
اولین سطر نمایش از سمت چپ به راست و سطر دوم نمایش reverse آن سطر است.
با ایجاد کلاس flex-column نمایش را از حالت سطری به ستونی تبدیل کنید.
<div class = " d-flex flex-column">
حالا اگر بخواهیم column را برعکس inverse کنیم سطر اول با سطر اخر جابجا میشود یعنی :
نتیجه در مرورگر :
آن چیزی که در مرورگر نمایش داده شده , در حالت flex-column ترتیب رنگ ها را توجه کنید : قرمز-زرد-ابی کم رنگ - ابی پر رنگ
اما با کلاس flex-column-inverse نمایش برعکی میشود سطر اخر در جای سطر اول مینشیند یعنی : ابی پررنگ - ابی کم رنگ - زرد - قرمز.
توجه داشته باشید در flex-row-inverse برعکس شدن به صورت چپ-راست یا راست-چپ است , اما در flex-column-inverse به صورت برعکس شدن سطرها است.
