Với những ai rành về graphic design thì flex từa tựa như Align, Distribute để cân hàng các thành phần đối tượng.
Hãy xem 1 ví dụ đơn giản nhất
- <!DOCTYPE HTML>
- <html>
- <head></head>
- <body>
- <div class="flex-container">
- <div>1</div>
- <div>2</div>
- <div>3</div>
- </div>
- <div class="flex-container">
- </body>
- </html>
CSS
- .flex-container {
- display: flex;
- flex-direction: row;
- display: flex;
- }
Các thuộc tính cho flex-container
- flex-direction - hướng hiển thị (column, column-reverse, row, row-reverse)
- flex-wrap - gói các thành phần bên trong theo cách chúng tự xuống hàng khi giảm kích thước khung bao mà k thay đổi kích thước
- flex-flow
- justify-content
- align-items
- align-content
Nguồn: https://hocwebchuan.com/tutorial/css3/display-flex.php
https://codevivu.com/front-end/cong-dung-huu-ich-tu-nth-childn-trong-css/
