ফ্লেক্স কন্টেইনার প্রস্থ যখন ফ্লেক্স-ফ্লো HTML-এ কলামের মোড়কে সেট করা থাকে

আপনার যদি ফ্লেক্স উচ্চতা এবং প্রদর্শন ফ্লেক্স সহ একটি পাত্র থাকে, তাহলে আপনি যদি চান যে বাচ্চাদের কলামে রাখা হোক তা অনুসরণ করুন।

সেটিংসে পরিবর্তন করুন:

-webkit-flex-flow: column wrap;

এবং এর জন্য ক্রোম স্বয়ংক্রিয়ভাবে ডিভ এবং বর্ডার টপের মধ্যে স্পেস যোগ করে। যদি আমরা স্বয়ংক্রিয়ভাবে স্থান যোগ করতে না চাই, তাহলে আমরা ব্যবহার করতে পারি:

margin-bottom:100%;

এটি আইটেমটিকে উপরে নিয়ে যাবে

.flex-container {
   position: fixed;
   height: 80%;//this will change height of flex container to 80%
   padding: 1;
   margin: 1; // this will change margin to 1
   list-style: none;
   border: 7px solid red; // this will change border to solid red
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: column wrap;
   justify-content: flex-start
   align-content: flex-start;
   align-items: flex-start
}
/** Just to show the elements */
body {
   margin: 0;
   padding: 0;
}
.flex-item {
   background: tomato;
   padding: 5px;
   width: 100px;
   height: 100px;
   margin-bottom: 100%;
   line-height: 150px;
   color: white;
   font-weight: bold;
   font-size: 3em;
   text-align: center;
}
<ul class="flex-container">
   <li class="flex-item">1</li>
   <li class="flex-item">2</li>
   <li class="flex-item">3</li>
   <li class="flex-item">4</li>
   <li class="flex-item">5</li>
   <li class="flex-item">6</li>
</ul>