CSS3 Flexbox
display:
|
flex | flex-inline;
|
flex-direction:
|
row | row-reverse | column | column-reverse;
|
justify-content:
|
flex-start | flex-end | center | space-between | space-around;
|
align-items:
|
flex-start | flex-end | center | baseline | stretch;
|
flex-wrap:
|
wrap | wrap-reverse | nowrap;
|
align-content:
|
flex-start | flex-end | center |space-between | space-around | stretch;
|
flex-flow:
|
flex-direction flex-wrap;
|
order:
|
number;
|
align-self:
|
flex-start | flex-end | center | baseline | stretch | auto;
|
flex:
|
flex-grow flex-shrink flex-basis | auto;
|
Css3 display
Display = flex | inline-flexdisplay: flex = item গুলো block আকারে থাকবে।
display: inline-flex = item গুলো inline-block আকারে থাকবে।
Css3 flex-direction
flex-direction: row | row-reverse | column | column-reverse;
flex-direction: row = item গুলো এক রো-তে থাকবে, বাম দিকে চেপে থাকবে এবং ধারাবাহিকতা বজায় থাকবে।
flex-direction: row-reverse = item গুলো এক রো-তে থাকবে, ডান দিকে চেপে থাকবে এবং ধারাবাহিকতা উল্টে যাবে।
flex-direction: column= item গুলো এক কলামে থাকবে, উপর দিকে চেপে থাকবে এবং ধারাবাহিকতা বজায় থাকবে।
flex-direction: column-reverse = item গুলো এক কলামে থাকবে, নিচের দিকে চেপে থাকবে এবং ধারাবাহিকতা উল্টে যাবে।
Css3 Justify-content
Justify-content = flex-start | flex-end | center |
space-between | space-around
Justify-content = এখানে content এর উদ্দেশ্য item আর justify এর উদ্দেশ্য item গুলো কিভাবে সাজানো হবে। এটা কাজ করে ডানে বামে।
Justify-content:
flex-start = item গুলো ডান দিকে চেপে যাবে।
Justify-content:
flex-end = item গুলো বাম দিকে চেপে যাবে।
Justify-content:
center = item গুলো মাঝামাঝি থাকবে।
Justify-content:
space-between = item গুলো পরষ্পরের তুলনায় সমান
জায়গা নেবে। container এর জন্য কোন জায়গা রাখবেনা।
Justify-content:
space-around = item গুলো container এর
তুলনায় সমান জায়গা নেবে। অর্থাৎ container এর জন্য যতটুকু জায়গা
নেবে item এর
জন্যও ততটুকু জায়গা নেবে।
