Bài viết được tham khảo và viết lại từ blog của ishadeed Gần đây mình thấy có một bạn hỏi về việc làm sao để hiển thị được ngôn ngữ như tiếng Nhật, Hàn từ trên xuống dưới chứ không phải mặc định là theo tiếng latin như tiếng Anh chạy từ trái sang phải như chúng ta hay làm. Thì mình tìm thấy một thuộc tính là Giá trị mặc định của thuộc tính này là Ví dụ số 1Với giao diện như trên thì chúng ta có một section-title nằm xoay 90 độ và nằm phía trên bên trái. Nếu các bạn muốn làm ra như vậy thì các bạn cần phải làm từng bước phân tích như sau:section-title nằm xoay 90 độ và nằm phía trên bên trái. Nếu các bạn muốn làm ra như vậy thì các bạn cần phải làm từng bước phân tích như sau:
Chúng ta có HTML và CSS cho giao diện ở trên như sau: <section class="wrapper"> <h2 class="section-title">Our Works</h2> <div class="grid"> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> <div class="grid__item"></div> </div> </section> .wrapper { position: relative; padding-left: 70px; padding-top: 30px; margin: 0 auto; max-width: 500px; } .section-title { // 4 dòng đầu position: absolute; left: 0; transform-origin: left top; transform: rotate(90deg); // font-size: 20px; font-weight: bold; font-family: "Arial"; } .grid__item { -webkit-box-flex: 0; flex: 0 0 48%; height: 150px; background: #e1e1e1; padding: 1.35em; box-sizing: border-box; margin-bottom: 1em; } .wrapper { position: relative; padding-left: 70px; padding-top: 30px; margin: 0 auto; max-width: 500px; } .section-title { // 4 dòng đầu position: absolute; left: 0; transform-origin: left top; transform: rotate(90deg); // font-size: 20px; font-weight: bold; font-family: "Arial"; } .grid__item { -webkit-box-flex: 0; flex: 0 0 48%; height: 150px; background: #e1e1e1; padding: 1.35em; box-sizing: border-box; margin-bottom: 1em; } Các bạn thấy đó việc để làm cái section-title nằm dọc thôi mà phải CSS tận 4 dòng. Tiếp theo đây thì chúng ta sẽ khám phá xem là .wrapper { display: flex; } .section-title { writing-mode: vertical-lr; // thay bằng dòng này } .grid{ display: flex; flex: 1; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; } Chỗ section-title thay vì dùng 4 dòng CSS thì giờ đấy với tinh chỉnh CSS một chút kết hợp với Ví dụ số 2Với thiết kế này, thì các bạn cũng dễ dàng thấy là các social widget được sắp xếp nằm hàng dọc phía bên trái của nội dung. Nhìn vào thì chắc là nhiều bạn cũng code ra được mà không nhất thiết phải dùng tới Thì như trên hình các bạn thấy rằng cái social widget này nó nằm chiều dọc được canh trên top của thằng cha chứa nó với giá trị text-align: left thì để thay đổi vị trí của nó chúng ta sẽ đổi giá trị của text-align. Ví dụ: .social-widget { writing-mode: vertical-lr; text-align: right; } Hoặc là canh giữa với đoạn code này. Các bạn có thể nhấn vào đây để xem demo online nhé, và đừng quên F12 để check code và sửa lại text-align cho social-widget thay đổi vị trí đúng không nhé. .social-widget { writing-mode: vertical-lr; text-align: center; } Trình duyệt hỗ trợThật sự là may mắn vì thuộc tính này đa số các trình duyệt đều hỗ trợ, với global là 96.08% tại caniuse. Vì thế các bạn có thể sử dụng nó trong các trình duyệt hiện đại rồi, nhưng hãy cẩn thận khi làm việc với những trình duyệt như IE từ 6-11 nhé.96.08% tại caniuse. Vì thế các bạn có thể sử dụng nó trong các trình duyệt hiện đại rồi, nhưng hãy cẩn thận khi làm việc với những trình duyệt như IE từ 6-11 nhé. . |