cssطراحی سایت

جلسه ۵۷: خصوصیات مورد Flex در CSS

li {
    flex-basis: 150px;
}

اکنون flex-item به عرض ۱۵۰ پیکسل محدود شده است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

۴٫flex shorthand

خلاصه مختصر flex به شما این امکان را می دهد که ویژگی های flex-grow ، flex-shrink و flex-based را به صورت یکجا تنظیم کنید.

در صورت مناسب بودن ، توصیه می کنم هر سه ویژگی را همزمان با استفاده از مختصر نویسی تنظیم کنید تا اینکه این کار را به صورت جداگانه انجام دهید.

li {
  flex: 0 1 auto;
}

کد بالا برابر با تنظیم سه ویژگی است: flex-grow: 0؛flex-shrink: 1؛ flex-based: auto لطفا به سفارش توجه داشته باشید. ابتدا اFlex-grow ، سپس flex-shrink و سپس flex-basis شوید. مخفف GSB ممکن است کمک کند. اگر نتوانید یکی از مقادیر را در متن کوتاه تنظیم کنید ، چه اتفاقی می افتد؟ اگر فقط مقادیر flex-grow و flex-shrink را تنظیم کنید ، flex-based به طور پیش فرض صفر می شود. به این حالت انعطاف پذیری مطلق می گویند. و وقتی فقط flex-basis را تنظیم می کنید ، یک انعطاف پذیری نسبی پیدا می کنید.

//this is an absolute flex item
li {
  flex: 1 1; //flex-basis defaults to 0;
}

//this is a relative flex item
li {
  flex-basis: 200px; //only flex-basis is set
}

می دانم چه فکری می کنی هدف از انعطاف پذیری نسبی و مطلق چیست؟ من بعداً در این مقاله به این سوال پاسخ می دهم. بیایید نگاهی به مقادیر خلاصه مختصر بسیار مفید بیندازیم.

۱. flex: 0 1 auto

//again, the 'li' represents any flex-item
li {
  flex: 0 1 auto;
}

این همان نوشتن flex: default و رفتار پیش فرض همه موارد flex است. بگذارید این را بشکنم ، فقط کمی.

flex-based روی auto تنظیم شده است ، به این معنی که عرض اولیه کالای flex به طور خودکار بر اساس اندازه محتویات تعیین می شود. متوجه شدی؟ با رفتن به ویژگی بعدی ، مقدارflex-grow صفر است. این بدان معناست که خاصیتflex-grow در عرض اولیه مورد flex دستکاری نمی کند. کلید رشد خاموش است. از آنجا که flex-grow “رشد” آیتم های فلکس را کنترل می کند و روی آن صفر است ، پس کالاهای انعطاف پذیر متناسب با صفحه نمایش “رشد” نخواهند کرد. سرانجام ، مقدار انقباض فلکس ۱ است. این گفته می شود – “در صورت لزوم ، مورد فلکس را کوچک کنید” در اینجا به نظر می رسد که وقتی روی برخی از موارد فلکس اعمال می شود ، به نظر می رسد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 0 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>

  <li>I am a simple list</li>

</ul>

</body>

</html>

توجه کنید که چگونه موارد فلکس رشد نمی کنند. عرض به طور خودکار محاسبه می شود و با تغییر اندازه مرورگر – در صورت لزوم ، کوچک می شوند.

۲. Flex: 0 0 auto

/*again, the 'li' represents any list-item*/

li {
  flex: 0 0 auto;
}

این همان flex: none است. با استفاده از همان چهارچوبی که قبلاً ایجاد کردم ، عرض به طور خودکار محاسبه می شود ، اما مورد فلکس رشد نمی کند یا کوچک نمی شود (هر دو روی صفر تنظیم می شوند). کلیدهای کوچک و بزرگ هر دو خاموش هستند. این اساساً یک عنصر با عرض ثابت است که عرض اولیه آن از اندازه محتوا در مورد فلکس برخوردار نیست. ببینید که این خلاصه کوتاه چگونه روی دو مورد فلکس تأثیر می گذارد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

یک محتوا بیشتر از دیگری است. اولین چیزی که باید توجه کنید این است که موارد فلکس دارای عرض های مختلف هستند. این از آنجا انتظار می رود که عرض ها بر اساس اندازه محتوا به طور خودکار محاسبه می شوند. اندازه مرورگر خود را تغییر اندازه دهید ، متوجه خواهید شد که موارد فلکس با عرض آن کوچک نمی شوند. آنها از عنصر والدین خارج می شوند ، و شما باید مرورگر خود را به صورت افقی پیمایش کنید تا تمام مطالب را مشاهده کنید. جای نگرانی نیست ، بعداً به شما نشان خواهم داد که چگونه با این رفتار عجیب کنار بیایید.

۳.Flex: 1 1 auto

این همان flex: auto است. از چارچوبی که قبلاً ایجاد کردم استفاده کنید. این می گوید ، “عرض اولیه را به طور خودکار محاسبه کنید ، اما متناسب با کل فضای موجود رشد کنید و در صورت لزوم کوچک شوید” کلیدهای رشد و کوچک شدن روشن شده و عرض به طور خودکار محاسبه می شود.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

این بار موارد در فضای موجود پر شده و با تغییر اندازه مرورگر ، کوچک می شوند.    

۴. Flex: “positive number”

جایی که “عدد مثبت” نشان دهنده هر عدد مثبت است (بدون نقل قول) این همان flex: “positive number” ۱ ۰ است. flex: 2 1 0 همان نوشتن flex است: ۲ که ۲ نشان دهنده هر عدد مثبت است

/*again, the 'li' represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

طبق همان چارچوبی که قبلاً ایجاد کردم ، این امر می گوید: “عرض اولیه کالای فلکس را روی صفر تنظیم کنید (ehm ، بدون عرض؟) ، آن را رشد دهید تا فضای موجود پر شود و در نهایت هر زمان که ممکن است مورد را کوچک کنید” با داشتن آیتم های انعطاف پذیر “بدون عرض” ، عرض چگونه محاسبه می شود؟ مقدار انعطاف پذیر رشد می کند و میزان “وسعت” مورد انعطاف پذیر را تعیین می کند. این مسئله از مشکل بدون عرض مراقبت می کند. استفاده از این مختصر فلکس درصورتی که بیش از یک مورد فلکس داشته باشید که عرض اولیه ، flex-based روی هر مقادیر صفر تنظیم شده باشد ، عملی تر است. ۰px آنچه واقعاً اتفاق می افتد ، این است که عرض آیتم های فلکس بر اساس نسبت مقدار فلکس رشد محاسبه می شوند. من فقط کمی آن را خراب می کنم دو مورد از لیست را که در زیر مشخص و به سبک آن در نظر گرفته شده در نظر بگیرید.

<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>

ul {
    display: flex;
}
li:nth-child(1) {
    flex: 2 1 0; /*same as just writing flex: 2*/
}

li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

  به یاد داشته باشید که تنظیم flex-grow: 1 اجازه می دهد تا مورد flex فضای موجود را پر کند. کلید رشد روشن است. در اینجا شما دو مورد فلکس دارید. یکی دارای ویژگی انعطاف پذیر ۱ و دیگری ۲ ، پس چه اتفاقی می افتد؟ کلیدهای رشد را برای هر دو مورد روشن کرده اید. با این حال ، میزان رشد متفاوت است. ۱ و ۲ هر دو برای پر کردن فضای موجود گسترش می یابند ، اما در برخی از نسبت ها. نحوه کار آن در اینجا است. مورد دوم ۲/۳ فضای موجود را اشغال می کند در حالی که مورد اول ۱/۳ را اشغال می کند. می دانید چگونه به آن رسیدم؟ نسبت ریاضیات پایه. نسبت فردی / نسبت کل امیدوارم که از آن کلاس های ریاضی صرف نظر نکرده باشید.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }
        
        li:nth-child(1) {
            flex: 2 1 0; /*same as just writing flex: 2*/
        }

        li:nth-child(2){
            flex: 1 1 0;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am one</li>   

    <li>I am two</li>                   

</ul>

</body>

</html>

می بینی چه اتفاقی می افتد؟ حتی اگر هر دو مورد فلکس دارای محتوای یک اندازه (تقریباً) باشند ، با این وجود فضاهای مختلفی را اشغال می کنند. عرض ها بر اساس اندازه محتوا نیستند ، بلکه مقادیر رشد هستند. یکی تقریباً دو برابر دیگری است.

۵٫ Align-self

خاصیت align-self یک قدم جلوتر می رود تا به ما اینقدر آیتم های فلکس را کنترل کنیم. قبلاً دیدید که چگونه ویژگی align-items در ترازبندی جمعی همه موارد flex در یک ظرف flex کمک می کند. اگر بخواهید موقعیت یک انعطاف پذیر واحد را در امتداد محور متقابل تغییر دهید ، بدون اینکه روی موارد انعطاف پذیر همسایه تأثیر بگذارد ، چه می کنید؟ اینجاست که املاک align-self به کمک شما می آید. ممکن است هر یک از این مقادیر را به خود اختصاص دهد: auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

اینها مقادیری هستند که شما قبلاً با آنها آشنا هستید ، اما به عنوان یک تازه کننده در اینجا نحوه تأثیر آنها بر یک مورد خاص هدف قرار گرفته است. در این حالت اولین مورد درون ظرف است. فلکس مورد هدف قرمز است.

۱٫ اflex-end

flex-end مورد هدف را با انتهای محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

 

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: flex-end;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۲٫ center

مرکز مورد هدف را با مرکز محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: center;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!– Selected list element –>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۳٫ stretch

کشش مورد کشش هدف را “کشش” می کند تا فضای موجود در امتداد محور عرضی را پر کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /*Select first list element(li) within the unordered list(ul)*/

        li:first-child {

            background-color: red;

            align-self: stretch;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۴٫ baseline

خط پایه مورد منعطف را در امتداد خط پایه تراز می کند. به نظر می رسد که همان نتیجه flex-start باشد اما من مطمئن هستم که شما می فهمید که خط پایه چیست. خیلی زودتر توضیح دادم

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: baseline;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۵٫ auto

auto مقدار مورد منعطف flex را به مقدار ترازهای والد تنظیم می کند یا اگر عنصر والد ندارد کشش می یابد. در حالت زیر ،flex-container دارای مقدار align-itemsبازی flex-start است

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: auto;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!–selected list element–>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

با این کار تمام flex-item با شروع محور متقابل هماهنگ می شوند. مورد منعطف flex اکنون مقدار flex-start را به ارث می برد – مقدار ترازهای والد. این سبک اصلی در موارد فلکسی است که در بالا استفاده شده است. فقط برای اینکه بهتر بفهمید چه اتفاقی می افتد.

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start; /*affects all flex-items*/
    min-height: 50%;
    background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

الان تقریباً برای قسمت سرگرم کننده آماده هستید 🙂          

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

اگر می خواهید flex-item را روی عرض ثابت تنظیم کنید ، می توانید این کار را نیز انجام دهید:

li {
    flex-basis: 150px;
}

اکنون flex-item به عرض ۱۵۰ پیکسل محدود شده است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

۴٫flex shorthand

خلاصه مختصر flex به شما این امکان را می دهد که ویژگی های flex-grow ، flex-shrink و flex-based را به صورت یکجا تنظیم کنید.

در صورت مناسب بودن ، توصیه می کنم هر سه ویژگی را همزمان با استفاده از مختصر نویسی تنظیم کنید تا اینکه این کار را به صورت جداگانه انجام دهید.

li {
  flex: 0 1 auto;
}

کد بالا برابر با تنظیم سه ویژگی است: flex-grow: 0؛flex-shrink: 1؛ flex-based: auto لطفا به سفارش توجه داشته باشید. ابتدا اFlex-grow ، سپس flex-shrink و سپس flex-basis شوید. مخفف GSB ممکن است کمک کند. اگر نتوانید یکی از مقادیر را در متن کوتاه تنظیم کنید ، چه اتفاقی می افتد؟ اگر فقط مقادیر flex-grow و flex-shrink را تنظیم کنید ، flex-based به طور پیش فرض صفر می شود. به این حالت انعطاف پذیری مطلق می گویند. و وقتی فقط flex-basis را تنظیم می کنید ، یک انعطاف پذیری نسبی پیدا می کنید.

//this is an absolute flex item
li {
  flex: 1 1; //flex-basis defaults to 0;
}

//this is a relative flex item
li {
  flex-basis: 200px; //only flex-basis is set
}

می دانم چه فکری می کنی هدف از انعطاف پذیری نسبی و مطلق چیست؟ من بعداً در این مقاله به این سوال پاسخ می دهم. بیایید نگاهی به مقادیر خلاصه مختصر بسیار مفید بیندازیم.

۱. flex: 0 1 auto

//again, the 'li' represents any flex-item
li {
  flex: 0 1 auto;
}

این همان نوشتن flex: default و رفتار پیش فرض همه موارد flex است. بگذارید این را بشکنم ، فقط کمی.

flex-based روی auto تنظیم شده است ، به این معنی که عرض اولیه کالای flex به طور خودکار بر اساس اندازه محتویات تعیین می شود. متوجه شدی؟ با رفتن به ویژگی بعدی ، مقدارflex-grow صفر است. این بدان معناست که خاصیتflex-grow در عرض اولیه مورد flex دستکاری نمی کند. کلید رشد خاموش است. از آنجا که flex-grow “رشد” آیتم های فلکس را کنترل می کند و روی آن صفر است ، پس کالاهای انعطاف پذیر متناسب با صفحه نمایش “رشد” نخواهند کرد. سرانجام ، مقدار انقباض فلکس ۱ است. این گفته می شود – “در صورت لزوم ، مورد فلکس را کوچک کنید” در اینجا به نظر می رسد که وقتی روی برخی از موارد فلکس اعمال می شود ، به نظر می رسد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 0 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>

  <li>I am a simple list</li>

</ul>

</body>

</html>

توجه کنید که چگونه موارد فلکس رشد نمی کنند. عرض به طور خودکار محاسبه می شود و با تغییر اندازه مرورگر – در صورت لزوم ، کوچک می شوند.

۲. Flex: 0 0 auto

/*again, the 'li' represents any list-item*/

li {
  flex: 0 0 auto;
}

این همان flex: none است. با استفاده از همان چهارچوبی که قبلاً ایجاد کردم ، عرض به طور خودکار محاسبه می شود ، اما مورد فلکس رشد نمی کند یا کوچک نمی شود (هر دو روی صفر تنظیم می شوند). کلیدهای کوچک و بزرگ هر دو خاموش هستند. این اساساً یک عنصر با عرض ثابت است که عرض اولیه آن از اندازه محتوا در مورد فلکس برخوردار نیست. ببینید که این خلاصه کوتاه چگونه روی دو مورد فلکس تأثیر می گذارد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

یک محتوا بیشتر از دیگری است. اولین چیزی که باید توجه کنید این است که موارد فلکس دارای عرض های مختلف هستند. این از آنجا انتظار می رود که عرض ها بر اساس اندازه محتوا به طور خودکار محاسبه می شوند. اندازه مرورگر خود را تغییر اندازه دهید ، متوجه خواهید شد که موارد فلکس با عرض آن کوچک نمی شوند. آنها از عنصر والدین خارج می شوند ، و شما باید مرورگر خود را به صورت افقی پیمایش کنید تا تمام مطالب را مشاهده کنید. جای نگرانی نیست ، بعداً به شما نشان خواهم داد که چگونه با این رفتار عجیب کنار بیایید.

۳.Flex: 1 1 auto

این همان flex: auto است. از چارچوبی که قبلاً ایجاد کردم استفاده کنید. این می گوید ، “عرض اولیه را به طور خودکار محاسبه کنید ، اما متناسب با کل فضای موجود رشد کنید و در صورت لزوم کوچک شوید” کلیدهای رشد و کوچک شدن روشن شده و عرض به طور خودکار محاسبه می شود.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

این بار موارد در فضای موجود پر شده و با تغییر اندازه مرورگر ، کوچک می شوند.    

۴. Flex: “positive number”

جایی که “عدد مثبت” نشان دهنده هر عدد مثبت است (بدون نقل قول) این همان flex: “positive number” ۱ ۰ است. flex: 2 1 0 همان نوشتن flex است: ۲ که ۲ نشان دهنده هر عدد مثبت است

/*again, the 'li' represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

طبق همان چارچوبی که قبلاً ایجاد کردم ، این امر می گوید: “عرض اولیه کالای فلکس را روی صفر تنظیم کنید (ehm ، بدون عرض؟) ، آن را رشد دهید تا فضای موجود پر شود و در نهایت هر زمان که ممکن است مورد را کوچک کنید” با داشتن آیتم های انعطاف پذیر “بدون عرض” ، عرض چگونه محاسبه می شود؟ مقدار انعطاف پذیر رشد می کند و میزان “وسعت” مورد انعطاف پذیر را تعیین می کند. این مسئله از مشکل بدون عرض مراقبت می کند. استفاده از این مختصر فلکس درصورتی که بیش از یک مورد فلکس داشته باشید که عرض اولیه ، flex-based روی هر مقادیر صفر تنظیم شده باشد ، عملی تر است. ۰px آنچه واقعاً اتفاق می افتد ، این است که عرض آیتم های فلکس بر اساس نسبت مقدار فلکس رشد محاسبه می شوند. من فقط کمی آن را خراب می کنم دو مورد از لیست را که در زیر مشخص و به سبک آن در نظر گرفته شده در نظر بگیرید.

<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>

ul {
    display: flex;
}
li:nth-child(1) {
    flex: 2 1 0; /*same as just writing flex: 2*/
}

li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

  به یاد داشته باشید که تنظیم flex-grow: 1 اجازه می دهد تا مورد flex فضای موجود را پر کند. کلید رشد روشن است. در اینجا شما دو مورد فلکس دارید. یکی دارای ویژگی انعطاف پذیر ۱ و دیگری ۲ ، پس چه اتفاقی می افتد؟ کلیدهای رشد را برای هر دو مورد روشن کرده اید. با این حال ، میزان رشد متفاوت است. ۱ و ۲ هر دو برای پر کردن فضای موجود گسترش می یابند ، اما در برخی از نسبت ها. نحوه کار آن در اینجا است. مورد دوم ۲/۳ فضای موجود را اشغال می کند در حالی که مورد اول ۱/۳ را اشغال می کند. می دانید چگونه به آن رسیدم؟ نسبت ریاضیات پایه. نسبت فردی / نسبت کل امیدوارم که از آن کلاس های ریاضی صرف نظر نکرده باشید.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }
        
        li:nth-child(1) {
            flex: 2 1 0; /*same as just writing flex: 2*/
        }

        li:nth-child(2){
            flex: 1 1 0;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am one</li>   

    <li>I am two</li>                   

</ul>

</body>

</html>

می بینی چه اتفاقی می افتد؟ حتی اگر هر دو مورد فلکس دارای محتوای یک اندازه (تقریباً) باشند ، با این وجود فضاهای مختلفی را اشغال می کنند. عرض ها بر اساس اندازه محتوا نیستند ، بلکه مقادیر رشد هستند. یکی تقریباً دو برابر دیگری است.

۵٫ Align-self

خاصیت align-self یک قدم جلوتر می رود تا به ما اینقدر آیتم های فلکس را کنترل کنیم. قبلاً دیدید که چگونه ویژگی align-items در ترازبندی جمعی همه موارد flex در یک ظرف flex کمک می کند. اگر بخواهید موقعیت یک انعطاف پذیر واحد را در امتداد محور متقابل تغییر دهید ، بدون اینکه روی موارد انعطاف پذیر همسایه تأثیر بگذارد ، چه می کنید؟ اینجاست که املاک align-self به کمک شما می آید. ممکن است هر یک از این مقادیر را به خود اختصاص دهد: auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

اینها مقادیری هستند که شما قبلاً با آنها آشنا هستید ، اما به عنوان یک تازه کننده در اینجا نحوه تأثیر آنها بر یک مورد خاص هدف قرار گرفته است. در این حالت اولین مورد درون ظرف است. فلکس مورد هدف قرمز است.

۱٫ اflex-end

flex-end مورد هدف را با انتهای محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

 

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: flex-end;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۲٫ center

مرکز مورد هدف را با مرکز محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: center;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!– Selected list element –>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۳٫ stretch

کشش مورد کشش هدف را “کشش” می کند تا فضای موجود در امتداد محور عرضی را پر کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /*Select first list element(li) within the unordered list(ul)*/

        li:first-child {

            background-color: red;

            align-self: stretch;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۴٫ baseline

خط پایه مورد منعطف را در امتداد خط پایه تراز می کند. به نظر می رسد که همان نتیجه flex-start باشد اما من مطمئن هستم که شما می فهمید که خط پایه چیست. خیلی زودتر توضیح دادم

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: baseline;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۵٫ auto

auto مقدار مورد منعطف flex را به مقدار ترازهای والد تنظیم می کند یا اگر عنصر والد ندارد کشش می یابد. در حالت زیر ،flex-container دارای مقدار align-itemsبازی flex-start است

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: auto;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!–selected list element–>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

با این کار تمام flex-item با شروع محور متقابل هماهنگ می شوند. مورد منعطف flex اکنون مقدار flex-start را به ارث می برد – مقدار ترازهای والد. این سبک اصلی در موارد فلکسی است که در بالا استفاده شده است. فقط برای اینکه بهتر بفهمید چه اتفاقی می افتد.

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start; /*affects all flex-items*/
    min-height: 50%;
    background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

الان تقریباً برای قسمت سرگرم کننده آماده هستید 🙂          

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-grow: 1;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

مورد فلکس اکنون “رشد می کند” تا فضای موجود را اشغال کند. سوییچ روشن است! اگر سعی می کنید مرورگر خود را تغییر اندازه دهید ، مورد انعطاف پذیر نیز برای کاهش عرض صفحه جدید “کوچک” می شود. چرا؟ به طور پیش فرض ، خاصیت جمع شدن روی ۱ تنظیم شده است. این بدان معناست که سوئیچ flex-shrink نیز روشن است! در صورتی که هنوز با درک خود از این موضوع اطمینان ندارید ، کمی مشخصات دقیق فلکس رشد و انعطاف پذیری را بررسی می کنم. بیایید حرکت کنیم

۳٫Flex basis

به یاد می آورید که چگونه گفتم که زیباییflex-items “انعطاف پذیر” بودن است؟ خوب ، به نظر می رسد شما نیز کنترل آن را دارید. خاصیت flex-based اندازه اولیه flex-item. را مشخص می کند. قبل از اینکه ویژگی های flex-grow یا flex-shrink تنظیم شود ، اندازه آن متناسب با ظرف است یا نه. جمله قبلی واقعاً مهم است – بنابراین من لحظه ای وقت می گذارم تا آن را تقویت کنم. مقدار پیش فرض flex-based:auto است. Flex-based می تواند مقادیری را که در ویژگی عرض عادی استفاده می کنید ، بدست آورد. یعنی دpercentages || ems || rems || pixels و غیره توجه داشته باشید که وقتی می خواهید ویژگی basis را روی مقدار صفر تنظیم کنید ، از واحد نیز استفاده کنید. از flex-based استفاده کنید: ۰px نه فقط flex-based: 0 من دوباره مثال “یک لیست” را اینجا می آورم. توجه: هنگام تلاش برای تنظیم ویژگی basis بر روی مقدار صفر ، از واحد نیز استفاده کنید. به عنوان مثال، از flex-based استفاده کنید: ۰px "" نه justflex-basis: 0 ” من دوباره مثال “یک لیست” را اینجا می آورم.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex

}

li {

    padding: ۴px; /*some breathing space*/

}

به طور پیش فرض ، عرض اولیه مورد فلکس تحت تأثیر مقدار پیش فرض ، flex-based: auto قرار می گیرد. عرض مورد منعکس شده “به طور خودکار” بر اساس اندازه محتوا محاسبه می شود (و بدیهی است ، به علاوه هر padding دیگری که تنظیم می کنید).

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
          background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

این بدان معناست که اگر محتوای مورد را افزایش دهید ، به طور خودکار اندازه آن تغییر میکند تا متناسب شود.

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

اگر می خواهید flex-item را روی عرض ثابت تنظیم کنید ، می توانید این کار را نیز انجام دهید:

li {
    flex-basis: 150px;
}

اکنون flex-item به عرض ۱۵۰ پیکسل محدود شده است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

۴٫flex shorthand

خلاصه مختصر flex به شما این امکان را می دهد که ویژگی های flex-grow ، flex-shrink و flex-based را به صورت یکجا تنظیم کنید.

در صورت مناسب بودن ، توصیه می کنم هر سه ویژگی را همزمان با استفاده از مختصر نویسی تنظیم کنید تا اینکه این کار را به صورت جداگانه انجام دهید.

li {
  flex: 0 1 auto;
}

کد بالا برابر با تنظیم سه ویژگی است: flex-grow: 0؛flex-shrink: 1؛ flex-based: auto لطفا به سفارش توجه داشته باشید. ابتدا اFlex-grow ، سپس flex-shrink و سپس flex-basis شوید. مخفف GSB ممکن است کمک کند. اگر نتوانید یکی از مقادیر را در متن کوتاه تنظیم کنید ، چه اتفاقی می افتد؟ اگر فقط مقادیر flex-grow و flex-shrink را تنظیم کنید ، flex-based به طور پیش فرض صفر می شود. به این حالت انعطاف پذیری مطلق می گویند. و وقتی فقط flex-basis را تنظیم می کنید ، یک انعطاف پذیری نسبی پیدا می کنید.

//this is an absolute flex item
li {
  flex: 1 1; //flex-basis defaults to 0;
}

//this is a relative flex item
li {
  flex-basis: 200px; //only flex-basis is set
}

می دانم چه فکری می کنی هدف از انعطاف پذیری نسبی و مطلق چیست؟ من بعداً در این مقاله به این سوال پاسخ می دهم. بیایید نگاهی به مقادیر خلاصه مختصر بسیار مفید بیندازیم.

۱. flex: 0 1 auto

//again, the 'li' represents any flex-item
li {
  flex: 0 1 auto;
}

این همان نوشتن flex: default و رفتار پیش فرض همه موارد flex است. بگذارید این را بشکنم ، فقط کمی.

flex-based روی auto تنظیم شده است ، به این معنی که عرض اولیه کالای flex به طور خودکار بر اساس اندازه محتویات تعیین می شود. متوجه شدی؟ با رفتن به ویژگی بعدی ، مقدارflex-grow صفر است. این بدان معناست که خاصیتflex-grow در عرض اولیه مورد flex دستکاری نمی کند. کلید رشد خاموش است. از آنجا که flex-grow “رشد” آیتم های فلکس را کنترل می کند و روی آن صفر است ، پس کالاهای انعطاف پذیر متناسب با صفحه نمایش “رشد” نخواهند کرد. سرانجام ، مقدار انقباض فلکس ۱ است. این گفته می شود – “در صورت لزوم ، مورد فلکس را کوچک کنید” در اینجا به نظر می رسد که وقتی روی برخی از موارد فلکس اعمال می شود ، به نظر می رسد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 0 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>

  <li>I am a simple list</li>

</ul>

</body>

</html>

توجه کنید که چگونه موارد فلکس رشد نمی کنند. عرض به طور خودکار محاسبه می شود و با تغییر اندازه مرورگر – در صورت لزوم ، کوچک می شوند.

۲. Flex: 0 0 auto

/*again, the 'li' represents any list-item*/

li {
  flex: 0 0 auto;
}

این همان flex: none است. با استفاده از همان چهارچوبی که قبلاً ایجاد کردم ، عرض به طور خودکار محاسبه می شود ، اما مورد فلکس رشد نمی کند یا کوچک نمی شود (هر دو روی صفر تنظیم می شوند). کلیدهای کوچک و بزرگ هر دو خاموش هستند. این اساساً یک عنصر با عرض ثابت است که عرض اولیه آن از اندازه محتوا در مورد فلکس برخوردار نیست. ببینید که این خلاصه کوتاه چگونه روی دو مورد فلکس تأثیر می گذارد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

یک محتوا بیشتر از دیگری است. اولین چیزی که باید توجه کنید این است که موارد فلکس دارای عرض های مختلف هستند. این از آنجا انتظار می رود که عرض ها بر اساس اندازه محتوا به طور خودکار محاسبه می شوند. اندازه مرورگر خود را تغییر اندازه دهید ، متوجه خواهید شد که موارد فلکس با عرض آن کوچک نمی شوند. آنها از عنصر والدین خارج می شوند ، و شما باید مرورگر خود را به صورت افقی پیمایش کنید تا تمام مطالب را مشاهده کنید. جای نگرانی نیست ، بعداً به شما نشان خواهم داد که چگونه با این رفتار عجیب کنار بیایید.

۳.Flex: 1 1 auto

این همان flex: auto است. از چارچوبی که قبلاً ایجاد کردم استفاده کنید. این می گوید ، “عرض اولیه را به طور خودکار محاسبه کنید ، اما متناسب با کل فضای موجود رشد کنید و در صورت لزوم کوچک شوید” کلیدهای رشد و کوچک شدن روشن شده و عرض به طور خودکار محاسبه می شود.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

این بار موارد در فضای موجود پر شده و با تغییر اندازه مرورگر ، کوچک می شوند.    

۴. Flex: “positive number”

جایی که “عدد مثبت” نشان دهنده هر عدد مثبت است (بدون نقل قول) این همان flex: “positive number” ۱ ۰ است. flex: 2 1 0 همان نوشتن flex است: ۲ که ۲ نشان دهنده هر عدد مثبت است

/*again, the 'li' represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

طبق همان چارچوبی که قبلاً ایجاد کردم ، این امر می گوید: “عرض اولیه کالای فلکس را روی صفر تنظیم کنید (ehm ، بدون عرض؟) ، آن را رشد دهید تا فضای موجود پر شود و در نهایت هر زمان که ممکن است مورد را کوچک کنید” با داشتن آیتم های انعطاف پذیر “بدون عرض” ، عرض چگونه محاسبه می شود؟ مقدار انعطاف پذیر رشد می کند و میزان “وسعت” مورد انعطاف پذیر را تعیین می کند. این مسئله از مشکل بدون عرض مراقبت می کند. استفاده از این مختصر فلکس درصورتی که بیش از یک مورد فلکس داشته باشید که عرض اولیه ، flex-based روی هر مقادیر صفر تنظیم شده باشد ، عملی تر است. ۰px آنچه واقعاً اتفاق می افتد ، این است که عرض آیتم های فلکس بر اساس نسبت مقدار فلکس رشد محاسبه می شوند. من فقط کمی آن را خراب می کنم دو مورد از لیست را که در زیر مشخص و به سبک آن در نظر گرفته شده در نظر بگیرید.

<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>

ul {
    display: flex;
}
li:nth-child(1) {
    flex: 2 1 0; /*same as just writing flex: 2*/
}

li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

  به یاد داشته باشید که تنظیم flex-grow: 1 اجازه می دهد تا مورد flex فضای موجود را پر کند. کلید رشد روشن است. در اینجا شما دو مورد فلکس دارید. یکی دارای ویژگی انعطاف پذیر ۱ و دیگری ۲ ، پس چه اتفاقی می افتد؟ کلیدهای رشد را برای هر دو مورد روشن کرده اید. با این حال ، میزان رشد متفاوت است. ۱ و ۲ هر دو برای پر کردن فضای موجود گسترش می یابند ، اما در برخی از نسبت ها. نحوه کار آن در اینجا است. مورد دوم ۲/۳ فضای موجود را اشغال می کند در حالی که مورد اول ۱/۳ را اشغال می کند. می دانید چگونه به آن رسیدم؟ نسبت ریاضیات پایه. نسبت فردی / نسبت کل امیدوارم که از آن کلاس های ریاضی صرف نظر نکرده باشید.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }
        
        li:nth-child(1) {
            flex: 2 1 0; /*same as just writing flex: 2*/
        }

        li:nth-child(2){
            flex: 1 1 0;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am one</li>   

    <li>I am two</li>                   

</ul>

</body>

</html>

می بینی چه اتفاقی می افتد؟ حتی اگر هر دو مورد فلکس دارای محتوای یک اندازه (تقریباً) باشند ، با این وجود فضاهای مختلفی را اشغال می کنند. عرض ها بر اساس اندازه محتوا نیستند ، بلکه مقادیر رشد هستند. یکی تقریباً دو برابر دیگری است.

۵٫ Align-self

خاصیت align-self یک قدم جلوتر می رود تا به ما اینقدر آیتم های فلکس را کنترل کنیم. قبلاً دیدید که چگونه ویژگی align-items در ترازبندی جمعی همه موارد flex در یک ظرف flex کمک می کند. اگر بخواهید موقعیت یک انعطاف پذیر واحد را در امتداد محور متقابل تغییر دهید ، بدون اینکه روی موارد انعطاف پذیر همسایه تأثیر بگذارد ، چه می کنید؟ اینجاست که املاک align-self به کمک شما می آید. ممکن است هر یک از این مقادیر را به خود اختصاص دهد: auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

اینها مقادیری هستند که شما قبلاً با آنها آشنا هستید ، اما به عنوان یک تازه کننده در اینجا نحوه تأثیر آنها بر یک مورد خاص هدف قرار گرفته است. در این حالت اولین مورد درون ظرف است. فلکس مورد هدف قرمز است.

۱٫ اflex-end

flex-end مورد هدف را با انتهای محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

 

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: flex-end;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۲٫ center

مرکز مورد هدف را با مرکز محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: center;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!– Selected list element –>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۳٫ stretch

کشش مورد کشش هدف را “کشش” می کند تا فضای موجود در امتداد محور عرضی را پر کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /*Select first list element(li) within the unordered list(ul)*/

        li:first-child {

            background-color: red;

            align-self: stretch;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۴٫ baseline

خط پایه مورد منعطف را در امتداد خط پایه تراز می کند. به نظر می رسد که همان نتیجه flex-start باشد اما من مطمئن هستم که شما می فهمید که خط پایه چیست. خیلی زودتر توضیح دادم

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: baseline;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۵٫ auto

auto مقدار مورد منعطف flex را به مقدار ترازهای والد تنظیم می کند یا اگر عنصر والد ندارد کشش می یابد. در حالت زیر ،flex-container دارای مقدار align-itemsبازی flex-start است

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: auto;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!–selected list element–>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

با این کار تمام flex-item با شروع محور متقابل هماهنگ می شوند. مورد منعطف flex اکنون مقدار flex-start را به ارث می برد – مقدار ترازهای والد. این سبک اصلی در موارد فلکسی است که در بالا استفاده شده است. فقط برای اینکه بهتر بفهمید چه اتفاقی می افتد.

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start; /*affects all flex-items*/
    min-height: 50%;
    background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

الان تقریباً برای قسمت سرگرم کننده آماده هستید 🙂          

CSS:
ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

به طور پیش فرض ، خاصیت flex-grow روی ۰ تنظیم شده است. از نظر ضمنی ، مورد flex نمی تواند متناسب با کل فضای موجود رشد کند. مقدار ۰ مانند سوئیچ “خاموش کردن” است. کلید انعطاف پذیر خاموش است. با این حال ، اگر مقدارflex-grow را به ۱ تغییر دهید ، آنچه اتفاق می افتد اینجا است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-grow: 1;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

مورد فلکس اکنون “رشد می کند” تا فضای موجود را اشغال کند. سوییچ روشن است! اگر سعی می کنید مرورگر خود را تغییر اندازه دهید ، مورد انعطاف پذیر نیز برای کاهش عرض صفحه جدید “کوچک” می شود. چرا؟ به طور پیش فرض ، خاصیت جمع شدن روی ۱ تنظیم شده است. این بدان معناست که سوئیچ flex-shrink نیز روشن است! در صورتی که هنوز با درک خود از این موضوع اطمینان ندارید ، کمی مشخصات دقیق فلکس رشد و انعطاف پذیری را بررسی می کنم. بیایید حرکت کنیم

۳٫Flex basis

به یاد می آورید که چگونه گفتم که زیباییflex-items “انعطاف پذیر” بودن است؟ خوب ، به نظر می رسد شما نیز کنترل آن را دارید. خاصیت flex-based اندازه اولیه flex-item. را مشخص می کند. قبل از اینکه ویژگی های flex-grow یا flex-shrink تنظیم شود ، اندازه آن متناسب با ظرف است یا نه. جمله قبلی واقعاً مهم است – بنابراین من لحظه ای وقت می گذارم تا آن را تقویت کنم. مقدار پیش فرض flex-based:auto است. Flex-based می تواند مقادیری را که در ویژگی عرض عادی استفاده می کنید ، بدست آورد. یعنی دpercentages || ems || rems || pixels و غیره توجه داشته باشید که وقتی می خواهید ویژگی basis را روی مقدار صفر تنظیم کنید ، از واحد نیز استفاده کنید. از flex-based استفاده کنید: ۰px نه فقط flex-based: 0 من دوباره مثال “یک لیست” را اینجا می آورم. توجه: هنگام تلاش برای تنظیم ویژگی basis بر روی مقدار صفر ، از واحد نیز استفاده کنید. به عنوان مثال، از flex-based استفاده کنید: ۰px "" نه justflex-basis: 0 ” من دوباره مثال “یک لیست” را اینجا می آورم.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex

}

li {

    padding: ۴px; /*some breathing space*/

}

به طور پیش فرض ، عرض اولیه مورد فلکس تحت تأثیر مقدار پیش فرض ، flex-based: auto قرار می گیرد. عرض مورد منعکس شده “به طور خودکار” بر اساس اندازه محتوا محاسبه می شود (و بدیهی است ، به علاوه هر padding دیگری که تنظیم می کنید).

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
          background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

این بدان معناست که اگر محتوای مورد را افزایش دهید ، به طور خودکار اندازه آن تغییر میکند تا متناسب شود.

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

اگر می خواهید flex-item را روی عرض ثابت تنظیم کنید ، می توانید این کار را نیز انجام دهید:

li {
    flex-basis: 150px;
}

اکنون flex-item به عرض ۱۵۰ پیکسل محدود شده است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

۴٫flex shorthand

خلاصه مختصر flex به شما این امکان را می دهد که ویژگی های flex-grow ، flex-shrink و flex-based را به صورت یکجا تنظیم کنید.

در صورت مناسب بودن ، توصیه می کنم هر سه ویژگی را همزمان با استفاده از مختصر نویسی تنظیم کنید تا اینکه این کار را به صورت جداگانه انجام دهید.

li {
  flex: 0 1 auto;
}

کد بالا برابر با تنظیم سه ویژگی است: flex-grow: 0؛flex-shrink: 1؛ flex-based: auto لطفا به سفارش توجه داشته باشید. ابتدا اFlex-grow ، سپس flex-shrink و سپس flex-basis شوید. مخفف GSB ممکن است کمک کند. اگر نتوانید یکی از مقادیر را در متن کوتاه تنظیم کنید ، چه اتفاقی می افتد؟ اگر فقط مقادیر flex-grow و flex-shrink را تنظیم کنید ، flex-based به طور پیش فرض صفر می شود. به این حالت انعطاف پذیری مطلق می گویند. و وقتی فقط flex-basis را تنظیم می کنید ، یک انعطاف پذیری نسبی پیدا می کنید.

//this is an absolute flex item
li {
  flex: 1 1; //flex-basis defaults to 0;
}

//this is a relative flex item
li {
  flex-basis: 200px; //only flex-basis is set
}

می دانم چه فکری می کنی هدف از انعطاف پذیری نسبی و مطلق چیست؟ من بعداً در این مقاله به این سوال پاسخ می دهم. بیایید نگاهی به مقادیر خلاصه مختصر بسیار مفید بیندازیم.

۱. flex: 0 1 auto

//again, the 'li' represents any flex-item
li {
  flex: 0 1 auto;
}

این همان نوشتن flex: default و رفتار پیش فرض همه موارد flex است. بگذارید این را بشکنم ، فقط کمی.

flex-based روی auto تنظیم شده است ، به این معنی که عرض اولیه کالای flex به طور خودکار بر اساس اندازه محتویات تعیین می شود. متوجه شدی؟ با رفتن به ویژگی بعدی ، مقدارflex-grow صفر است. این بدان معناست که خاصیتflex-grow در عرض اولیه مورد flex دستکاری نمی کند. کلید رشد خاموش است. از آنجا که flex-grow “رشد” آیتم های فلکس را کنترل می کند و روی آن صفر است ، پس کالاهای انعطاف پذیر متناسب با صفحه نمایش “رشد” نخواهند کرد. سرانجام ، مقدار انقباض فلکس ۱ است. این گفته می شود – “در صورت لزوم ، مورد فلکس را کوچک کنید” در اینجا به نظر می رسد که وقتی روی برخی از موارد فلکس اعمال می شود ، به نظر می رسد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 0 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>

  <li>I am a simple list</li>

</ul>

</body>

</html>

توجه کنید که چگونه موارد فلکس رشد نمی کنند. عرض به طور خودکار محاسبه می شود و با تغییر اندازه مرورگر – در صورت لزوم ، کوچک می شوند.

۲. Flex: 0 0 auto

/*again, the 'li' represents any list-item*/

li {
  flex: 0 0 auto;
}

این همان flex: none است. با استفاده از همان چهارچوبی که قبلاً ایجاد کردم ، عرض به طور خودکار محاسبه می شود ، اما مورد فلکس رشد نمی کند یا کوچک نمی شود (هر دو روی صفر تنظیم می شوند). کلیدهای کوچک و بزرگ هر دو خاموش هستند. این اساساً یک عنصر با عرض ثابت است که عرض اولیه آن از اندازه محتوا در مورد فلکس برخوردار نیست. ببینید که این خلاصه کوتاه چگونه روی دو مورد فلکس تأثیر می گذارد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

یک محتوا بیشتر از دیگری است. اولین چیزی که باید توجه کنید این است که موارد فلکس دارای عرض های مختلف هستند. این از آنجا انتظار می رود که عرض ها بر اساس اندازه محتوا به طور خودکار محاسبه می شوند. اندازه مرورگر خود را تغییر اندازه دهید ، متوجه خواهید شد که موارد فلکس با عرض آن کوچک نمی شوند. آنها از عنصر والدین خارج می شوند ، و شما باید مرورگر خود را به صورت افقی پیمایش کنید تا تمام مطالب را مشاهده کنید. جای نگرانی نیست ، بعداً به شما نشان خواهم داد که چگونه با این رفتار عجیب کنار بیایید.

۳.Flex: 1 1 auto

این همان flex: auto است. از چارچوبی که قبلاً ایجاد کردم استفاده کنید. این می گوید ، “عرض اولیه را به طور خودکار محاسبه کنید ، اما متناسب با کل فضای موجود رشد کنید و در صورت لزوم کوچک شوید” کلیدهای رشد و کوچک شدن روشن شده و عرض به طور خودکار محاسبه می شود.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

این بار موارد در فضای موجود پر شده و با تغییر اندازه مرورگر ، کوچک می شوند.    

۴. Flex: “positive number”

جایی که “عدد مثبت” نشان دهنده هر عدد مثبت است (بدون نقل قول) این همان flex: “positive number” ۱ ۰ است. flex: 2 1 0 همان نوشتن flex است: ۲ که ۲ نشان دهنده هر عدد مثبت است

/*again, the 'li' represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

طبق همان چارچوبی که قبلاً ایجاد کردم ، این امر می گوید: “عرض اولیه کالای فلکس را روی صفر تنظیم کنید (ehm ، بدون عرض؟) ، آن را رشد دهید تا فضای موجود پر شود و در نهایت هر زمان که ممکن است مورد را کوچک کنید” با داشتن آیتم های انعطاف پذیر “بدون عرض” ، عرض چگونه محاسبه می شود؟ مقدار انعطاف پذیر رشد می کند و میزان “وسعت” مورد انعطاف پذیر را تعیین می کند. این مسئله از مشکل بدون عرض مراقبت می کند. استفاده از این مختصر فلکس درصورتی که بیش از یک مورد فلکس داشته باشید که عرض اولیه ، flex-based روی هر مقادیر صفر تنظیم شده باشد ، عملی تر است. ۰px آنچه واقعاً اتفاق می افتد ، این است که عرض آیتم های فلکس بر اساس نسبت مقدار فلکس رشد محاسبه می شوند. من فقط کمی آن را خراب می کنم دو مورد از لیست را که در زیر مشخص و به سبک آن در نظر گرفته شده در نظر بگیرید.

<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>

ul {
    display: flex;
}
li:nth-child(1) {
    flex: 2 1 0; /*same as just writing flex: 2*/
}

li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

  به یاد داشته باشید که تنظیم flex-grow: 1 اجازه می دهد تا مورد flex فضای موجود را پر کند. کلید رشد روشن است. در اینجا شما دو مورد فلکس دارید. یکی دارای ویژگی انعطاف پذیر ۱ و دیگری ۲ ، پس چه اتفاقی می افتد؟ کلیدهای رشد را برای هر دو مورد روشن کرده اید. با این حال ، میزان رشد متفاوت است. ۱ و ۲ هر دو برای پر کردن فضای موجود گسترش می یابند ، اما در برخی از نسبت ها. نحوه کار آن در اینجا است. مورد دوم ۲/۳ فضای موجود را اشغال می کند در حالی که مورد اول ۱/۳ را اشغال می کند. می دانید چگونه به آن رسیدم؟ نسبت ریاضیات پایه. نسبت فردی / نسبت کل امیدوارم که از آن کلاس های ریاضی صرف نظر نکرده باشید.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }
        
        li:nth-child(1) {
            flex: 2 1 0; /*same as just writing flex: 2*/
        }

        li:nth-child(2){
            flex: 1 1 0;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am one</li>   

    <li>I am two</li>                   

</ul>

</body>

</html>

می بینی چه اتفاقی می افتد؟ حتی اگر هر دو مورد فلکس دارای محتوای یک اندازه (تقریباً) باشند ، با این وجود فضاهای مختلفی را اشغال می کنند. عرض ها بر اساس اندازه محتوا نیستند ، بلکه مقادیر رشد هستند. یکی تقریباً دو برابر دیگری است.

۵٫ Align-self

خاصیت align-self یک قدم جلوتر می رود تا به ما اینقدر آیتم های فلکس را کنترل کنیم. قبلاً دیدید که چگونه ویژگی align-items در ترازبندی جمعی همه موارد flex در یک ظرف flex کمک می کند. اگر بخواهید موقعیت یک انعطاف پذیر واحد را در امتداد محور متقابل تغییر دهید ، بدون اینکه روی موارد انعطاف پذیر همسایه تأثیر بگذارد ، چه می کنید؟ اینجاست که املاک align-self به کمک شما می آید. ممکن است هر یک از این مقادیر را به خود اختصاص دهد: auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

اینها مقادیری هستند که شما قبلاً با آنها آشنا هستید ، اما به عنوان یک تازه کننده در اینجا نحوه تأثیر آنها بر یک مورد خاص هدف قرار گرفته است. در این حالت اولین مورد درون ظرف است. فلکس مورد هدف قرمز است.

۱٫ اflex-end

flex-end مورد هدف را با انتهای محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

 

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: flex-end;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۲٫ center

مرکز مورد هدف را با مرکز محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: center;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!– Selected list element –>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۳٫ stretch

کشش مورد کشش هدف را “کشش” می کند تا فضای موجود در امتداد محور عرضی را پر کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /*Select first list element(li) within the unordered list(ul)*/

        li:first-child {

            background-color: red;

            align-self: stretch;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۴٫ baseline

خط پایه مورد منعطف را در امتداد خط پایه تراز می کند. به نظر می رسد که همان نتیجه flex-start باشد اما من مطمئن هستم که شما می فهمید که خط پایه چیست. خیلی زودتر توضیح دادم

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: baseline;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۵٫ auto

auto مقدار مورد منعطف flex را به مقدار ترازهای والد تنظیم می کند یا اگر عنصر والد ندارد کشش می یابد. در حالت زیر ،flex-container دارای مقدار align-itemsبازی flex-start است

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: auto;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!–selected list element–>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

با این کار تمام flex-item با شروع محور متقابل هماهنگ می شوند. مورد منعطف flex اکنون مقدار flex-start را به ارث می برد – مقدار ترازهای والد. این سبک اصلی در موارد فلکسی است که در بالا استفاده شده است. فقط برای اینکه بهتر بفهمید چه اتفاقی می افتد.

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start; /*affects all flex-items*/
    min-height: 50%;
    background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

الان تقریباً برای قسمت سرگرم کننده آماده هستید 🙂          

li:nth-child(1) {
            order: 1
        }

li:nth-child(3) {
            order: 1
        }

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

موارد هنوز از کمترین تا بالاترین مقدار ترتیب مرتب شده اند. این بار ، flex-item 3 آخرین به نظر می رسد زیرا بعد از flex-item 1 در پرونده منبع (سند HTML) ظاهر می شود. ترتیب مجدد براساس موقعیتهای موجود در پرونده مبدا انجام می شود ، زمانی که دو یا چند مورد فلکس دارای ارزش ترتیب یکسان باشند. این توضیحات زیادی بود. من می خواهم به یک ویزگی دیگر بروم.

۲٫ فلکس رشد می کند و انعطاف پذیر می شود

زیبایی موارد انعطاف پذیر “انعطاف پذیر” بودن است. ویژگی های flex-shrink وflex-grow به ما امکان می دهد تا حتی بیشتر با این “انعطاف پذیری” بازی کنیم. ویژگی هایflex-grow و flex-shrink ، کنترل می کند که در صورت وجود فضای اضافی ، مقدار انعطاف پذیر باید “رشد” کند (گسترش یابد) یا اگر فضای اضافی وجود نداشته باشد ، “کوچک شود”. آنها ممکن است مقادیری از ۰ تا هر عدد مثبت را به خود اختصاص دهند. ۰ || عدد مثبت بگذارید این را توضیح دهم. لیست ساده غیر مرتب شده زیر را در نظر بگیرید. این فقط یک مورد از لیست را شامل می شود.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex;

}

با کمی استایل بیشتر ، اینگونه به نظر می رسد.

CSS:
ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

به طور پیش فرض ، خاصیت flex-grow روی ۰ تنظیم شده است. از نظر ضمنی ، مورد flex نمی تواند متناسب با کل فضای موجود رشد کند. مقدار ۰ مانند سوئیچ “خاموش کردن” است. کلید انعطاف پذیر خاموش است. با این حال ، اگر مقدارflex-grow را به ۱ تغییر دهید ، آنچه اتفاق می افتد اینجا است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-grow: 1;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

مورد فلکس اکنون “رشد می کند” تا فضای موجود را اشغال کند. سوییچ روشن است! اگر سعی می کنید مرورگر خود را تغییر اندازه دهید ، مورد انعطاف پذیر نیز برای کاهش عرض صفحه جدید “کوچک” می شود. چرا؟ به طور پیش فرض ، خاصیت جمع شدن روی ۱ تنظیم شده است. این بدان معناست که سوئیچ flex-shrink نیز روشن است! در صورتی که هنوز با درک خود از این موضوع اطمینان ندارید ، کمی مشخصات دقیق فلکس رشد و انعطاف پذیری را بررسی می کنم. بیایید حرکت کنیم

۳٫Flex basis

به یاد می آورید که چگونه گفتم که زیباییflex-items “انعطاف پذیر” بودن است؟ خوب ، به نظر می رسد شما نیز کنترل آن را دارید. خاصیت flex-based اندازه اولیه flex-item. را مشخص می کند. قبل از اینکه ویژگی های flex-grow یا flex-shrink تنظیم شود ، اندازه آن متناسب با ظرف است یا نه. جمله قبلی واقعاً مهم است – بنابراین من لحظه ای وقت می گذارم تا آن را تقویت کنم. مقدار پیش فرض flex-based:auto است. Flex-based می تواند مقادیری را که در ویژگی عرض عادی استفاده می کنید ، بدست آورد. یعنی دpercentages || ems || rems || pixels و غیره توجه داشته باشید که وقتی می خواهید ویژگی basis را روی مقدار صفر تنظیم کنید ، از واحد نیز استفاده کنید. از flex-based استفاده کنید: ۰px نه فقط flex-based: 0 من دوباره مثال “یک لیست” را اینجا می آورم. توجه: هنگام تلاش برای تنظیم ویژگی basis بر روی مقدار صفر ، از واحد نیز استفاده کنید. به عنوان مثال، از flex-based استفاده کنید: ۰px "" نه justflex-basis: 0 ” من دوباره مثال “یک لیست” را اینجا می آورم.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex

}

li {

    padding: ۴px; /*some breathing space*/

}

به طور پیش فرض ، عرض اولیه مورد فلکس تحت تأثیر مقدار پیش فرض ، flex-based: auto قرار می گیرد. عرض مورد منعکس شده “به طور خودکار” بر اساس اندازه محتوا محاسبه می شود (و بدیهی است ، به علاوه هر padding دیگری که تنظیم می کنید).

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
          background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

این بدان معناست که اگر محتوای مورد را افزایش دهید ، به طور خودکار اندازه آن تغییر میکند تا متناسب شود.

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

اگر می خواهید flex-item را روی عرض ثابت تنظیم کنید ، می توانید این کار را نیز انجام دهید:

li {
    flex-basis: 150px;
}

اکنون flex-item به عرض ۱۵۰ پیکسل محدود شده است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

۴٫flex shorthand

خلاصه مختصر flex به شما این امکان را می دهد که ویژگی های flex-grow ، flex-shrink و flex-based را به صورت یکجا تنظیم کنید.

در صورت مناسب بودن ، توصیه می کنم هر سه ویژگی را همزمان با استفاده از مختصر نویسی تنظیم کنید تا اینکه این کار را به صورت جداگانه انجام دهید.

li {
  flex: 0 1 auto;
}

کد بالا برابر با تنظیم سه ویژگی است: flex-grow: 0؛flex-shrink: 1؛ flex-based: auto لطفا به سفارش توجه داشته باشید. ابتدا اFlex-grow ، سپس flex-shrink و سپس flex-basis شوید. مخفف GSB ممکن است کمک کند. اگر نتوانید یکی از مقادیر را در متن کوتاه تنظیم کنید ، چه اتفاقی می افتد؟ اگر فقط مقادیر flex-grow و flex-shrink را تنظیم کنید ، flex-based به طور پیش فرض صفر می شود. به این حالت انعطاف پذیری مطلق می گویند. و وقتی فقط flex-basis را تنظیم می کنید ، یک انعطاف پذیری نسبی پیدا می کنید.

//this is an absolute flex item
li {
  flex: 1 1; //flex-basis defaults to 0;
}

//this is a relative flex item
li {
  flex-basis: 200px; //only flex-basis is set
}

می دانم چه فکری می کنی هدف از انعطاف پذیری نسبی و مطلق چیست؟ من بعداً در این مقاله به این سوال پاسخ می دهم. بیایید نگاهی به مقادیر خلاصه مختصر بسیار مفید بیندازیم.

۱. flex: 0 1 auto

//again, the 'li' represents any flex-item
li {
  flex: 0 1 auto;
}

این همان نوشتن flex: default و رفتار پیش فرض همه موارد flex است. بگذارید این را بشکنم ، فقط کمی.

flex-based روی auto تنظیم شده است ، به این معنی که عرض اولیه کالای flex به طور خودکار بر اساس اندازه محتویات تعیین می شود. متوجه شدی؟ با رفتن به ویژگی بعدی ، مقدارflex-grow صفر است. این بدان معناست که خاصیتflex-grow در عرض اولیه مورد flex دستکاری نمی کند. کلید رشد خاموش است. از آنجا که flex-grow “رشد” آیتم های فلکس را کنترل می کند و روی آن صفر است ، پس کالاهای انعطاف پذیر متناسب با صفحه نمایش “رشد” نخواهند کرد. سرانجام ، مقدار انقباض فلکس ۱ است. این گفته می شود – “در صورت لزوم ، مورد فلکس را کوچک کنید” در اینجا به نظر می رسد که وقتی روی برخی از موارد فلکس اعمال می شود ، به نظر می رسد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 0 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>

  <li>I am a simple list</li>

</ul>

</body>

</html>

توجه کنید که چگونه موارد فلکس رشد نمی کنند. عرض به طور خودکار محاسبه می شود و با تغییر اندازه مرورگر – در صورت لزوم ، کوچک می شوند.

۲. Flex: 0 0 auto

/*again, the 'li' represents any list-item*/

li {
  flex: 0 0 auto;
}

این همان flex: none است. با استفاده از همان چهارچوبی که قبلاً ایجاد کردم ، عرض به طور خودکار محاسبه می شود ، اما مورد فلکس رشد نمی کند یا کوچک نمی شود (هر دو روی صفر تنظیم می شوند). کلیدهای کوچک و بزرگ هر دو خاموش هستند. این اساساً یک عنصر با عرض ثابت است که عرض اولیه آن از اندازه محتوا در مورد فلکس برخوردار نیست. ببینید که این خلاصه کوتاه چگونه روی دو مورد فلکس تأثیر می گذارد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

یک محتوا بیشتر از دیگری است. اولین چیزی که باید توجه کنید این است که موارد فلکس دارای عرض های مختلف هستند. این از آنجا انتظار می رود که عرض ها بر اساس اندازه محتوا به طور خودکار محاسبه می شوند. اندازه مرورگر خود را تغییر اندازه دهید ، متوجه خواهید شد که موارد فلکس با عرض آن کوچک نمی شوند. آنها از عنصر والدین خارج می شوند ، و شما باید مرورگر خود را به صورت افقی پیمایش کنید تا تمام مطالب را مشاهده کنید. جای نگرانی نیست ، بعداً به شما نشان خواهم داد که چگونه با این رفتار عجیب کنار بیایید.

۳.Flex: 1 1 auto

این همان flex: auto است. از چارچوبی که قبلاً ایجاد کردم استفاده کنید. این می گوید ، “عرض اولیه را به طور خودکار محاسبه کنید ، اما متناسب با کل فضای موجود رشد کنید و در صورت لزوم کوچک شوید” کلیدهای رشد و کوچک شدن روشن شده و عرض به طور خودکار محاسبه می شود.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

این بار موارد در فضای موجود پر شده و با تغییر اندازه مرورگر ، کوچک می شوند.    

۴. Flex: “positive number”

جایی که “عدد مثبت” نشان دهنده هر عدد مثبت است (بدون نقل قول) این همان flex: “positive number” ۱ ۰ است. flex: 2 1 0 همان نوشتن flex است: ۲ که ۲ نشان دهنده هر عدد مثبت است

/*again, the 'li' represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

طبق همان چارچوبی که قبلاً ایجاد کردم ، این امر می گوید: “عرض اولیه کالای فلکس را روی صفر تنظیم کنید (ehm ، بدون عرض؟) ، آن را رشد دهید تا فضای موجود پر شود و در نهایت هر زمان که ممکن است مورد را کوچک کنید” با داشتن آیتم های انعطاف پذیر “بدون عرض” ، عرض چگونه محاسبه می شود؟ مقدار انعطاف پذیر رشد می کند و میزان “وسعت” مورد انعطاف پذیر را تعیین می کند. این مسئله از مشکل بدون عرض مراقبت می کند. استفاده از این مختصر فلکس درصورتی که بیش از یک مورد فلکس داشته باشید که عرض اولیه ، flex-based روی هر مقادیر صفر تنظیم شده باشد ، عملی تر است. ۰px آنچه واقعاً اتفاق می افتد ، این است که عرض آیتم های فلکس بر اساس نسبت مقدار فلکس رشد محاسبه می شوند. من فقط کمی آن را خراب می کنم دو مورد از لیست را که در زیر مشخص و به سبک آن در نظر گرفته شده در نظر بگیرید.

<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>

ul {
    display: flex;
}
li:nth-child(1) {
    flex: 2 1 0; /*same as just writing flex: 2*/
}

li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

  به یاد داشته باشید که تنظیم flex-grow: 1 اجازه می دهد تا مورد flex فضای موجود را پر کند. کلید رشد روشن است. در اینجا شما دو مورد فلکس دارید. یکی دارای ویژگی انعطاف پذیر ۱ و دیگری ۲ ، پس چه اتفاقی می افتد؟ کلیدهای رشد را برای هر دو مورد روشن کرده اید. با این حال ، میزان رشد متفاوت است. ۱ و ۲ هر دو برای پر کردن فضای موجود گسترش می یابند ، اما در برخی از نسبت ها. نحوه کار آن در اینجا است. مورد دوم ۲/۳ فضای موجود را اشغال می کند در حالی که مورد اول ۱/۳ را اشغال می کند. می دانید چگونه به آن رسیدم؟ نسبت ریاضیات پایه. نسبت فردی / نسبت کل امیدوارم که از آن کلاس های ریاضی صرف نظر نکرده باشید.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }
        
        li:nth-child(1) {
            flex: 2 1 0; /*same as just writing flex: 2*/
        }

        li:nth-child(2){
            flex: 1 1 0;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am one</li>   

    <li>I am two</li>                   

</ul>

</body>

</html>

می بینی چه اتفاقی می افتد؟ حتی اگر هر دو مورد فلکس دارای محتوای یک اندازه (تقریباً) باشند ، با این وجود فضاهای مختلفی را اشغال می کنند. عرض ها بر اساس اندازه محتوا نیستند ، بلکه مقادیر رشد هستند. یکی تقریباً دو برابر دیگری است.

۵٫ Align-self

خاصیت align-self یک قدم جلوتر می رود تا به ما اینقدر آیتم های فلکس را کنترل کنیم. قبلاً دیدید که چگونه ویژگی align-items در ترازبندی جمعی همه موارد flex در یک ظرف flex کمک می کند. اگر بخواهید موقعیت یک انعطاف پذیر واحد را در امتداد محور متقابل تغییر دهید ، بدون اینکه روی موارد انعطاف پذیر همسایه تأثیر بگذارد ، چه می کنید؟ اینجاست که املاک align-self به کمک شما می آید. ممکن است هر یک از این مقادیر را به خود اختصاص دهد: auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

اینها مقادیری هستند که شما قبلاً با آنها آشنا هستید ، اما به عنوان یک تازه کننده در اینجا نحوه تأثیر آنها بر یک مورد خاص هدف قرار گرفته است. در این حالت اولین مورد درون ظرف است. فلکس مورد هدف قرمز است.

۱٫ اflex-end

flex-end مورد هدف را با انتهای محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

 

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: flex-end;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۲٫ center

مرکز مورد هدف را با مرکز محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: center;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!– Selected list element –>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۳٫ stretch

کشش مورد کشش هدف را “کشش” می کند تا فضای موجود در امتداد محور عرضی را پر کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /*Select first list element(li) within the unordered list(ul)*/

        li:first-child {

            background-color: red;

            align-self: stretch;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۴٫ baseline

خط پایه مورد منعطف را در امتداد خط پایه تراز می کند. به نظر می رسد که همان نتیجه flex-start باشد اما من مطمئن هستم که شما می فهمید که خط پایه چیست. خیلی زودتر توضیح دادم

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: baseline;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۵٫ auto

auto مقدار مورد منعطف flex را به مقدار ترازهای والد تنظیم می کند یا اگر عنصر والد ندارد کشش می یابد. در حالت زیر ،flex-container دارای مقدار align-itemsبازی flex-start است

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: auto;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!–selected list element–>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

با این کار تمام flex-item با شروع محور متقابل هماهنگ می شوند. مورد منعطف flex اکنون مقدار flex-start را به ارث می برد – مقدار ترازهای والد. این سبک اصلی در موارد فلکسی است که در بالا استفاده شده است. فقط برای اینکه بهتر بفهمید چه اتفاقی می افتد.

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start; /*affects all flex-items*/
    min-height: 50%;
    background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

الان تقریباً برای قسمت سرگرم کننده آماده هستید 🙂          

/*apply to the 1st list element, n=1*/
li:nth-child(1) {
            order: 1
        }

li:nth-child(2) {
            order: 2
        }

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

و چه اتفاقی می افتد که دو مورد فلکس دارای ارزش ترتیب یکسان باشند؟ در مثال زیر ، مقادیر فلکس ۱ و ۳ همان ترتیب را دارند

li:nth-child(1) {

order: ۱;

}

li:nth-child(3) {

        order: ۱;

    }

li:nth-child(1) {
            order: 1
        }

li:nth-child(3) {
            order: 1
        }

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

موارد هنوز از کمترین تا بالاترین مقدار ترتیب مرتب شده اند. این بار ، flex-item 3 آخرین به نظر می رسد زیرا بعد از flex-item 1 در پرونده منبع (سند HTML) ظاهر می شود. ترتیب مجدد براساس موقعیتهای موجود در پرونده مبدا انجام می شود ، زمانی که دو یا چند مورد فلکس دارای ارزش ترتیب یکسان باشند. این توضیحات زیادی بود. من می خواهم به یک ویزگی دیگر بروم.

۲٫ فلکس رشد می کند و انعطاف پذیر می شود

زیبایی موارد انعطاف پذیر “انعطاف پذیر” بودن است. ویژگی های flex-shrink وflex-grow به ما امکان می دهد تا حتی بیشتر با این “انعطاف پذیری” بازی کنیم. ویژگی هایflex-grow و flex-shrink ، کنترل می کند که در صورت وجود فضای اضافی ، مقدار انعطاف پذیر باید “رشد” کند (گسترش یابد) یا اگر فضای اضافی وجود نداشته باشد ، “کوچک شود”. آنها ممکن است مقادیری از ۰ تا هر عدد مثبت را به خود اختصاص دهند. ۰ || عدد مثبت بگذارید این را توضیح دهم. لیست ساده غیر مرتب شده زیر را در نظر بگیرید. این فقط یک مورد از لیست را شامل می شود.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex;

}

با کمی استایل بیشتر ، اینگونه به نظر می رسد.

CSS:
ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

به طور پیش فرض ، خاصیت flex-grow روی ۰ تنظیم شده است. از نظر ضمنی ، مورد flex نمی تواند متناسب با کل فضای موجود رشد کند. مقدار ۰ مانند سوئیچ “خاموش کردن” است. کلید انعطاف پذیر خاموش است. با این حال ، اگر مقدارflex-grow را به ۱ تغییر دهید ، آنچه اتفاق می افتد اینجا است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-grow: 1;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

مورد فلکس اکنون “رشد می کند” تا فضای موجود را اشغال کند. سوییچ روشن است! اگر سعی می کنید مرورگر خود را تغییر اندازه دهید ، مورد انعطاف پذیر نیز برای کاهش عرض صفحه جدید “کوچک” می شود. چرا؟ به طور پیش فرض ، خاصیت جمع شدن روی ۱ تنظیم شده است. این بدان معناست که سوئیچ flex-shrink نیز روشن است! در صورتی که هنوز با درک خود از این موضوع اطمینان ندارید ، کمی مشخصات دقیق فلکس رشد و انعطاف پذیری را بررسی می کنم. بیایید حرکت کنیم

۳٫Flex basis

به یاد می آورید که چگونه گفتم که زیباییflex-items “انعطاف پذیر” بودن است؟ خوب ، به نظر می رسد شما نیز کنترل آن را دارید. خاصیت flex-based اندازه اولیه flex-item. را مشخص می کند. قبل از اینکه ویژگی های flex-grow یا flex-shrink تنظیم شود ، اندازه آن متناسب با ظرف است یا نه. جمله قبلی واقعاً مهم است – بنابراین من لحظه ای وقت می گذارم تا آن را تقویت کنم. مقدار پیش فرض flex-based:auto است. Flex-based می تواند مقادیری را که در ویژگی عرض عادی استفاده می کنید ، بدست آورد. یعنی دpercentages || ems || rems || pixels و غیره توجه داشته باشید که وقتی می خواهید ویژگی basis را روی مقدار صفر تنظیم کنید ، از واحد نیز استفاده کنید. از flex-based استفاده کنید: ۰px نه فقط flex-based: 0 من دوباره مثال “یک لیست” را اینجا می آورم. توجه: هنگام تلاش برای تنظیم ویژگی basis بر روی مقدار صفر ، از واحد نیز استفاده کنید. به عنوان مثال، از flex-based استفاده کنید: ۰px "" نه justflex-basis: 0 ” من دوباره مثال “یک لیست” را اینجا می آورم.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex

}

li {

    padding: ۴px; /*some breathing space*/

}

به طور پیش فرض ، عرض اولیه مورد فلکس تحت تأثیر مقدار پیش فرض ، flex-based: auto قرار می گیرد. عرض مورد منعکس شده “به طور خودکار” بر اساس اندازه محتوا محاسبه می شود (و بدیهی است ، به علاوه هر padding دیگری که تنظیم می کنید).

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
          background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

این بدان معناست که اگر محتوای مورد را افزایش دهید ، به طور خودکار اندازه آن تغییر میکند تا متناسب شود.

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

اگر می خواهید flex-item را روی عرض ثابت تنظیم کنید ، می توانید این کار را نیز انجام دهید:

li {
    flex-basis: 150px;
}

اکنون flex-item به عرض ۱۵۰ پیکسل محدود شده است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

۴٫flex shorthand

خلاصه مختصر flex به شما این امکان را می دهد که ویژگی های flex-grow ، flex-shrink و flex-based را به صورت یکجا تنظیم کنید.

در صورت مناسب بودن ، توصیه می کنم هر سه ویژگی را همزمان با استفاده از مختصر نویسی تنظیم کنید تا اینکه این کار را به صورت جداگانه انجام دهید.

li {
  flex: 0 1 auto;
}

کد بالا برابر با تنظیم سه ویژگی است: flex-grow: 0؛flex-shrink: 1؛ flex-based: auto لطفا به سفارش توجه داشته باشید. ابتدا اFlex-grow ، سپس flex-shrink و سپس flex-basis شوید. مخفف GSB ممکن است کمک کند. اگر نتوانید یکی از مقادیر را در متن کوتاه تنظیم کنید ، چه اتفاقی می افتد؟ اگر فقط مقادیر flex-grow و flex-shrink را تنظیم کنید ، flex-based به طور پیش فرض صفر می شود. به این حالت انعطاف پذیری مطلق می گویند. و وقتی فقط flex-basis را تنظیم می کنید ، یک انعطاف پذیری نسبی پیدا می کنید.

//this is an absolute flex item
li {
  flex: 1 1; //flex-basis defaults to 0;
}

//this is a relative flex item
li {
  flex-basis: 200px; //only flex-basis is set
}

می دانم چه فکری می کنی هدف از انعطاف پذیری نسبی و مطلق چیست؟ من بعداً در این مقاله به این سوال پاسخ می دهم. بیایید نگاهی به مقادیر خلاصه مختصر بسیار مفید بیندازیم.

۱. flex: 0 1 auto

//again, the 'li' represents any flex-item
li {
  flex: 0 1 auto;
}

این همان نوشتن flex: default و رفتار پیش فرض همه موارد flex است. بگذارید این را بشکنم ، فقط کمی.

flex-based روی auto تنظیم شده است ، به این معنی که عرض اولیه کالای flex به طور خودکار بر اساس اندازه محتویات تعیین می شود. متوجه شدی؟ با رفتن به ویژگی بعدی ، مقدارflex-grow صفر است. این بدان معناست که خاصیتflex-grow در عرض اولیه مورد flex دستکاری نمی کند. کلید رشد خاموش است. از آنجا که flex-grow “رشد” آیتم های فلکس را کنترل می کند و روی آن صفر است ، پس کالاهای انعطاف پذیر متناسب با صفحه نمایش “رشد” نخواهند کرد. سرانجام ، مقدار انقباض فلکس ۱ است. این گفته می شود – “در صورت لزوم ، مورد فلکس را کوچک کنید” در اینجا به نظر می رسد که وقتی روی برخی از موارد فلکس اعمال می شود ، به نظر می رسد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 0 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>

  <li>I am a simple list</li>

</ul>

</body>

</html>

توجه کنید که چگونه موارد فلکس رشد نمی کنند. عرض به طور خودکار محاسبه می شود و با تغییر اندازه مرورگر – در صورت لزوم ، کوچک می شوند.

۲. Flex: 0 0 auto

/*again, the 'li' represents any list-item*/

li {
  flex: 0 0 auto;
}

این همان flex: none است. با استفاده از همان چهارچوبی که قبلاً ایجاد کردم ، عرض به طور خودکار محاسبه می شود ، اما مورد فلکس رشد نمی کند یا کوچک نمی شود (هر دو روی صفر تنظیم می شوند). کلیدهای کوچک و بزرگ هر دو خاموش هستند. این اساساً یک عنصر با عرض ثابت است که عرض اولیه آن از اندازه محتوا در مورد فلکس برخوردار نیست. ببینید که این خلاصه کوتاه چگونه روی دو مورد فلکس تأثیر می گذارد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

یک محتوا بیشتر از دیگری است. اولین چیزی که باید توجه کنید این است که موارد فلکس دارای عرض های مختلف هستند. این از آنجا انتظار می رود که عرض ها بر اساس اندازه محتوا به طور خودکار محاسبه می شوند. اندازه مرورگر خود را تغییر اندازه دهید ، متوجه خواهید شد که موارد فلکس با عرض آن کوچک نمی شوند. آنها از عنصر والدین خارج می شوند ، و شما باید مرورگر خود را به صورت افقی پیمایش کنید تا تمام مطالب را مشاهده کنید. جای نگرانی نیست ، بعداً به شما نشان خواهم داد که چگونه با این رفتار عجیب کنار بیایید.

۳.Flex: 1 1 auto

این همان flex: auto است. از چارچوبی که قبلاً ایجاد کردم استفاده کنید. این می گوید ، “عرض اولیه را به طور خودکار محاسبه کنید ، اما متناسب با کل فضای موجود رشد کنید و در صورت لزوم کوچک شوید” کلیدهای رشد و کوچک شدن روشن شده و عرض به طور خودکار محاسبه می شود.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

این بار موارد در فضای موجود پر شده و با تغییر اندازه مرورگر ، کوچک می شوند.    

۴. Flex: “positive number”

جایی که “عدد مثبت” نشان دهنده هر عدد مثبت است (بدون نقل قول) این همان flex: “positive number” ۱ ۰ است. flex: 2 1 0 همان نوشتن flex است: ۲ که ۲ نشان دهنده هر عدد مثبت است

/*again, the 'li' represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

طبق همان چارچوبی که قبلاً ایجاد کردم ، این امر می گوید: “عرض اولیه کالای فلکس را روی صفر تنظیم کنید (ehm ، بدون عرض؟) ، آن را رشد دهید تا فضای موجود پر شود و در نهایت هر زمان که ممکن است مورد را کوچک کنید” با داشتن آیتم های انعطاف پذیر “بدون عرض” ، عرض چگونه محاسبه می شود؟ مقدار انعطاف پذیر رشد می کند و میزان “وسعت” مورد انعطاف پذیر را تعیین می کند. این مسئله از مشکل بدون عرض مراقبت می کند. استفاده از این مختصر فلکس درصورتی که بیش از یک مورد فلکس داشته باشید که عرض اولیه ، flex-based روی هر مقادیر صفر تنظیم شده باشد ، عملی تر است. ۰px آنچه واقعاً اتفاق می افتد ، این است که عرض آیتم های فلکس بر اساس نسبت مقدار فلکس رشد محاسبه می شوند. من فقط کمی آن را خراب می کنم دو مورد از لیست را که در زیر مشخص و به سبک آن در نظر گرفته شده در نظر بگیرید.

<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>

ul {
    display: flex;
}
li:nth-child(1) {
    flex: 2 1 0; /*same as just writing flex: 2*/
}

li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

  به یاد داشته باشید که تنظیم flex-grow: 1 اجازه می دهد تا مورد flex فضای موجود را پر کند. کلید رشد روشن است. در اینجا شما دو مورد فلکس دارید. یکی دارای ویژگی انعطاف پذیر ۱ و دیگری ۲ ، پس چه اتفاقی می افتد؟ کلیدهای رشد را برای هر دو مورد روشن کرده اید. با این حال ، میزان رشد متفاوت است. ۱ و ۲ هر دو برای پر کردن فضای موجود گسترش می یابند ، اما در برخی از نسبت ها. نحوه کار آن در اینجا است. مورد دوم ۲/۳ فضای موجود را اشغال می کند در حالی که مورد اول ۱/۳ را اشغال می کند. می دانید چگونه به آن رسیدم؟ نسبت ریاضیات پایه. نسبت فردی / نسبت کل امیدوارم که از آن کلاس های ریاضی صرف نظر نکرده باشید.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }
        
        li:nth-child(1) {
            flex: 2 1 0; /*same as just writing flex: 2*/
        }

        li:nth-child(2){
            flex: 1 1 0;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am one</li>   

    <li>I am two</li>                   

</ul>

</body>

</html>

می بینی چه اتفاقی می افتد؟ حتی اگر هر دو مورد فلکس دارای محتوای یک اندازه (تقریباً) باشند ، با این وجود فضاهای مختلفی را اشغال می کنند. عرض ها بر اساس اندازه محتوا نیستند ، بلکه مقادیر رشد هستند. یکی تقریباً دو برابر دیگری است.

۵٫ Align-self

خاصیت align-self یک قدم جلوتر می رود تا به ما اینقدر آیتم های فلکس را کنترل کنیم. قبلاً دیدید که چگونه ویژگی align-items در ترازبندی جمعی همه موارد flex در یک ظرف flex کمک می کند. اگر بخواهید موقعیت یک انعطاف پذیر واحد را در امتداد محور متقابل تغییر دهید ، بدون اینکه روی موارد انعطاف پذیر همسایه تأثیر بگذارد ، چه می کنید؟ اینجاست که املاک align-self به کمک شما می آید. ممکن است هر یک از این مقادیر را به خود اختصاص دهد: auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

اینها مقادیری هستند که شما قبلاً با آنها آشنا هستید ، اما به عنوان یک تازه کننده در اینجا نحوه تأثیر آنها بر یک مورد خاص هدف قرار گرفته است. در این حالت اولین مورد درون ظرف است. فلکس مورد هدف قرمز است.

۱٫ اflex-end

flex-end مورد هدف را با انتهای محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

 

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: flex-end;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۲٫ center

مرکز مورد هدف را با مرکز محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: center;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!– Selected list element –>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۳٫ stretch

کشش مورد کشش هدف را “کشش” می کند تا فضای موجود در امتداد محور عرضی را پر کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /*Select first list element(li) within the unordered list(ul)*/

        li:first-child {

            background-color: red;

            align-self: stretch;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۴٫ baseline

خط پایه مورد منعطف را در امتداد خط پایه تراز می کند. به نظر می رسد که همان نتیجه flex-start باشد اما من مطمئن هستم که شما می فهمید که خط پایه چیست. خیلی زودتر توضیح دادم

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: baseline;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۵٫ auto

auto مقدار مورد منعطف flex را به مقدار ترازهای والد تنظیم می کند یا اگر عنصر والد ندارد کشش می یابد. در حالت زیر ،flex-container دارای مقدار align-itemsبازی flex-start است

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: auto;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!–selected list element–>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

با این کار تمام flex-item با شروع محور متقابل هماهنگ می شوند. مورد منعطف flex اکنون مقدار flex-start را به ارث می برد – مقدار ترازهای والد. این سبک اصلی در موارد فلکسی است که در بالا استفاده شده است. فقط برای اینکه بهتر بفهمید چه اتفاقی می افتد.

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start; /*affects all flex-items*/
    min-height: 50%;
    background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

الان تقریباً برای قسمت سرگرم کننده آماده هستید 🙂          

/*select first li element within the ul */
    li:nth-child(1) {
        order: 1; /*give it a value higher than 0. Remember it's ```order:0``` for other flex-items by default*/
    }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

  عناصر فلکس ۲ ، ۳ و ۴ دارای مقدار ترتیب ۰٫ هستند ، بنابراین ، ترتیب منبع HTML حفظ می شود – هیچ تغییری در نمایشگر پیش فرض اعمال نمی شود. اگر مقدار ترتیب ۲ را به flex-item 2 بدهید ، چه می کنید؟ بله درست حدس زدید. از پشته هم بالا می رود. اکنون نشان دهنده مورد flex با بالاترین مقدار ترتیب است.

/*apply to the 1st list element, n=1*/
li:nth-child(1) {
            order: 1
        }

li:nth-child(2) {
            order: 2
        }

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

و چه اتفاقی می افتد که دو مورد فلکس دارای ارزش ترتیب یکسان باشند؟ در مثال زیر ، مقادیر فلکس ۱ و ۳ همان ترتیب را دارند

li:nth-child(1) {

order: ۱;

}

li:nth-child(3) {

        order: ۱;

    }

li:nth-child(1) {
            order: 1
        }

li:nth-child(3) {
            order: 1
        }

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

موارد هنوز از کمترین تا بالاترین مقدار ترتیب مرتب شده اند. این بار ، flex-item 3 آخرین به نظر می رسد زیرا بعد از flex-item 1 در پرونده منبع (سند HTML) ظاهر می شود. ترتیب مجدد براساس موقعیتهای موجود در پرونده مبدا انجام می شود ، زمانی که دو یا چند مورد فلکس دارای ارزش ترتیب یکسان باشند. این توضیحات زیادی بود. من می خواهم به یک ویزگی دیگر بروم.

۲٫ فلکس رشد می کند و انعطاف پذیر می شود

زیبایی موارد انعطاف پذیر “انعطاف پذیر” بودن است. ویژگی های flex-shrink وflex-grow به ما امکان می دهد تا حتی بیشتر با این “انعطاف پذیری” بازی کنیم. ویژگی هایflex-grow و flex-shrink ، کنترل می کند که در صورت وجود فضای اضافی ، مقدار انعطاف پذیر باید “رشد” کند (گسترش یابد) یا اگر فضای اضافی وجود نداشته باشد ، “کوچک شود”. آنها ممکن است مقادیری از ۰ تا هر عدد مثبت را به خود اختصاص دهند. ۰ || عدد مثبت بگذارید این را توضیح دهم. لیست ساده غیر مرتب شده زیر را در نظر بگیرید. این فقط یک مورد از لیست را شامل می شود.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex;

}

با کمی استایل بیشتر ، اینگونه به نظر می رسد.

CSS:
ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

به طور پیش فرض ، خاصیت flex-grow روی ۰ تنظیم شده است. از نظر ضمنی ، مورد flex نمی تواند متناسب با کل فضای موجود رشد کند. مقدار ۰ مانند سوئیچ “خاموش کردن” است. کلید انعطاف پذیر خاموش است. با این حال ، اگر مقدارflex-grow را به ۱ تغییر دهید ، آنچه اتفاق می افتد اینجا است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-grow: 1;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

مورد فلکس اکنون “رشد می کند” تا فضای موجود را اشغال کند. سوییچ روشن است! اگر سعی می کنید مرورگر خود را تغییر اندازه دهید ، مورد انعطاف پذیر نیز برای کاهش عرض صفحه جدید “کوچک” می شود. چرا؟ به طور پیش فرض ، خاصیت جمع شدن روی ۱ تنظیم شده است. این بدان معناست که سوئیچ flex-shrink نیز روشن است! در صورتی که هنوز با درک خود از این موضوع اطمینان ندارید ، کمی مشخصات دقیق فلکس رشد و انعطاف پذیری را بررسی می کنم. بیایید حرکت کنیم

۳٫Flex basis

به یاد می آورید که چگونه گفتم که زیباییflex-items “انعطاف پذیر” بودن است؟ خوب ، به نظر می رسد شما نیز کنترل آن را دارید. خاصیت flex-based اندازه اولیه flex-item. را مشخص می کند. قبل از اینکه ویژگی های flex-grow یا flex-shrink تنظیم شود ، اندازه آن متناسب با ظرف است یا نه. جمله قبلی واقعاً مهم است – بنابراین من لحظه ای وقت می گذارم تا آن را تقویت کنم. مقدار پیش فرض flex-based:auto است. Flex-based می تواند مقادیری را که در ویژگی عرض عادی استفاده می کنید ، بدست آورد. یعنی دpercentages || ems || rems || pixels و غیره توجه داشته باشید که وقتی می خواهید ویژگی basis را روی مقدار صفر تنظیم کنید ، از واحد نیز استفاده کنید. از flex-based استفاده کنید: ۰px نه فقط flex-based: 0 من دوباره مثال “یک لیست” را اینجا می آورم. توجه: هنگام تلاش برای تنظیم ویژگی basis بر روی مقدار صفر ، از واحد نیز استفاده کنید. به عنوان مثال، از flex-based استفاده کنید: ۰px "" نه justflex-basis: 0 ” من دوباره مثال “یک لیست” را اینجا می آورم.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex

}

li {

    padding: ۴px; /*some breathing space*/

}

به طور پیش فرض ، عرض اولیه مورد فلکس تحت تأثیر مقدار پیش فرض ، flex-based: auto قرار می گیرد. عرض مورد منعکس شده “به طور خودکار” بر اساس اندازه محتوا محاسبه می شود (و بدیهی است ، به علاوه هر padding دیگری که تنظیم می کنید).

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
          background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

این بدان معناست که اگر محتوای مورد را افزایش دهید ، به طور خودکار اندازه آن تغییر میکند تا متناسب شود.

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

اگر می خواهید flex-item را روی عرض ثابت تنظیم کنید ، می توانید این کار را نیز انجام دهید:

li {
    flex-basis: 150px;
}

اکنون flex-item به عرض ۱۵۰ پیکسل محدود شده است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

۴٫flex shorthand

خلاصه مختصر flex به شما این امکان را می دهد که ویژگی های flex-grow ، flex-shrink و flex-based را به صورت یکجا تنظیم کنید.

در صورت مناسب بودن ، توصیه می کنم هر سه ویژگی را همزمان با استفاده از مختصر نویسی تنظیم کنید تا اینکه این کار را به صورت جداگانه انجام دهید.

li {
  flex: 0 1 auto;
}

کد بالا برابر با تنظیم سه ویژگی است: flex-grow: 0؛flex-shrink: 1؛ flex-based: auto لطفا به سفارش توجه داشته باشید. ابتدا اFlex-grow ، سپس flex-shrink و سپس flex-basis شوید. مخفف GSB ممکن است کمک کند. اگر نتوانید یکی از مقادیر را در متن کوتاه تنظیم کنید ، چه اتفاقی می افتد؟ اگر فقط مقادیر flex-grow و flex-shrink را تنظیم کنید ، flex-based به طور پیش فرض صفر می شود. به این حالت انعطاف پذیری مطلق می گویند. و وقتی فقط flex-basis را تنظیم می کنید ، یک انعطاف پذیری نسبی پیدا می کنید.

//this is an absolute flex item
li {
  flex: 1 1; //flex-basis defaults to 0;
}

//this is a relative flex item
li {
  flex-basis: 200px; //only flex-basis is set
}

می دانم چه فکری می کنی هدف از انعطاف پذیری نسبی و مطلق چیست؟ من بعداً در این مقاله به این سوال پاسخ می دهم. بیایید نگاهی به مقادیر خلاصه مختصر بسیار مفید بیندازیم.

۱. flex: 0 1 auto

//again, the 'li' represents any flex-item
li {
  flex: 0 1 auto;
}

این همان نوشتن flex: default و رفتار پیش فرض همه موارد flex است. بگذارید این را بشکنم ، فقط کمی.

flex-based روی auto تنظیم شده است ، به این معنی که عرض اولیه کالای flex به طور خودکار بر اساس اندازه محتویات تعیین می شود. متوجه شدی؟ با رفتن به ویژگی بعدی ، مقدارflex-grow صفر است. این بدان معناست که خاصیتflex-grow در عرض اولیه مورد flex دستکاری نمی کند. کلید رشد خاموش است. از آنجا که flex-grow “رشد” آیتم های فلکس را کنترل می کند و روی آن صفر است ، پس کالاهای انعطاف پذیر متناسب با صفحه نمایش “رشد” نخواهند کرد. سرانجام ، مقدار انقباض فلکس ۱ است. این گفته می شود – “در صورت لزوم ، مورد فلکس را کوچک کنید” در اینجا به نظر می رسد که وقتی روی برخی از موارد فلکس اعمال می شود ، به نظر می رسد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 0 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>

  <li>I am a simple list</li>

</ul>

</body>

</html>

توجه کنید که چگونه موارد فلکس رشد نمی کنند. عرض به طور خودکار محاسبه می شود و با تغییر اندازه مرورگر – در صورت لزوم ، کوچک می شوند.

۲. Flex: 0 0 auto

/*again, the 'li' represents any list-item*/

li {
  flex: 0 0 auto;
}

این همان flex: none است. با استفاده از همان چهارچوبی که قبلاً ایجاد کردم ، عرض به طور خودکار محاسبه می شود ، اما مورد فلکس رشد نمی کند یا کوچک نمی شود (هر دو روی صفر تنظیم می شوند). کلیدهای کوچک و بزرگ هر دو خاموش هستند. این اساساً یک عنصر با عرض ثابت است که عرض اولیه آن از اندازه محتوا در مورد فلکس برخوردار نیست. ببینید که این خلاصه کوتاه چگونه روی دو مورد فلکس تأثیر می گذارد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

یک محتوا بیشتر از دیگری است. اولین چیزی که باید توجه کنید این است که موارد فلکس دارای عرض های مختلف هستند. این از آنجا انتظار می رود که عرض ها بر اساس اندازه محتوا به طور خودکار محاسبه می شوند. اندازه مرورگر خود را تغییر اندازه دهید ، متوجه خواهید شد که موارد فلکس با عرض آن کوچک نمی شوند. آنها از عنصر والدین خارج می شوند ، و شما باید مرورگر خود را به صورت افقی پیمایش کنید تا تمام مطالب را مشاهده کنید. جای نگرانی نیست ، بعداً به شما نشان خواهم داد که چگونه با این رفتار عجیب کنار بیایید.

۳.Flex: 1 1 auto

این همان flex: auto است. از چارچوبی که قبلاً ایجاد کردم استفاده کنید. این می گوید ، “عرض اولیه را به طور خودکار محاسبه کنید ، اما متناسب با کل فضای موجود رشد کنید و در صورت لزوم کوچک شوید” کلیدهای رشد و کوچک شدن روشن شده و عرض به طور خودکار محاسبه می شود.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

این بار موارد در فضای موجود پر شده و با تغییر اندازه مرورگر ، کوچک می شوند.    

۴. Flex: “positive number”

جایی که “عدد مثبت” نشان دهنده هر عدد مثبت است (بدون نقل قول) این همان flex: “positive number” ۱ ۰ است. flex: 2 1 0 همان نوشتن flex است: ۲ که ۲ نشان دهنده هر عدد مثبت است

/*again, the 'li' represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

طبق همان چارچوبی که قبلاً ایجاد کردم ، این امر می گوید: “عرض اولیه کالای فلکس را روی صفر تنظیم کنید (ehm ، بدون عرض؟) ، آن را رشد دهید تا فضای موجود پر شود و در نهایت هر زمان که ممکن است مورد را کوچک کنید” با داشتن آیتم های انعطاف پذیر “بدون عرض” ، عرض چگونه محاسبه می شود؟ مقدار انعطاف پذیر رشد می کند و میزان “وسعت” مورد انعطاف پذیر را تعیین می کند. این مسئله از مشکل بدون عرض مراقبت می کند. استفاده از این مختصر فلکس درصورتی که بیش از یک مورد فلکس داشته باشید که عرض اولیه ، flex-based روی هر مقادیر صفر تنظیم شده باشد ، عملی تر است. ۰px آنچه واقعاً اتفاق می افتد ، این است که عرض آیتم های فلکس بر اساس نسبت مقدار فلکس رشد محاسبه می شوند. من فقط کمی آن را خراب می کنم دو مورد از لیست را که در زیر مشخص و به سبک آن در نظر گرفته شده در نظر بگیرید.

<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>

ul {
    display: flex;
}
li:nth-child(1) {
    flex: 2 1 0; /*same as just writing flex: 2*/
}

li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

  به یاد داشته باشید که تنظیم flex-grow: 1 اجازه می دهد تا مورد flex فضای موجود را پر کند. کلید رشد روشن است. در اینجا شما دو مورد فلکس دارید. یکی دارای ویژگی انعطاف پذیر ۱ و دیگری ۲ ، پس چه اتفاقی می افتد؟ کلیدهای رشد را برای هر دو مورد روشن کرده اید. با این حال ، میزان رشد متفاوت است. ۱ و ۲ هر دو برای پر کردن فضای موجود گسترش می یابند ، اما در برخی از نسبت ها. نحوه کار آن در اینجا است. مورد دوم ۲/۳ فضای موجود را اشغال می کند در حالی که مورد اول ۱/۳ را اشغال می کند. می دانید چگونه به آن رسیدم؟ نسبت ریاضیات پایه. نسبت فردی / نسبت کل امیدوارم که از آن کلاس های ریاضی صرف نظر نکرده باشید.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }
        
        li:nth-child(1) {
            flex: 2 1 0; /*same as just writing flex: 2*/
        }

        li:nth-child(2){
            flex: 1 1 0;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am one</li>   

    <li>I am two</li>                   

</ul>

</body>

</html>

می بینی چه اتفاقی می افتد؟ حتی اگر هر دو مورد فلکس دارای محتوای یک اندازه (تقریباً) باشند ، با این وجود فضاهای مختلفی را اشغال می کنند. عرض ها بر اساس اندازه محتوا نیستند ، بلکه مقادیر رشد هستند. یکی تقریباً دو برابر دیگری است.

۵٫ Align-self

خاصیت align-self یک قدم جلوتر می رود تا به ما اینقدر آیتم های فلکس را کنترل کنیم. قبلاً دیدید که چگونه ویژگی align-items در ترازبندی جمعی همه موارد flex در یک ظرف flex کمک می کند. اگر بخواهید موقعیت یک انعطاف پذیر واحد را در امتداد محور متقابل تغییر دهید ، بدون اینکه روی موارد انعطاف پذیر همسایه تأثیر بگذارد ، چه می کنید؟ اینجاست که املاک align-self به کمک شما می آید. ممکن است هر یک از این مقادیر را به خود اختصاص دهد: auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

اینها مقادیری هستند که شما قبلاً با آنها آشنا هستید ، اما به عنوان یک تازه کننده در اینجا نحوه تأثیر آنها بر یک مورد خاص هدف قرار گرفته است. در این حالت اولین مورد درون ظرف است. فلکس مورد هدف قرمز است.

۱٫ اflex-end

flex-end مورد هدف را با انتهای محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

 

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: flex-end;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۲٫ center

مرکز مورد هدف را با مرکز محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: center;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!– Selected list element –>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۳٫ stretch

کشش مورد کشش هدف را “کشش” می کند تا فضای موجود در امتداد محور عرضی را پر کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /*Select first list element(li) within the unordered list(ul)*/

        li:first-child {

            background-color: red;

            align-self: stretch;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۴٫ baseline

خط پایه مورد منعطف را در امتداد خط پایه تراز می کند. به نظر می رسد که همان نتیجه flex-start باشد اما من مطمئن هستم که شما می فهمید که خط پایه چیست. خیلی زودتر توضیح دادم

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: baseline;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۵٫ auto

auto مقدار مورد منعطف flex را به مقدار ترازهای والد تنظیم می کند یا اگر عنصر والد ندارد کشش می یابد. در حالت زیر ،flex-container دارای مقدار align-itemsبازی flex-start است

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: auto;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!–selected list element–>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

با این کار تمام flex-item با شروع محور متقابل هماهنگ می شوند. مورد منعطف flex اکنون مقدار flex-start را به ارث می برد – مقدار ترازهای والد. این سبک اصلی در موارد فلکسی است که در بالا استفاده شده است. فقط برای اینکه بهتر بفهمید چه اتفاقی می افتد.

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start; /*affects all flex-items*/
    min-height: 50%;
    background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

الان تقریباً برای قسمت سرگرم کننده آماده هستید 🙂          

CSS:
ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

موارد Flex دقیقاً همانطور که در ترتیب منبع HTML مشخص شده است ، نمایش داده می شوند. مورد ۱ ، سپس ۲ ، ۳ و ۴ را انعطاف دهید. اگر به هر دلیلی بخواهید flex-item 1 بدون تغییر ترتیب منبع در سند HTML آخر از همه ظاهر شود چه می کنید؟ “بدون تغییر ترتیب منبع” به این معنی است که شما مجبور به انجام این کار نیستید:

<ul>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>1</li>

</ul>

سپس موارد فلکس از کمترین به بالاترین مرتب می شوند. فراموش نکنید که به طور پیش فرض ، لیست موارد ۲ ، ۳ و ۴ همه ترتیب سفارش ۰ (صفر) دارند. اکنون ، flex-item 1 دارای ارزش سفارش ۱ است.   عناصر فلکس ۲ ، ۳ و ۴ دارای مقدار سفارش ۰٫ هستند ، بنابراین ، ترتیب منبع HTML حفظ می شود – هیچ تغییری در نمایشگر پیش فرض اعمال نمی شود. اگر مقدار سفارش ۲ را به flex-item 2 بدهید ، چه می کنید؟

/*select first li element within the ul */
    li:nth-child(1) {
        order: 1; /*give it a value higher than 0. Remember it's ```order:0``` for other flex-items by default*/
    }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

  عناصر فلکس ۲ ، ۳ و ۴ دارای مقدار ترتیب ۰٫ هستند ، بنابراین ، ترتیب منبع HTML حفظ می شود – هیچ تغییری در نمایشگر پیش فرض اعمال نمی شود. اگر مقدار ترتیب ۲ را به flex-item 2 بدهید ، چه می کنید؟ بله درست حدس زدید. از پشته هم بالا می رود. اکنون نشان دهنده مورد flex با بالاترین مقدار ترتیب است.

/*apply to the 1st list element, n=1*/
li:nth-child(1) {
            order: 1
        }

li:nth-child(2) {
            order: 2
        }

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

و چه اتفاقی می افتد که دو مورد فلکس دارای ارزش ترتیب یکسان باشند؟ در مثال زیر ، مقادیر فلکس ۱ و ۳ همان ترتیب را دارند

li:nth-child(1) {

order: ۱;

}

li:nth-child(3) {

        order: ۱;

    }

li:nth-child(1) {
            order: 1
        }

li:nth-child(3) {
            order: 1
        }

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

موارد هنوز از کمترین تا بالاترین مقدار ترتیب مرتب شده اند. این بار ، flex-item 3 آخرین به نظر می رسد زیرا بعد از flex-item 1 در پرونده منبع (سند HTML) ظاهر می شود. ترتیب مجدد براساس موقعیتهای موجود در پرونده مبدا انجام می شود ، زمانی که دو یا چند مورد فلکس دارای ارزش ترتیب یکسان باشند. این توضیحات زیادی بود. من می خواهم به یک ویزگی دیگر بروم.

۲٫ فلکس رشد می کند و انعطاف پذیر می شود

زیبایی موارد انعطاف پذیر “انعطاف پذیر” بودن است. ویژگی های flex-shrink وflex-grow به ما امکان می دهد تا حتی بیشتر با این “انعطاف پذیری” بازی کنیم. ویژگی هایflex-grow و flex-shrink ، کنترل می کند که در صورت وجود فضای اضافی ، مقدار انعطاف پذیر باید “رشد” کند (گسترش یابد) یا اگر فضای اضافی وجود نداشته باشد ، “کوچک شود”. آنها ممکن است مقادیری از ۰ تا هر عدد مثبت را به خود اختصاص دهند. ۰ || عدد مثبت بگذارید این را توضیح دهم. لیست ساده غیر مرتب شده زیر را در نظر بگیرید. این فقط یک مورد از لیست را شامل می شود.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex;

}

با کمی استایل بیشتر ، اینگونه به نظر می رسد.

CSS:
ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

به طور پیش فرض ، خاصیت flex-grow روی ۰ تنظیم شده است. از نظر ضمنی ، مورد flex نمی تواند متناسب با کل فضای موجود رشد کند. مقدار ۰ مانند سوئیچ “خاموش کردن” است. کلید انعطاف پذیر خاموش است. با این حال ، اگر مقدارflex-grow را به ۱ تغییر دهید ، آنچه اتفاق می افتد اینجا است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-grow: 1;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

مورد فلکس اکنون “رشد می کند” تا فضای موجود را اشغال کند. سوییچ روشن است! اگر سعی می کنید مرورگر خود را تغییر اندازه دهید ، مورد انعطاف پذیر نیز برای کاهش عرض صفحه جدید “کوچک” می شود. چرا؟ به طور پیش فرض ، خاصیت جمع شدن روی ۱ تنظیم شده است. این بدان معناست که سوئیچ flex-shrink نیز روشن است! در صورتی که هنوز با درک خود از این موضوع اطمینان ندارید ، کمی مشخصات دقیق فلکس رشد و انعطاف پذیری را بررسی می کنم. بیایید حرکت کنیم

۳٫Flex basis

به یاد می آورید که چگونه گفتم که زیباییflex-items “انعطاف پذیر” بودن است؟ خوب ، به نظر می رسد شما نیز کنترل آن را دارید. خاصیت flex-based اندازه اولیه flex-item. را مشخص می کند. قبل از اینکه ویژگی های flex-grow یا flex-shrink تنظیم شود ، اندازه آن متناسب با ظرف است یا نه. جمله قبلی واقعاً مهم است – بنابراین من لحظه ای وقت می گذارم تا آن را تقویت کنم. مقدار پیش فرض flex-based:auto است. Flex-based می تواند مقادیری را که در ویژگی عرض عادی استفاده می کنید ، بدست آورد. یعنی دpercentages || ems || rems || pixels و غیره توجه داشته باشید که وقتی می خواهید ویژگی basis را روی مقدار صفر تنظیم کنید ، از واحد نیز استفاده کنید. از flex-based استفاده کنید: ۰px نه فقط flex-based: 0 من دوباره مثال “یک لیست” را اینجا می آورم. توجه: هنگام تلاش برای تنظیم ویژگی basis بر روی مقدار صفر ، از واحد نیز استفاده کنید. به عنوان مثال، از flex-based استفاده کنید: ۰px "" نه justflex-basis: 0 ” من دوباره مثال “یک لیست” را اینجا می آورم.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex

}

li {

    padding: ۴px; /*some breathing space*/

}

به طور پیش فرض ، عرض اولیه مورد فلکس تحت تأثیر مقدار پیش فرض ، flex-based: auto قرار می گیرد. عرض مورد منعکس شده “به طور خودکار” بر اساس اندازه محتوا محاسبه می شود (و بدیهی است ، به علاوه هر padding دیگری که تنظیم می کنید).

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
          background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

این بدان معناست که اگر محتوای مورد را افزایش دهید ، به طور خودکار اندازه آن تغییر میکند تا متناسب شود.

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

اگر می خواهید flex-item را روی عرض ثابت تنظیم کنید ، می توانید این کار را نیز انجام دهید:

li {
    flex-basis: 150px;
}

اکنون flex-item به عرض ۱۵۰ پیکسل محدود شده است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

۴٫flex shorthand

خلاصه مختصر flex به شما این امکان را می دهد که ویژگی های flex-grow ، flex-shrink و flex-based را به صورت یکجا تنظیم کنید.

در صورت مناسب بودن ، توصیه می کنم هر سه ویژگی را همزمان با استفاده از مختصر نویسی تنظیم کنید تا اینکه این کار را به صورت جداگانه انجام دهید.

li {
  flex: 0 1 auto;
}

کد بالا برابر با تنظیم سه ویژگی است: flex-grow: 0؛flex-shrink: 1؛ flex-based: auto لطفا به سفارش توجه داشته باشید. ابتدا اFlex-grow ، سپس flex-shrink و سپس flex-basis شوید. مخفف GSB ممکن است کمک کند. اگر نتوانید یکی از مقادیر را در متن کوتاه تنظیم کنید ، چه اتفاقی می افتد؟ اگر فقط مقادیر flex-grow و flex-shrink را تنظیم کنید ، flex-based به طور پیش فرض صفر می شود. به این حالت انعطاف پذیری مطلق می گویند. و وقتی فقط flex-basis را تنظیم می کنید ، یک انعطاف پذیری نسبی پیدا می کنید.

//this is an absolute flex item
li {
  flex: 1 1; //flex-basis defaults to 0;
}

//this is a relative flex item
li {
  flex-basis: 200px; //only flex-basis is set
}

می دانم چه فکری می کنی هدف از انعطاف پذیری نسبی و مطلق چیست؟ من بعداً در این مقاله به این سوال پاسخ می دهم. بیایید نگاهی به مقادیر خلاصه مختصر بسیار مفید بیندازیم.

۱. flex: 0 1 auto

//again, the 'li' represents any flex-item
li {
  flex: 0 1 auto;
}

این همان نوشتن flex: default و رفتار پیش فرض همه موارد flex است. بگذارید این را بشکنم ، فقط کمی.

flex-based روی auto تنظیم شده است ، به این معنی که عرض اولیه کالای flex به طور خودکار بر اساس اندازه محتویات تعیین می شود. متوجه شدی؟ با رفتن به ویژگی بعدی ، مقدارflex-grow صفر است. این بدان معناست که خاصیتflex-grow در عرض اولیه مورد flex دستکاری نمی کند. کلید رشد خاموش است. از آنجا که flex-grow “رشد” آیتم های فلکس را کنترل می کند و روی آن صفر است ، پس کالاهای انعطاف پذیر متناسب با صفحه نمایش “رشد” نخواهند کرد. سرانجام ، مقدار انقباض فلکس ۱ است. این گفته می شود – “در صورت لزوم ، مورد فلکس را کوچک کنید” در اینجا به نظر می رسد که وقتی روی برخی از موارد فلکس اعمال می شود ، به نظر می رسد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 0 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>

  <li>I am a simple list</li>

</ul>

</body>

</html>

توجه کنید که چگونه موارد فلکس رشد نمی کنند. عرض به طور خودکار محاسبه می شود و با تغییر اندازه مرورگر – در صورت لزوم ، کوچک می شوند.

۲. Flex: 0 0 auto

/*again, the 'li' represents any list-item*/

li {
  flex: 0 0 auto;
}

این همان flex: none است. با استفاده از همان چهارچوبی که قبلاً ایجاد کردم ، عرض به طور خودکار محاسبه می شود ، اما مورد فلکس رشد نمی کند یا کوچک نمی شود (هر دو روی صفر تنظیم می شوند). کلیدهای کوچک و بزرگ هر دو خاموش هستند. این اساساً یک عنصر با عرض ثابت است که عرض اولیه آن از اندازه محتوا در مورد فلکس برخوردار نیست. ببینید که این خلاصه کوتاه چگونه روی دو مورد فلکس تأثیر می گذارد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

یک محتوا بیشتر از دیگری است. اولین چیزی که باید توجه کنید این است که موارد فلکس دارای عرض های مختلف هستند. این از آنجا انتظار می رود که عرض ها بر اساس اندازه محتوا به طور خودکار محاسبه می شوند. اندازه مرورگر خود را تغییر اندازه دهید ، متوجه خواهید شد که موارد فلکس با عرض آن کوچک نمی شوند. آنها از عنصر والدین خارج می شوند ، و شما باید مرورگر خود را به صورت افقی پیمایش کنید تا تمام مطالب را مشاهده کنید. جای نگرانی نیست ، بعداً به شما نشان خواهم داد که چگونه با این رفتار عجیب کنار بیایید.

۳.Flex: 1 1 auto

این همان flex: auto است. از چارچوبی که قبلاً ایجاد کردم استفاده کنید. این می گوید ، “عرض اولیه را به طور خودکار محاسبه کنید ، اما متناسب با کل فضای موجود رشد کنید و در صورت لزوم کوچک شوید” کلیدهای رشد و کوچک شدن روشن شده و عرض به طور خودکار محاسبه می شود.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

این بار موارد در فضای موجود پر شده و با تغییر اندازه مرورگر ، کوچک می شوند.    

۴. Flex: “positive number”

جایی که “عدد مثبت” نشان دهنده هر عدد مثبت است (بدون نقل قول) این همان flex: “positive number” ۱ ۰ است. flex: 2 1 0 همان نوشتن flex است: ۲ که ۲ نشان دهنده هر عدد مثبت است

/*again, the 'li' represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

طبق همان چارچوبی که قبلاً ایجاد کردم ، این امر می گوید: “عرض اولیه کالای فلکس را روی صفر تنظیم کنید (ehm ، بدون عرض؟) ، آن را رشد دهید تا فضای موجود پر شود و در نهایت هر زمان که ممکن است مورد را کوچک کنید” با داشتن آیتم های انعطاف پذیر “بدون عرض” ، عرض چگونه محاسبه می شود؟ مقدار انعطاف پذیر رشد می کند و میزان “وسعت” مورد انعطاف پذیر را تعیین می کند. این مسئله از مشکل بدون عرض مراقبت می کند. استفاده از این مختصر فلکس درصورتی که بیش از یک مورد فلکس داشته باشید که عرض اولیه ، flex-based روی هر مقادیر صفر تنظیم شده باشد ، عملی تر است. ۰px آنچه واقعاً اتفاق می افتد ، این است که عرض آیتم های فلکس بر اساس نسبت مقدار فلکس رشد محاسبه می شوند. من فقط کمی آن را خراب می کنم دو مورد از لیست را که در زیر مشخص و به سبک آن در نظر گرفته شده در نظر بگیرید.

<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>

ul {
    display: flex;
}
li:nth-child(1) {
    flex: 2 1 0; /*same as just writing flex: 2*/
}

li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

  به یاد داشته باشید که تنظیم flex-grow: 1 اجازه می دهد تا مورد flex فضای موجود را پر کند. کلید رشد روشن است. در اینجا شما دو مورد فلکس دارید. یکی دارای ویژگی انعطاف پذیر ۱ و دیگری ۲ ، پس چه اتفاقی می افتد؟ کلیدهای رشد را برای هر دو مورد روشن کرده اید. با این حال ، میزان رشد متفاوت است. ۱ و ۲ هر دو برای پر کردن فضای موجود گسترش می یابند ، اما در برخی از نسبت ها. نحوه کار آن در اینجا است. مورد دوم ۲/۳ فضای موجود را اشغال می کند در حالی که مورد اول ۱/۳ را اشغال می کند. می دانید چگونه به آن رسیدم؟ نسبت ریاضیات پایه. نسبت فردی / نسبت کل امیدوارم که از آن کلاس های ریاضی صرف نظر نکرده باشید.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }
        
        li:nth-child(1) {
            flex: 2 1 0; /*same as just writing flex: 2*/
        }

        li:nth-child(2){
            flex: 1 1 0;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am one</li>   

    <li>I am two</li>                   

</ul>

</body>

</html>

می بینی چه اتفاقی می افتد؟ حتی اگر هر دو مورد فلکس دارای محتوای یک اندازه (تقریباً) باشند ، با این وجود فضاهای مختلفی را اشغال می کنند. عرض ها بر اساس اندازه محتوا نیستند ، بلکه مقادیر رشد هستند. یکی تقریباً دو برابر دیگری است.

۵٫ Align-self

خاصیت align-self یک قدم جلوتر می رود تا به ما اینقدر آیتم های فلکس را کنترل کنیم. قبلاً دیدید که چگونه ویژگی align-items در ترازبندی جمعی همه موارد flex در یک ظرف flex کمک می کند. اگر بخواهید موقعیت یک انعطاف پذیر واحد را در امتداد محور متقابل تغییر دهید ، بدون اینکه روی موارد انعطاف پذیر همسایه تأثیر بگذارد ، چه می کنید؟ اینجاست که املاک align-self به کمک شما می آید. ممکن است هر یک از این مقادیر را به خود اختصاص دهد: auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

اینها مقادیری هستند که شما قبلاً با آنها آشنا هستید ، اما به عنوان یک تازه کننده در اینجا نحوه تأثیر آنها بر یک مورد خاص هدف قرار گرفته است. در این حالت اولین مورد درون ظرف است. فلکس مورد هدف قرمز است.

۱٫ اflex-end

flex-end مورد هدف را با انتهای محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

 

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: flex-end;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۲٫ center

مرکز مورد هدف را با مرکز محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: center;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!– Selected list element –>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۳٫ stretch

کشش مورد کشش هدف را “کشش” می کند تا فضای موجود در امتداد محور عرضی را پر کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /*Select first list element(li) within the unordered list(ul)*/

        li:first-child {

            background-color: red;

            align-self: stretch;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۴٫ baseline

خط پایه مورد منعطف را در امتداد خط پایه تراز می کند. به نظر می رسد که همان نتیجه flex-start باشد اما من مطمئن هستم که شما می فهمید که خط پایه چیست. خیلی زودتر توضیح دادم

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: baseline;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۵٫ auto

auto مقدار مورد منعطف flex را به مقدار ترازهای والد تنظیم می کند یا اگر عنصر والد ندارد کشش می یابد. در حالت زیر ،flex-container دارای مقدار align-itemsبازی flex-start است

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: auto;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!–selected list element–>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

با این کار تمام flex-item با شروع محور متقابل هماهنگ می شوند. مورد منعطف flex اکنون مقدار flex-start را به ارث می برد – مقدار ترازهای والد. این سبک اصلی در موارد فلکسی است که در بالا استفاده شده است. فقط برای اینکه بهتر بفهمید چه اتفاقی می افتد.

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start; /*affects all flex-items*/
    min-height: 50%;
    background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

الان تقریباً برای قسمت سرگرم کننده آماده هستید 🙂          

در بخش قبلی ، من ظروف فلکس و خصوصیات تراز بودن آنها را توضیح دادم. واقعاً زیباست. مطمئناً شما از آنچه در پیش دارید احساس خوبی دریافت می کنید من اکنون تمرکز خود را از کانتینرهای فلکس برداشته و شما را با آیتم های فلکس و خواص ترازبندی آنها آشنا می کنم. مانند ظروف فلکس ، ویژگی های هم ترازی زوج نیز در همه موارد فلکس موجود است. بگذارید در میان آنها راه بروم.

۱٫ Order

ویژگی ترتیب امکان مرتب سازی مجدد موارد فلکس درون ظرف را فراهم می کند. اساساً ، با ویژگی ترتیب می توانید یک کالای فلکس را از یک موقعیت به موقعیت دیگر منتقل کنید. درست مانند کاری که با لیست های “مرتب سازی” انجام می دهید. این کار بدون تأثیر بر کد منبع انجام می شود. این بدان معنی است که موقعیت آیتم های انعطاف پذیر در کد منبع HTML تغییر نمی کند. مقدار پیش فرض برای ویژگی سفارش ۰ است. ممکن است مقادیر منفی یا مثبت به خود بگیرد. شایان ذکر است که موارد فلکس براساس مقادیر تعداد ویژگی ترتیب ، دوباره ترتیب داده می شوند. از کمترین به بالاترین. یک مثال همیشه مفهوم را می رساند. لیست نامرتب زیر را در نظر بگیرید:

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

به طور پیش فرض ، کالاهای فلکس دارای ارزش ترتیب ۰ می باشند. درست همانطور که انتظار داشتید ، پس از برخی از استایل های اساسی این را دریافت می کنید:

CSS:
ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

موارد Flex دقیقاً همانطور که در ترتیب منبع HTML مشخص شده است ، نمایش داده می شوند. مورد ۱ ، سپس ۲ ، ۳ و ۴ را انعطاف دهید. اگر به هر دلیلی بخواهید flex-item 1 بدون تغییر ترتیب منبع در سند HTML آخر از همه ظاهر شود چه می کنید؟ “بدون تغییر ترتیب منبع” به این معنی است که شما مجبور به انجام این کار نیستید:

<ul>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>1</li>

</ul>

سپس موارد فلکس از کمترین به بالاترین مرتب می شوند. فراموش نکنید که به طور پیش فرض ، لیست موارد ۲ ، ۳ و ۴ همه ترتیب سفارش ۰ (صفر) دارند. اکنون ، flex-item 1 دارای ارزش سفارش ۱ است.   عناصر فلکس ۲ ، ۳ و ۴ دارای مقدار سفارش ۰٫ هستند ، بنابراین ، ترتیب منبع HTML حفظ می شود – هیچ تغییری در نمایشگر پیش فرض اعمال نمی شود. اگر مقدار سفارش ۲ را به flex-item 2 بدهید ، چه می کنید؟

/*select first li element within the ul */
    li:nth-child(1) {
        order: 1; /*give it a value higher than 0. Remember it's ```order:0``` for other flex-items by default*/
    }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

  عناصر فلکس ۲ ، ۳ و ۴ دارای مقدار ترتیب ۰٫ هستند ، بنابراین ، ترتیب منبع HTML حفظ می شود – هیچ تغییری در نمایشگر پیش فرض اعمال نمی شود. اگر مقدار ترتیب ۲ را به flex-item 2 بدهید ، چه می کنید؟ بله درست حدس زدید. از پشته هم بالا می رود. اکنون نشان دهنده مورد flex با بالاترین مقدار ترتیب است.

/*apply to the 1st list element, n=1*/
li:nth-child(1) {
            order: 1
        }

li:nth-child(2) {
            order: 2
        }

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

و چه اتفاقی می افتد که دو مورد فلکس دارای ارزش ترتیب یکسان باشند؟ در مثال زیر ، مقادیر فلکس ۱ و ۳ همان ترتیب را دارند

li:nth-child(1) {

order: ۱;

}

li:nth-child(3) {

        order: ۱;

    }

li:nth-child(1) {
            order: 1
        }

li:nth-child(3) {
            order: 1
        }

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            color: #fff;    
            width: 100px;
            font-size: 2em;
            min-height: 100px;
            background-color: #8cacea;
            margin: 8px;
        }

<html>

<head>

    <title>Understanding Flexbox – Justify Content</title>

</head>

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

موارد هنوز از کمترین تا بالاترین مقدار ترتیب مرتب شده اند. این بار ، flex-item 3 آخرین به نظر می رسد زیرا بعد از flex-item 1 در پرونده منبع (سند HTML) ظاهر می شود. ترتیب مجدد براساس موقعیتهای موجود در پرونده مبدا انجام می شود ، زمانی که دو یا چند مورد فلکس دارای ارزش ترتیب یکسان باشند. این توضیحات زیادی بود. من می خواهم به یک ویزگی دیگر بروم.

۲٫ فلکس رشد می کند و انعطاف پذیر می شود

زیبایی موارد انعطاف پذیر “انعطاف پذیر” بودن است. ویژگی های flex-shrink وflex-grow به ما امکان می دهد تا حتی بیشتر با این “انعطاف پذیری” بازی کنیم. ویژگی هایflex-grow و flex-shrink ، کنترل می کند که در صورت وجود فضای اضافی ، مقدار انعطاف پذیر باید “رشد” کند (گسترش یابد) یا اگر فضای اضافی وجود نداشته باشد ، “کوچک شود”. آنها ممکن است مقادیری از ۰ تا هر عدد مثبت را به خود اختصاص دهند. ۰ || عدد مثبت بگذارید این را توضیح دهم. لیست ساده غیر مرتب شده زیر را در نظر بگیرید. این فقط یک مورد از لیست را شامل می شود.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex;

}

با کمی استایل بیشتر ، اینگونه به نظر می رسد.

CSS:
ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

به طور پیش فرض ، خاصیت flex-grow روی ۰ تنظیم شده است. از نظر ضمنی ، مورد flex نمی تواند متناسب با کل فضای موجود رشد کند. مقدار ۰ مانند سوئیچ “خاموش کردن” است. کلید انعطاف پذیر خاموش است. با این حال ، اگر مقدارflex-grow را به ۱ تغییر دهید ، آنچه اتفاق می افتد اینجا است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-grow: 1;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

مورد فلکس اکنون “رشد می کند” تا فضای موجود را اشغال کند. سوییچ روشن است! اگر سعی می کنید مرورگر خود را تغییر اندازه دهید ، مورد انعطاف پذیر نیز برای کاهش عرض صفحه جدید “کوچک” می شود. چرا؟ به طور پیش فرض ، خاصیت جمع شدن روی ۱ تنظیم شده است. این بدان معناست که سوئیچ flex-shrink نیز روشن است! در صورتی که هنوز با درک خود از این موضوع اطمینان ندارید ، کمی مشخصات دقیق فلکس رشد و انعطاف پذیری را بررسی می کنم. بیایید حرکت کنیم

۳٫Flex basis

به یاد می آورید که چگونه گفتم که زیباییflex-items “انعطاف پذیر” بودن است؟ خوب ، به نظر می رسد شما نیز کنترل آن را دارید. خاصیت flex-based اندازه اولیه flex-item. را مشخص می کند. قبل از اینکه ویژگی های flex-grow یا flex-shrink تنظیم شود ، اندازه آن متناسب با ظرف است یا نه. جمله قبلی واقعاً مهم است – بنابراین من لحظه ای وقت می گذارم تا آن را تقویت کنم. مقدار پیش فرض flex-based:auto است. Flex-based می تواند مقادیری را که در ویژگی عرض عادی استفاده می کنید ، بدست آورد. یعنی دpercentages || ems || rems || pixels و غیره توجه داشته باشید که وقتی می خواهید ویژگی basis را روی مقدار صفر تنظیم کنید ، از واحد نیز استفاده کنید. از flex-based استفاده کنید: ۰px نه فقط flex-based: 0 من دوباره مثال “یک لیست” را اینجا می آورم. توجه: هنگام تلاش برای تنظیم ویژگی basis بر روی مقدار صفر ، از واحد نیز استفاده کنید. به عنوان مثال، از flex-based استفاده کنید: ۰px "" نه justflex-basis: 0 ” من دوباره مثال “یک لیست” را اینجا می آورم.

<ul>

    <li>I am a simple list</li>

</ul>

ul {

    display: flex

}

li {

    padding: ۴px; /*some breathing space*/

}

به طور پیش فرض ، عرض اولیه مورد فلکس تحت تأثیر مقدار پیش فرض ، flex-based: auto قرار می گیرد. عرض مورد منعکس شده “به طور خودکار” بر اساس اندازه محتوا محاسبه می شود (و بدیهی است ، به علاوه هر padding دیگری که تنظیم می کنید).

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
          background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>

</ul>

</body>

</html>

این بدان معناست که اگر محتوای مورد را افزایش دهید ، به طور خودکار اندازه آن تغییر میکند تا متناسب شود.

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

اگر می خواهید flex-item را روی عرض ثابت تنظیم کنید ، می توانید این کار را نیز انجام دهید:

li {
    flex-basis: 150px;
}

اکنون flex-item به عرض ۱۵۰ پیکسل محدود شده است.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex-basis: 150px;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list AND I am a simple list</li>

</ul>

</body>

</html>

۴٫flex shorthand

خلاصه مختصر flex به شما این امکان را می دهد که ویژگی های flex-grow ، flex-shrink و flex-based را به صورت یکجا تنظیم کنید.

در صورت مناسب بودن ، توصیه می کنم هر سه ویژگی را همزمان با استفاده از مختصر نویسی تنظیم کنید تا اینکه این کار را به صورت جداگانه انجام دهید.

li {
  flex: 0 1 auto;
}

کد بالا برابر با تنظیم سه ویژگی است: flex-grow: 0؛flex-shrink: 1؛ flex-based: auto لطفا به سفارش توجه داشته باشید. ابتدا اFlex-grow ، سپس flex-shrink و سپس flex-basis شوید. مخفف GSB ممکن است کمک کند. اگر نتوانید یکی از مقادیر را در متن کوتاه تنظیم کنید ، چه اتفاقی می افتد؟ اگر فقط مقادیر flex-grow و flex-shrink را تنظیم کنید ، flex-based به طور پیش فرض صفر می شود. به این حالت انعطاف پذیری مطلق می گویند. و وقتی فقط flex-basis را تنظیم می کنید ، یک انعطاف پذیری نسبی پیدا می کنید.

//this is an absolute flex item
li {
  flex: 1 1; //flex-basis defaults to 0;
}

//this is a relative flex item
li {
  flex-basis: 200px; //only flex-basis is set
}

می دانم چه فکری می کنی هدف از انعطاف پذیری نسبی و مطلق چیست؟ من بعداً در این مقاله به این سوال پاسخ می دهم. بیایید نگاهی به مقادیر خلاصه مختصر بسیار مفید بیندازیم.

۱. flex: 0 1 auto

//again, the 'li' represents any flex-item
li {
  flex: 0 1 auto;
}

این همان نوشتن flex: default و رفتار پیش فرض همه موارد flex است. بگذارید این را بشکنم ، فقط کمی.

flex-based روی auto تنظیم شده است ، به این معنی که عرض اولیه کالای flex به طور خودکار بر اساس اندازه محتویات تعیین می شود. متوجه شدی؟ با رفتن به ویژگی بعدی ، مقدارflex-grow صفر است. این بدان معناست که خاصیتflex-grow در عرض اولیه مورد flex دستکاری نمی کند. کلید رشد خاموش است. از آنجا که flex-grow “رشد” آیتم های فلکس را کنترل می کند و روی آن صفر است ، پس کالاهای انعطاف پذیر متناسب با صفحه نمایش “رشد” نخواهند کرد. سرانجام ، مقدار انقباض فلکس ۱ است. این گفته می شود – “در صورت لزوم ، مورد فلکس را کوچک کنید” در اینجا به نظر می رسد که وقتی روی برخی از موارد فلکس اعمال می شود ، به نظر می رسد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

li {
            flex: 0 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>

  <li>I am a simple list</li>

</ul>

</body>

</html>

توجه کنید که چگونه موارد فلکس رشد نمی کنند. عرض به طور خودکار محاسبه می شود و با تغییر اندازه مرورگر – در صورت لزوم ، کوچک می شوند.

۲. Flex: 0 0 auto

/*again, the 'li' represents any list-item*/

li {
  flex: 0 0 auto;
}

این همان flex: none است. با استفاده از همان چهارچوبی که قبلاً ایجاد کردم ، عرض به طور خودکار محاسبه می شود ، اما مورد فلکس رشد نمی کند یا کوچک نمی شود (هر دو روی صفر تنظیم می شوند). کلیدهای کوچک و بزرگ هر دو خاموش هستند. این اساساً یک عنصر با عرض ثابت است که عرض اولیه آن از اندازه محتوا در مورد فلکس برخوردار نیست. ببینید که این خلاصه کوتاه چگونه روی دو مورد فلکس تأثیر می گذارد.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 0 0 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

یک محتوا بیشتر از دیگری است. اولین چیزی که باید توجه کنید این است که موارد فلکس دارای عرض های مختلف هستند. این از آنجا انتظار می رود که عرض ها بر اساس اندازه محتوا به طور خودکار محاسبه می شوند. اندازه مرورگر خود را تغییر اندازه دهید ، متوجه خواهید شد که موارد فلکس با عرض آن کوچک نمی شوند. آنها از عنصر والدین خارج می شوند ، و شما باید مرورگر خود را به صورت افقی پیمایش کنید تا تمام مطالب را مشاهده کنید. جای نگرانی نیست ، بعداً به شما نشان خواهم داد که چگونه با این رفتار عجیب کنار بیایید.

۳.Flex: 1 1 auto

این همان flex: auto است. از چارچوبی که قبلاً ایجاد کردم استفاده کنید. این می گوید ، “عرض اولیه را به طور خودکار محاسبه کنید ، اما متناسب با کل فضای موجود رشد کنید و در صورت لزوم کوچک شوید” کلیدهای رشد و کوچک شدن روشن شده و عرض به طور خودکار محاسبه می شود.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

<body>

<ul>

    <li>I am a simple list</li>                 

    <li>I am a simple list more content…more content!</li>                            

</ul>

</body>

</html>

این بار موارد در فضای موجود پر شده و با تغییر اندازه مرورگر ، کوچک می شوند.    

۴. Flex: “positive number”

جایی که “عدد مثبت” نشان دهنده هر عدد مثبت است (بدون نقل قول) این همان flex: “positive number” ۱ ۰ است. flex: 2 1 0 همان نوشتن flex است: ۲ که ۲ نشان دهنده هر عدد مثبت است

/*again, the 'li' represents any list-item*/
li {
  flex: 2 1 0; /*same as flex: 2*/
}

طبق همان چارچوبی که قبلاً ایجاد کردم ، این امر می گوید: “عرض اولیه کالای فلکس را روی صفر تنظیم کنید (ehm ، بدون عرض؟) ، آن را رشد دهید تا فضای موجود پر شود و در نهایت هر زمان که ممکن است مورد را کوچک کنید” با داشتن آیتم های انعطاف پذیر “بدون عرض” ، عرض چگونه محاسبه می شود؟ مقدار انعطاف پذیر رشد می کند و میزان “وسعت” مورد انعطاف پذیر را تعیین می کند. این مسئله از مشکل بدون عرض مراقبت می کند. استفاده از این مختصر فلکس درصورتی که بیش از یک مورد فلکس داشته باشید که عرض اولیه ، flex-based روی هر مقادیر صفر تنظیم شده باشد ، عملی تر است. ۰px آنچه واقعاً اتفاق می افتد ، این است که عرض آیتم های فلکس بر اساس نسبت مقدار فلکس رشد محاسبه می شوند. من فقط کمی آن را خراب می کنم دو مورد از لیست را که در زیر مشخص و به سبک آن در نظر گرفته شده در نظر بگیرید.

<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>

ul {
    display: flex;
}
li:nth-child(1) {
    flex: 2 1 0; /*same as just writing flex: 2*/
}

li:nth-child(2){
    flex: 1 1 0;
    background-color: #8cacea;
}

  به یاد داشته باشید که تنظیم flex-grow: 1 اجازه می دهد تا مورد flex فضای موجود را پر کند. کلید رشد روشن است. در اینجا شما دو مورد فلکس دارید. یکی دارای ویژگی انعطاف پذیر ۱ و دیگری ۲ ، پس چه اتفاقی می افتد؟ کلیدهای رشد را برای هر دو مورد روشن کرده اید. با این حال ، میزان رشد متفاوت است. ۱ و ۲ هر دو برای پر کردن فضای موجود گسترش می یابند ، اما در برخی از نسبت ها. نحوه کار آن در اینجا است. مورد دوم ۲/۳ فضای موجود را اشغال می کند در حالی که مورد اول ۱/۳ را اشغال می کند. می دانید چگونه به آن رسیدم؟ نسبت ریاضیات پایه. نسبت فردی / نسبت کل امیدوارم که از آن کلاس های ریاضی صرف نظر نکرده باشید.

ul {
            display: flex;
            border: 1px solid red;
            padding: 0;
            list-style: none;
            background-color: #e8e8e9;
        }

        li {
            flex: 1 1 auto;
            background-color: #8cacea;
            margin: 8px;
            min-height: 100px;
            color: #fff;
            padding: 4px;
        }
        
        li:nth-child(1) {
            flex: 2 1 0; /*same as just writing flex: 2*/
        }

        li:nth-child(2){
            flex: 1 1 0;
        }

 

<html>

<head>

    <title>Flexbox DB</title>

</head>

 

<body>

<ul>

    <li>I am one</li>   

    <li>I am two</li>                   

</ul>

</body>

</html>

می بینی چه اتفاقی می افتد؟ حتی اگر هر دو مورد فلکس دارای محتوای یک اندازه (تقریباً) باشند ، با این وجود فضاهای مختلفی را اشغال می کنند. عرض ها بر اساس اندازه محتوا نیستند ، بلکه مقادیر رشد هستند. یکی تقریباً دو برابر دیگری است.

۵٫ Align-self

خاصیت align-self یک قدم جلوتر می رود تا به ما اینقدر آیتم های فلکس را کنترل کنیم. قبلاً دیدید که چگونه ویژگی align-items در ترازبندی جمعی همه موارد flex در یک ظرف flex کمک می کند. اگر بخواهید موقعیت یک انعطاف پذیر واحد را در امتداد محور متقابل تغییر دهید ، بدون اینکه روی موارد انعطاف پذیر همسایه تأثیر بگذارد ، چه می کنید؟ اینجاست که املاک align-self به کمک شما می آید. ممکن است هر یک از این مقادیر را به خود اختصاص دهد: auto || flex-start || flex-end || center || baseline || stretch

li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}

اینها مقادیری هستند که شما قبلاً با آنها آشنا هستید ، اما به عنوان یک تازه کننده در اینجا نحوه تأثیر آنها بر یک مورد خاص هدف قرار گرفته است. در این حالت اولین مورد درون ظرف است. فلکس مورد هدف قرمز است.

۱٫ اflex-end

flex-end مورد هدف را با انتهای محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

 

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: flex-end;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۲٫ center

مرکز مورد هدف را با مرکز محور عرضی تراز می کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

 

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: center;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!– Selected list element –>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۳٫ stretch

کشش مورد کشش هدف را “کشش” می کند تا فضای موجود در امتداد محور عرضی را پر کند.

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /*Select first list element(li) within the unordered list(ul)*/

        li:first-child {

            background-color: red;

            align-self: stretch;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۴٫ baseline

خط پایه مورد منعطف را در امتداد خط پایه تراز می کند. به نظر می رسد که همان نتیجه flex-start باشد اما من مطمئن هستم که شما می فهمید که خط پایه چیست. خیلی زودتر توضیح دادم

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        li:first-child {

            background-color: red;

            align-self: baseline;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

۵٫ auto

auto مقدار مورد منعطف flex را به مقدار ترازهای والد تنظیم می کند یا اگر عنصر والد ندارد کشش می یابد. در حالت زیر ،flex-container دارای مقدار align-itemsبازی flex-start است

<!DOCTYPE html>

<html>

<head>

    <title>Flexbox DB</title>

    <style type=”text/css”>

        html,

        body {

            height: ۱۰۰%;

        }

        ul {

            display: flex;

            border: ۱px solid red;

            padding: ۰;

            list-style: none;

            justify-content: space-between;

            align-items: flex-start;

            min-height: ۵۰%;

            background-color: #e8e8e9;

        }

        li {

          width: ۱۰۰px;

          background-color: #۸cacea;

          margin: ۸px;

          font-size: ۲rem;

        }

        /* Select first list element within the unordered list*/

        li:first-child {

            background-color: red;

            align-self: auto;

        }   

    </style>

</head>

<body>

<ul>

    <li>I am list ۱</li> <!–selected list element–>

    <li>I am list ۲</li>

    <li>I am list ۳</li>                                

</ul>

</body>

</html>

با این کار تمام flex-item با شروع محور متقابل هماهنگ می شوند. مورد منعطف flex اکنون مقدار flex-start را به ارث می برد – مقدار ترازهای والد. این سبک اصلی در موارد فلکسی است که در بالا استفاده شده است. فقط برای اینکه بهتر بفهمید چه اتفاقی می افتد.

ul {
    display: flex;
    border: 1px solid red;
    padding: 0;
    list-style: none;
    justify-content: space-between;
    align-items: flex-start; /*affects all flex-items*/
    min-height: 50%;
    background-color: #e8e8e9;
}

li {
  width: 100px;
  background-color: #8cacea;
  margin: 8px;
  font-size: 2rem;
}

الان تقریباً برای قسمت سرگرم کننده آماده هستید 🙂          

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا