آموزش کامل کار با مدل Flexbox (قسمت دوم)

امیر زوارمی

10 تیر 1398

درسنامه

درس 17 از سری CSS پیشرفته

به قسمت دوم آموزش کار با خاصیت Flex در CSS خوش آمدید. در قسمت قبلی تعداد زیادی از خصوصیت های Flexbox را بررسی کردیم و برای هر کدام مثال هایی زدیم. در این قسمت نیز می خواهیم با محوریت مثال ها، با خصوصیات بیشتری آشنا شویم!

خصوصیت align-content

خصوصیت align-content تنظیم کننده ی نحوه ی مرتب شدن خطوط آیتم ها است. همانطور که می دانید آیتم های Flexbox به صورت خطی کنار هم قرار می گیرند مگر اینکه ما این ترتیب را به هم بزنیم.

برای درک بهتر مسئله به عنصر نگهدارنده عرض 600 پیکسلی داده ایم و برای هر مقدار ممکن خصوصیت align-content یک مثال زده ایم.

مثال اول - مقدار space-between که آیتم ها را با فاصله از هم قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>

<p>The "align-content: space-between;" displays the flex lines with equal space between them:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال دوم - مقدار space-around که بین آیتم ها (قبل و بعد و بینشان) فاصله می گذارد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>

<p>The "align-content: space-around;" displays the flex lines with space before, between, and after them:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال سوم - مقدار stretch که مقدار پیش فرض است و آیتم ها را آنقدر میکِشد تا تمام فضای خالی را پُر کنند:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>

<p>The "align-content: stretch;" stretches the flex lines to take up the remaining space (this is default):</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال چهارم - مقدار center که آیتم ها را در وسط صفحه (از نظر محور عمودی) قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>

<p>The "align-content: center;" displays the flex lines in the middle of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال پنجم - مقدار flex-start که آیتم ها را در ابتدای نگهدارنده قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>

<p>The "align-content: flex-start;" displays the flex lines at the start of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال ششم - مقدار flex-end که آیتم ها را در انتهای نگهدارنده قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-content Property</h1>

<p>The "align-content: flex-end;" displays the flex lines at the end of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

وسط قرار گرفتن عمودی و افقی

اگر شما می خواهید که عنصری را دقیقا در وسط صفحه قرار دهید، هم در محور عمودی و هم در محور افقی، باید مقدار justify-content و align-items را روی center تنظیم کنید. ما در مثال زیر همین کار را انجام داده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  color: white;
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<h1>Perfect Centering</h1>

<p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>

<div class="flex-container">
  <div></div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ارث بری فرزندان از Flexbox

فرزندان مستقیم یک نگهدارنده که از نوع flexbox باشد، به صورت خودکار به آیتم های flex تبدیل می شوند و نیازی نیست که شما کاری انجام دهید. در مثال زیر چهار آیتم flexbox داریم که داخل یک نگهدارنده ی خاکستری هستند:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Items</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

<p>All direct children of a flexible container becomes flexible items.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

هر کدام از این آیتم ها، خصوصیات خاصی می گیرند که در زیر لیست شده اند:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

بیایید آن ها را بررسی کنیم!

خصوصیت order

خصوصیت order ترتیب آیتم های ما را مشخص می کند؛ ممکن است اولین آیتم ای که در HTML نوشته باشیم متعلق به قسمت دیگری باشد بنابراین می توانیم با استفاده از order ترتیب آن را (بدون ویرایش HTML) تغییر دهیم. این خصوصیت تنها اعداد را به عنوان مقدار قبول می کند و مقدار پیش فرض نیز 0 است.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The order Property</h1>

<p>Use the order property to sort the flex items as you like:</p>

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت flex-grow

این خصوصیت می گوید که هر آیتم نسبت به دیگر آیتم ها چقدر عرض صفحه را اشغال کند. مقداری که به flex-grow می دهید باید عدد باشد و مقدار پیش فرض نیز 0 است. در مثال زیر آیتم سوم را به نسبت 8 به 1 قرار داده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت flex-shrink

این خصوصیت تعیین می کند که یک آیتم نسبت به دیگر آیتم ها چقدر کوچک شود (برعکس خصوصیت flex-grow). مقدار پیش فرض این خصوصیت 1 است بنابراین 0 یعنی کمتر از بقیه کوچک شود (بزرگ تر بماند)، 1 یعنی به اندازه و نسبت بقیه ی آیتم ها کوچک شود و هر چیزی بیشتر از 1 یعنی بیشتر از بقیه ی آیتم ها کوچک شود. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-shrink Property</h1>

<p>Do not let the third flex item shrink as much as the other flex items:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت flex-basis

خصوصیت flex-basis می گوید که اندازه ی اولیه ی یک آیتم چقدر باشد. به طور مثال در کد زیر مقدار <div> سوم را روی 200 پیکسل قرار داده ایم؛ یعنی مقدار اولیه ی آن 200 پیکسل باشد اما ممکن است با تغییر سایز صفحه این اندازه هم تغییر کند (اما نسبت اندازه ها حفظ می شود):

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-basis Property</h1>

<p>Set the initial length of the third flex item to 200 pixels:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px">3</div>
  <div>4</div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت flex

این خصوصیت دستور خلاصه شده ی تمام خصوصیت های flex-grow و flex-shrink و flex-basis است. در مثال زیر آیتم ها بدون grow هستند (مقدار 0) و بدون shrink هستند (مقدار 0) و طول ابتدایی شان 200 پیکسل است:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex Property</h1>

<p>Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت align-self

خصوصیت align-self تراز آیتم های داخل یک نگهدارنده را مشخص می کند. در واقع دستور align-self خنثی کننده ی دستور align-items است و آن را از کار می اندازد. در دو مثال زیر برای نمایش بهتر، به نگهدارنده ارتفاع 200 پیکسلی داده ایم.

مثال اول - آیتم سوم نگهدارنده را در وسط تراز می کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>

<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال دوم - آیتم دوم نگهدارنده را در بالا و آیتم سوم را در پایین تراز می کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>

<p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p>
<p>The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.</p>

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

ایجاد گالری واکنش گرا با flexbox

با استفاده از مدل flexbox می توان گالری بسیار زیبایی ایجاد کرد و انواع حالت ها را به آن داد؛ به طور مثال 4 تصویر یا 2 تصویر کنار هم باشند و یا کل صفحه توسط یک تصویر اشغال شود و ... . به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid -->
<div class="row"> 
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
  </div> 
   
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/nature.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mist.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/paris.jpg" style="width:100%">
  </div>
  
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" style="width:100%">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" style="width:100%">
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ایجاد وب سایت واکنش گرا با مدل Flexbox

همانطور که گفتیم مدل flexbox استفاده های زیادی دارد که تنها محدود به ساخت یک گالری نیست، بلکه می توانیم کل وب سایت خود را با استفاده از Flexbox بسازیم! به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 60px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {  
  display: flex;
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row, .navbar {   
    flex-direction: column;
  }
}
</style>
</head>
<body>

<!-- Note -->
<div style="background:yellow;padding:5px">
  <h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>

<!-- Header -->
<div class="header">
  <h1>My Website</h1>
  <p>With a <b>flexible</b> layout.</p>
</div>

<!-- Navigation Bar -->
<div class="navbar">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<!-- The flexible grid (content) -->
<div class="row">
  <div class="side">
    <h2>About Me</h2>
    <h5>Photo of me:</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>More Text</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </div>
  <div class="main">
    <h2>TITLE HEADING</h2>
    <h5>Title description, Dec 7, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITLE HEADING</h2>
    <h5>Title description, Sep 2, 2017</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

امیدوارم از این قسمت لذت برده باشید. مدل Flexbox از بهترین مدل هایی است که می توان برای طراحی صفحات از آن استفاده کرد بنابراین پیشنهاد می کنیم که برای راحتی کار خودتان از این مدل بسیار کاربردی نهایت استفاده را ببرید.

برچسب‌ها: آموزش CSS صفر تا صد CSS CSS

حاشیه های پیشرفته تر در CSS

1

تصاویر پس زمینه ترکیبی در CSS

2

گرادینت (gradient) در زبان CSS

3

سایه ها (shadows) در زبان CSS

4

افکت های متنی و فونت ها در زبان CSS

5

تغییر شکل دو بعدی عناصر در CSS

6

تغییر شکل سه بعدی عناصر در CSS

7

Transition ها در زبان CSS

8

ساخت tooltip در زبان CSS

9

استایل دهی پیشرفته تصاویر در CSS

10

استایل دهی دکمه ها در CSS

11

صفحه بندی (Pagination) در CSS

12

نوشتارهای چند ستونه در CSS

13

خصوصیات object-fit و resize و outline-offset

14

متغیرهای CSS و مبحث Box Sizing

15

آموزش کامل کار با مدل Flexbox (قسمت اول)

16

آموزش کامل کار با مدل Flexbox (قسمت دوم)

17

کار با Media Query ها در CSS 3 به همراه چند مثال

18

طراحی واکنش گرا در CSS

19

Grid-View چیست؟

20

Media Query ها در طراحی واکنش گرا

21

تصاویر و ویدیوها در طراحی واکنش گرا

22

grid ها در زبان CSS

23

کار با container (نگهدارنده‌ی) grid

24

قسمت پایانی: آیتم های grid در CSS

25

دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

دوره‌های آموزشی مرتبط

آموزش HTML و CSS از صفر تا صد + پروژه محور

آموزش HTML و CSS از صفر تا صد + پروژه محور

265000 تومان

مقالات مرتبط

ویژگی z-index چیست و چگونه کار می کند؟

ویژگی z-index چیست و چگونه کار می کند؟

17 اردیبهشت 1401

ساخت لودینگ فقط با CSS

ساخت لودینگ فقط با CSS

15 اردیبهشت 1401

طراحی ریسپانسیو با CSS

طراحی ریسپانسیو با CSS

11 بهمن 1400

آموزش جامع و کامل کار با CSS Grid

آموزش جامع و کامل کار با CSS Grid

07 اردیبهشت 1400

CSS با طعم تاکو؛ آموزش ساخت ساندویچ تاکو با HTML و CSS

CSS با طعم تاکو؛ آموزش ساخت ساندویچ تاکو با HTML و CSS

09 مرداد 1399

alisadinm90 در 1 سال قبل پرسیده:

تایید اطلاعات با استفاده از جاوا اسکریپت (Javascript)

alidniry در 1 سال قبل پرسیده:

خطای مسیردهی در HTML و css

sepehr_sedigh در 1 سال قبل پرسیده:

عدم امکان استفاده از Constraint Layout در jetpack compose

fatehin در 1 سال قبل پرسیده:

ساخت انیمیشن در فتوشاپ امکان پذیر است؟

amir4784 در 1 سال قبل پرسیده:

یادگیری خانواده c یا جاوا اسکریپت برای مهاجرت

تو هم سوالتو بپرس!

اینستاگرام روکسو

ایمیل و خبرنامه روکسو