Học Flexbox CSS qua ví dụ | Flexbox CSS | Flexbox layout | Flexbox example | Flexbox trong CSS
HTML-код
- Опубликовано: 4 фев 2020
- 👉 Khóa Học HTML CSS Pro tốt nhất bạn có thể tìm thấy: fullstack.edu.vn/landing/htmlcss
👉 XEM LỘ TRÌNH HỌC: fullstack.edu.vn/learning-paths
Trong video này, chúng ta sẽ cùng học các thuộc tính CSS Flexbox qua các ví dụ trong thực tế.
Link code Flexbox CSS sử dụng trong video:
codepen.io/ng-ngc-sn-the-bash...
#hoclaptrinh #frontend #html-css #javascript #backend #devops
Tham gia các khóa học MIỄN PHÍ tại F8 tại đây nhé (đã quyết định theo thì hãy cố gắng đến cùng):
1. Kiến thức & cái nhìn tổng quan về ngành: fullstack.edu.vn/courses/less...
2. Code giao diện trang web với HTML, CSS: fullstack.edu.vn/courses/html...
3. Xử lý hiển thị tốt giao diện trên nhiều thiết bị khác nhau (responsive): fullstack.edu.vn/courses/resp...
4. Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
5. Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java...
6. Lập trình Backend với Node & ExpressJS: fullstack.edu.vn/courses/nodejs
----------------------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: bit.ly/3muevdD
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (bit.ly/34rl0Yr)
Tự động đóng thẻ: Auto Close Tag (bit.ly/3mwoJue)
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (bit.ly/3nB0ADS)
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (bit.ly/37wgXfC)
Icon theme: Material Icon Theme (bit.ly/37ukU4b)
Hiển thị thông tin Git (commit, author, ...): Gitlens (bit.ly/3gYlaf9)
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức cơ bản, cốt lõi cho dân IT: fullstack.edu.vn/courses/less...
HTML, CSS từ zero đến Hero: fullstack.edu.vn/courses/html...
Xây dựng web responsive: fullstack.edu.vn/courses/resp...
Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
Xây dựng web với Node & Express: fullstack.edu.vn/courses/nodejs
HTML, CSS tips: fullstack.edu.vn/courses/html...
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool...
Xem thêm tại: fullstack.edu.vn/courses
☻ Chú ý :
- Không văng tục chửi bậy, bình luận có văn hóa.
- Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.
☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
- Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
- Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
- Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnmc
Nhóm Học Lập Trình Web: / f8official
Email: sondnf8@gmail.com
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức. 
Наука
![[Flexbox nâng cao] Liên hệ Flex model với các thuộc tính Flexbox trong CSS](http://i.ytimg.com/vi/Ma8q2RYH5qY/mqdefault.jpg)
![[Flexbox nâng cao] Liên hệ Flex model với các thuộc tính Flexbox trong CSS](/img/tr.png)
👉Khóa Học HTML CSS Pro tốt nhất bạn có thể tìm thấy: fullstack.edu.vn/landing/htmlcss
ai có link bài tập cho mình xin với ạ :'(
anh oi sao em vao link khong duoc vay anh
anh ơi cho em xin link bài tập của mình vs ạ
@@otaiey2858 b có link bài tập của bài này k
Học lý thuyết không hiểu, vô học khóa anh hiểu cặn kẽ luôn . thấu hiểu những cái người mới học không hiểu và giải thích đơn giản - dễ hiểu. FREE nhưng RẤT CHẤT LƯỢNG
anh làm rất có tâm,nói rất dễ nghe dễ hiểu
em là một sinh viên năm nhất ngành tkđh đang học đến phần lập trình web. rất cảm ơn anh vì những bài giảng cực kì có tâm như này ạ
quá tuyệt vời đăng kí học bên funix mà toàn qua bên này học. cảm ơn f8
khoá học FE có tâm nhất từ trước đến giờ đây rồi, cảm ơn a. vẫn đang hóng những bài giảng của a :))
Anh Sơn làm ứng dụng thực thế qua dự án thực tế như này, rất hay và cuốn hút... vừa có sản phẩm thực tế vừa học thêm được công nghệ...like 1000 lần cho anh
Đang làm lại ví dụ của anh Đặng Sơn, liền chạy vô đây để cảm ơn anh rất nhiều bởi vì nhờ bài giảng này mà em đã làm được nhiều thứ từ thuộc tính này, với một người mới học lập trình như em thì video thật sư giúp em rất nhiều. Cám ơn anh Đặng Sơn một lần nữa. Chúc anh ngày càng mạnh khỏe và thành công.
Không có từ nào để chê được khóa học này. Cảm ơn F8 Official. Mong rằng kênh sẽ ra nhiều khóa học hơn nữa
This is the best lesson about flex box. Thank you so much for sharing.
học cái hiểu hết luôn á thầy. e cảm ơn thầy đã bỏ thời gian ra làm những video như thế này ạ. Chúc thầy có thật nhiều sức khỏe ạ
Anh giảng hay dễ hiểu, giọng quá đã, truyền đạt cực kỳ first
Em xin gửi lời cảm ơn đến Anh, khóa học của anh rất bổ ích ạ.
Video quá hay và dễ hiểu. Cảm ơn bạn rất nhiều. Mong chờ nhiều series video hay của bạn.
Video chất lượng quá ạ , vừa bổ sung kiến thức mới lại còn giúp ôn lại kiến thức cũ 😊
Khóa học rất hay anh ạ, sau đợt bảo vệ này chắc em phải xem kĩ hơn
OKie e. Học tốt nha e
Đỉnh của chóp. Nếu không có người giảng dạy như anh thì ko biết bao giờ mới hiểu rõ đc flex như thế này.
{ kênh làm flex-box dễ hiểu nhất việt nam;
tuyệt vời;
cảm ơn anh; }
Nội dung hay, ví dụ thực tế, cảm ơn anh ạ!
Anh giảng bài hay quá , rất dễ hiểu !!
Đã xem tới đây. A dạy dễ hiểu quá ạ.
Chưa bao giờ mà xem bài giảng hay và dễ hiểu như vậy
Video rất tuyệt vời, chúc bạn có nhiều sức khỏe chia sẽ nhiều kiến thức cho anh em
cảm ơn anh rất nhiều , chúc anh luôn mạnh khỏe để giúp mọi người nhiều hơn nữa !
anh dạy rất dễ hiểu và có tâm
Cảm ơn anh, anh dạy học rất có tâm
Anh giảng rất dễ hiểu, cảm ơn anh nhiều
Rất dễ hiểu. Cảm ơn nhiều!
Giọng bạn hay thiệt với lại bạn giảng có tâm
Ui vừa xem vừa sướng cả người :D cảm ơn anh
Thank bạn. Quá hay và dễ hiểu!!
Video của anh giải thích rất chi tiết và cặn kẽ , chứng tỏ anh hiểu biết rất sâu và rõ. Cảm ơn a vì đã đóng góp cho cộng đồng
cảm ơn a vì bài giảng rất tâm huyết :))) em đã like video và sub ủng hộ
Học trên youtube đụng tới bài này hơi khó hiểu , nhưng mà vào khóa anh có bài tập vừa đọc vừa làm dễ hiểu cực
Em đang cày lại mà thấy anh dạy hay quá !! Em cảm ơn anh!
chắc giờ bạn cũng đi làm rồi nhỉ - giờ mình mới học lại không biết có trụ nổi không
vid chứa đầy đủ các nội dung của flexbox, tuyệt
Rất hay. Chân thành cảm ơn
chất lượng quá a ạ.
bài giảng của anh bài bản thứ tự dễ vào quá ạ, trước em có từng học html css r mà vẫn phải cày lại :))))
cảm ơn anh ạ video rất hữu ích
phải nói là cực dễ hiểu luôn
Cảm ơn anh Sơn nhiều lắm ạ
Cảm ơn anh đã cho em một bài học thật bổ ích! Bài giảng rất có tâm và dễ hiểu
anh ơi anh có thể cho e xin 13 dòng css đầu được k a
không thể tin được mấy cái này free luôn á =)) quá tuyệt vời thầy Sơn
Cảm ơn Thầy Sơn rất nhiều I love you
Thích bài này nhất ❤
hay thực sự, giá mà đại học cũng dạy như này, giáo trình trường em dạy kiểu đâm ngang xương không, mà toàn lý thuyết ko đưa ra thực hành cụ thể, may xem được clip này chứ không cũng bỏ ngành này r
Hay quá anh ơi
Anh giảng hay và chi tiết thật sự ấy =))). Xem video của anh mới biết học Css chưa bao giờ là đủ. Hóng a ra tiếp video
bác biết code từ dòng 13 2:27 trở xuống ở phần css ko, giúp em với e ko tạo đc cái thanh cam như video
quá hay anh ạ
hay tuyet anh oi
Hay thật sự
Bài này em thấy hay nhất trong các bài
hay quá a !
hay quá a ơi
hay quá a
Khóa frontend của a rất hay, mong a ra video nhanh nhanh tới phần cắt web
Từ tuần sau bắt đầu cắt web nha em
khóa có mất phí không anh
Khoá học free quá bổ ích, em học bên trung tâm còn dạy không kĩ bằng Anh.
cái này hay thật đấy a ạ, đỡ css thường nhiều
thanks anh
thanks anh alot
Xin cảm ơn
hay 😀
Lúc đầu học phần này còn mơ hồ lắm. Giờ làm mấy dự án gặp nó tự nhiên hiểu ra và thành thạo luôn 😅
Qúa chất lượng luôn
Cảm ơn em nha
Khoá này hay cực
Cảm ơn em nhé
Tham gia các khóa học MIỄN PHÍ tại F8 tại đây nhé (đã quyết định theo thì hãy cố gắng đến cùng):
1. Kiến thức & cái nhìn tổng quan về ngành: fullstack.edu.vn/courses/lessons-for-newbie
2. Code giao diện trang web với HTML, CSS: fullstack.edu.vn/courses/html-css
3. Xử lý hiển thị tốt giao diện trên nhiều thiết bị khác nhau (responsive): fullstack.edu.vn/courses/responsive-web-design
4. Lập trình Javascript cơ bản: fullstack.edu.vn/courses/javascript-co-ban
5. Lập trình Javascript nâng cao: fullstack.edu.vn/courses/javascript-nang-cao
6. Lập trình Backend với Node & ExpressJS: fullstack.edu.vn/courses/nodejs
---
Nice
đó giờ mình chưa bao giờ nghĩ đồ free thì ngon hơn trả phí cả ,c ho tới khi mình gặp f8
Đẳng cấp vũ trụ
a cho em hỏi là visual studio code anh dùng font gì vậy ạ?
Video bài giảng trên channel này có gì khác với trên website admin nhỉ? Thấy giống nhau
Chắc best Evelynn đây rồi :))
13:31, mình cho flex: 1 xong justify-content : space-around vẫn được đúng không anh, ko cần dùng flex-basis
Em hay set cứng width và height cho toàn bộ div trong html . Liệu có đúng ko anh ?
anh ơi cái tool lúc a cắt lấy trị số width với height là gì ý ạ
có phần dạy cắt psd chưa anh ?
28:22 em dùng flex-wrap: wrap; được không ạ?
2 thẻ form và label mấy bài trước anh chưa dạy làm phải tìm lú cái đầu mới hiểu đc :))
Mấy cái thầy dạy có giống reponsvi trong boostrap k thầy
anh ơi cho em hỏi là mình có nên dùng bootstrap thay thế cho css luôn được không ?
min-width : 740px độ dài tối thiểu của màn hình {}
video 32 trong danh sách từ "HTCM, CSS zero tới Hero" bị xóa r hả anh?
a ơi vậy cái display: flex để làm gì vậy, khi em bỏ cái đó đi cho flex: 1 thôi thì thanh trống nó không dài ra, có display: flex thì thanh nó mới dài ra. Anh cho em hỏi tại sao ạ
làm hay lắm bạn ơi, cám ơn, mà sao không qua phần lan sống
a ơi a có mở lớp off k a? mong nhận dc hồi đáp của a
sao thuộc tính flex-wrap vs @media(min-width){ flex-direction: row} nó hơi giống vậy anh
13:02 cái này không dùng flex basis mà dùng width thì khác gì ko anh?
cái công cụ mà anh ấn vào syntax nó hiện ra những cái elements có thể chọn trên vscode là gì vậy ạ
12:00 flex-basis
sao em học đến đoạn này cảm tháy hơi khó hiểu vậy nhỉ, có phải do video thứ 32 bị xóa nên vậy không ạ ?
Mọi người ơi, cho mình hỏi tại sao mình đặt kích thước chỉ cho 1 flex-item thì không được ạ? VD: Ở khối column layout, mình muốn đặt cho phần tử ở giữa là 80%, thì mình chỉ CSS cho cột main-column là flex-basic: 80%, nhưng nó lại không cho kết quả như mong đợi là vì sao vậy ạ?
Mình áp dụng để chỉnh trong thanh header của mình nhưng menu không thể cạnh giữa. Mình đang để là positive là relative và display là block. Khi đó padding là 0 10px và margin là 0. Thanh header có một logo bên góc trái. Bạn hướng dẫn dùm.
21:05 align-items
Mình hỏi chút addon dùng ở 14:28 là gì vậy? Cảm ơn
17:27 cho em hỏi tại sao khi em để flex-basics: 10% cho cái wrap-layout__item thì nó ko xuống dòng đc ạ?
A ơi, e ngày nào cũng học ở kênh a, a cho e lời khuyên về học tiếng anh như thế nào với ạ, có cần phải pro ko a, hay chỉ học từ vựng chuyên dụng ngành thôi ạ
cần phải hỏi à bạn học ko bh là thừa
Chỉ cần học từ chuyên ngành thôi bạn
Cứ học đi, tiếng anh bây giờ là kỹ năng bắt buộc phải có rồi, bh coi nó cần thiết như kiểu học đọc học viết chứ ko phải là 1 năng lực nữa.
align-content với align-item khác nhau những điểm gì anh nhỉ?
Chỗ feature, form,center làm sao mình có được cái viền màu xám ở ngoài vậy ạ ?
Tại sao video này anh không thiết kế rồi code từ đầu ạ chứ có nhiều chỗ thêm html nó chưa có cái cơ bản hơi khó theo ạ?