How would you see flexbox to control horizontal alignment ?

عباسعلی بهرامی

95221033111037

https://www.aparat.com/v/tTPr1

Aligning Items in a Flex Container

یکی از دلایل افزایش سریع علاقه به توسعه دهندگان وب flexbox این است که برای اولین بار قابلیت‌های هم ترازی مناسب را برای وب فراهم کرده‌است .که تنظیم عمودی مناسب را فعال می‌کند , بنابراین می‌توانیم به راحتی در یک جعبه قرار دهیم . در این راهنما , ما نگاهی کامل به این می‌اندازیم که چگونه ویژگی‌های هم‌تراز کردن و توجیه کار در وب سایت کار می‌کند .

برای مرکز کردن box ها از ویژگی align-items برای تراز کردن آیتم خود در محورمتقاطع استفاده می‌کنیم، که در این حالت محور بلوک به صورت عمودی عمل می‌کند. مااز align-content استفاده می‌کنیم تا آیتم را در محور اصلی قرار دهیم، که در این حالت محور داخلی به صورت افقی حرکت می‌کند.

می‌توانید نگاهی به کد این مثال زیر بیاندازید. اندازه ظرف یا عنصر تودرتو را تغییر دهیدو آلمان تودرتو همیشه در مرکز قرار دارد.

.box {
display: flex;
  align-items: center;
  justify-content: center;
  }
  .box div {
  width: 100px;
  height: 100px;
  display : flex ;
  justify-content : center ;
  }    

<div class="box">
    <div>example</div>
 </div>