কম্পিউটার

CSS3 ব্যবহার করে ক্রস অক্ষ বরাবর ফ্লেক্স আইটেমগুলি সারিবদ্ধ করুন


CSS3 ব্যবহার করে ক্রস অক্ষ বরাবর ফ্লেক্স আইটেমগুলি সারিবদ্ধ করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
   height: 200px;
   display: flex;
   width: 100%;
   align-items: center;
   border: 2px solid red;
}
div {
   width: 100px;
   height: 100px;
   color: white;
   text-align: center;
   font-size: 30px;
}
.first {
   background-color: rgb(55, 0, 255);
}
.second {
   background-color: red;
}
.third {
   background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Align flex items along cross axis</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

CSS3 ব্যবহার করে ক্রস অক্ষ বরাবর ফ্লেক্স আইটেমগুলি সারিবদ্ধ করুন


  1. CSS3 ব্যবহার করে ফ্লেক্স আইটেম মোড়ানো সক্ষম করুন

  2. CSS3 ব্যবহার করে স্বতন্ত্র ফ্লেক্স আইটেমগুলি পুনরায় সাজানো

  3. CSS3 এ ফ্লেক্স লেআউট মডেল বোঝা

  4. সিএসএস ফ্লেক্সের সাথে বাম-কেন্দ্র-ডান হিসাবে কলাম ডিআইভিগুলিকে কীভাবে সারিবদ্ধ করবেন