সিনট্যাক্স
CSS flex প্রোপার্টির সিনট্যাক্স নিচের মতো:
Selector { flex: /*value*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS flex প্রোপার্টি ব্যাখ্যা করে।
<!DOCTYPE html> <html> <head> <style> div { display: flex; padding: 4%; } .d1 { background: hotpink; flex: 0 20 20px; } .d2 { background: greenyellow; flex: 1; } .d3 { background: tomato; flex: 1; } </style> </head> <body> <div class="demo"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> </body> </html>
এটি নিচের আউটপুট দেয়:
আরেকটি উদাহরণ
<!DOCTYPE html> <html> <style> div { display: flex; border-radius: 2%; background-color: linen; height: 50px; } #d1 { border: 5px solid orangered; padding: 2%; flex: auto; } #d2 { border: 5px groove greenyellow; width: 66px; } #d3 { padding: 5%; border: 5px ridge hotpink; } #d4 { height: 100px; border: 5px solid magenta; } </style> <body> <div> <div id="d1">Auto Resize</div> <div id="d2">66px fixed width</div> <div id="d3"></div> </div> <div id="d4">Last Div</div> </body> </html>
এটি নিচের আউটপুট দেয়:
