Học Flexbox CSS qua ví dụ | Flexbox CSS | Flexbox layout | Flexbox example | Flexbox trong CSS

Ғылым және технология

👉 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.

Пікірлер: 194

  • @F8VNOfficial
    @F8VNOfficial3 жыл бұрын

    👉Khóa Học HTML CSS Pro tốt nhất bạn có thể tìm thấy: fullstack.edu.vn/landing/htmlcss

  • @otaiey2858

    @otaiey2858

    2 жыл бұрын

    ai có link bài tập cho mình xin với ạ :'(

  • @_NguyenQuocDuy

    @_NguyenQuocDuy

    Жыл бұрын

    anh oi sao em vao link khong duoc vay anh

  • @khoainh9725

    @khoainh9725

    Жыл бұрын

    anh ơi cho em xin link bài tập của mình vs ạ

  • @khoainh9725

    @khoainh9725

    Жыл бұрын

    @@otaiey2858 b có link bài tập của bài này k

  • @namtothanh2818
    @namtothanh28184 жыл бұрын

    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

  • @kevinkhanglego
    @kevinkhanglego4 жыл бұрын

    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

  • @quannguyen-sn6jm
    @quannguyen-sn6jm3 жыл бұрын

    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 ạ

  • @hoanglinhnguyen2807
    @hoanglinhnguyen28074 жыл бұрын

    Anh giảng hay dễ hiểu, giọng quá đã, truyền đạt cực kỳ first

  • @scotlripb8731
    @scotlripb87314 жыл бұрын

    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 :))

  • @learningonline5533
    @learningonline55334 жыл бұрын

    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

  • @linhhandsome8947
    @linhhandsome89472 жыл бұрын

    Em xin gửi lời cảm ơn đến Anh, khóa học của anh rất bổ ích ạ.

  • @petrmai9152
    @petrmai91522 жыл бұрын

    Đỉ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.

  • @enton438
    @enton4384 жыл бұрын

    { kênh làm flex-box dễ hiểu nhất việt nam; tuyệt vời; cảm ơn anh; }

  • @uongta4542
    @uongta45423 жыл бұрын

    Đ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.

  • @lap_trinh_c_cong_cong
    @lap_trinh_c_cong_cong11 ай бұрын

    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ũ 😊

  • @taiothe6612
    @taiothe66123 жыл бұрын

    anh làm rất có tâm,nói rất dễ nghe dễ hiểu

  • @minhngoc9687
    @minhngoc96874 жыл бұрын

    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.

  • @trung3497
    @trung34972 жыл бұрын

    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 ạ

  • @atnguyentien8630
    @atnguyentien86304 жыл бұрын

    Đã xem tới đây. A dạy dễ hiểu quá ạ.

  • @minhnhatnguyen8200
    @minhnhatnguyen82002 жыл бұрын

    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

  • @HaiNguyen-rx2og
    @HaiNguyen-rx2og Жыл бұрын

    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

  • @quocoai3867
    @quocoai38673 жыл бұрын

    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

  • @nguyenthanhtung3625
    @nguyenthanhtung36253 жыл бұрын

    Chưa bao giờ mà xem bài giảng hay và dễ hiểu như vậy

  • @phamvinh8993
    @phamvinh89934 жыл бұрын

    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

  • @linhtrinh6797
    @linhtrinh67972 жыл бұрын

    This is the best lesson about flex box. Thank you so much for sharing.

  • @khoaphan5521
    @khoaphan55212 жыл бұрын

    Anh giảng bài hay quá , rất dễ hiểu !!

  • @nguyenthientu4830
    @nguyenthientu4830 Жыл бұрын

    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 !

  • @nguyenminhhieupoe
    @nguyenminhhieupoe3 жыл бұрын

    Nội dung hay, ví dụ thực tế, cảm ơn anh ạ!

  • @hicee
    @hicee3 жыл бұрын

    Giọng bạn hay thiệt với lại bạn giảng có tâm

  • @musashi_hp
    @musashi_hp3 жыл бұрын

    anh dạy rất dễ hiểu và có tâm

  • @super17542
    @super175422 жыл бұрын

    Anh giảng rất dễ hiểu, cảm ơn anh nhiều

  • @BaoTran-gd8di
    @BaoTran-gd8di2 жыл бұрын

    không thể tin được mấy cái này free luôn á =)) quá tuyệt vời thầy Sơn

  • @learningonline5533
    @learningonline55334 жыл бұрын

    Khóa học rất hay anh ạ, sau đợt bảo vệ này chắc em phải xem kĩ hơn

  • @F8VNOfficial

    @F8VNOfficial

    4 жыл бұрын

    OKie e. Học tốt nha e

  • @tricoo5786
    @tricoo5786 Жыл бұрын

    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

  • @user-sn4jx3yn2v

    @user-sn4jx3yn2v

    9 ай бұрын

    anh ơi anh có thể cho e xin 13 dòng css đầu được k a

  • @quyenphan5905
    @quyenphan59054 жыл бұрын

    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 :))))

  • @Remy46577
    @Remy465772 жыл бұрын

    vid chứa đầy đủ các nội dung của flexbox, tuyệt

  • @trang1812
    @trang1812 Жыл бұрын

    cảm ơn a vì bài giảng rất tâm huyết :))) em đã like video và sub ủng hộ

  • @hoadoan3849
    @hoadoan38493 жыл бұрын

    Cảm ơn anh, anh dạy học rất có tâm

  • @khangta1577
    @khangta15773 жыл бұрын

    Em đang cày lại mà thấy anh dạy hay quá !! Em cảm ơn anh!

  • @TheKing-tt6dg

    @TheKing-tt6dg

    2 жыл бұрын

    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

  • @truongonghuy7471
    @truongonghuy74712 жыл бұрын

    Ui vừa xem vừa sướng cả người :D cảm ơn anh

  • @dongnguyenviet7796
    @dongnguyenviet77963 жыл бұрын

    Rất dễ hiểu. Cảm ơn nhiều!

  • @phamnhuquyet9110
    @phamnhuquyet91102 жыл бұрын

    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

  • @dungg2038

    @dungg2038

    2 жыл бұрын

    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

  • @ionllking7456
    @ionllking74568 ай бұрын

    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

  • @nguyenduongit
    @nguyenduongit Жыл бұрын

    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 😅

  • @tringuyenhoang3266
    @tringuyenhoang32663 жыл бұрын

    Thank bạn. Quá hay và dễ hiểu!!

  • @Black-zm4xj
    @Black-zm4xj2 жыл бұрын

    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.

  • @banghoang6301
    @banghoang63012 жыл бұрын

    Cảm ơn Thầy Sơn rất nhiều I love you

  • @quannguyen3840
    @quannguyen38403 жыл бұрын

    anh ơi cái tool lúc a cắt lấy trị số width với height là gì ý ạ

  • @learnwithme3364
    @learnwithme3364 Жыл бұрын

    chất lượng quá a ạ.

  • @cuocsongtaynguyen89
    @cuocsongtaynguyen892 жыл бұрын

    Rất hay. Chân thành cảm ơn

  • @nguyenthanhbinh9598
    @nguyenthanhbinh95983 жыл бұрын

    Bài này em thấy hay nhất trong các bài

  • @HaNguyen-bq5fp
    @HaNguyen-bq5fp Жыл бұрын

    cái này hay thật đấy a ạ, đỡ css thường nhiều

  • @inhsyduyetkenh5730
    @inhsyduyetkenh57303 жыл бұрын

    Em hay set cứng width và height cho toàn bộ div trong html . Liệu có đúng ko anh ?

  • @SangNguyen-zk2rz
    @SangNguyen-zk2rz3 жыл бұрын

    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 ạ

  • @quanwilliam8511
    @quanwilliam8511 Жыл бұрын

    cảm ơn anh ạ video rất hữu ích

  • @trongtruong112
    @trongtruong1123 жыл бұрын

    a cho em hỏi là visual studio code anh dùng font gì vậy ạ?

  • @leo2_1
    @leo2_12 жыл бұрын

    phải nói là cực dễ hiểu luôn

  • @stevenit24
    @stevenit244 жыл бұрын

    sao thuộc tính flex-wrap vs @media(min-width){ flex-direction: row} nó hơi giống vậy anh

  • @ngongocanh0512
    @ngongocanh05122 жыл бұрын

    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 ạ

  • @chauchau3512
    @chauchau35122 жыл бұрын

    anh ơi cho em hỏi là mình có nên dùng bootstrap thay thế cho css luôn được không ?

  • 2 жыл бұрын

    Cảm ơn anh Sơn nhiều lắm ạ

  • @hoangv5282
    @hoangv52824 жыл бұрын

    28:22 em dùng flex-wrap: wrap; được không ạ?

  • @hungtellus_MEP
    @hungtellus_MEP Жыл бұрын

    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.

  • @NerdBigBird
    @NerdBigBird11 ай бұрын

    Thích bài này nhất ❤

  • @F8VNOfficial
    @F8VNOfficial3 жыл бұрын

    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 ---

  • @HoaPham-rg8rm
    @HoaPham-rg8rm4 жыл бұрын

    video 32 trong danh sách từ "HTCM, CSS zero tới Hero" bị xóa r hả anh?

  • @lehieu5814
    @lehieu58143 жыл бұрын

    Mọi người ơi cho em hỏi tí ạ, em code HTML bằng Visual Studio Code và cứ mỗi khi thả chuột cái là nó hay bị nhảy đi, code rất khó chịu và các thẻ nó cũng tự động lên xuống không tự kiểm soát được, em phải xử lí như nào ạ

  • @theanhnguyen17801
    @theanhnguyen178012 жыл бұрын

    Mấy cái thầy dạy có giống reponsvi trong boostrap k thầy

  • @bh4541
    @bh45412 жыл бұрын

    đó 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

  • @congdatt
    @congdatt3 жыл бұрын

    hay tuyet anh oi

  • @itngocuoc2781
    @itngocuoc27812 жыл бұрын

    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 ạ?

  • @NamLe-sl4qy
    @NamLe-sl4qy2 жыл бұрын

    13:02 cái này không dùng flex basis mà dùng width thì khác gì ko anh?

  • @buiviethoang5977
    @buiviethoang59774 жыл бұрын

    Hay quá anh ơi

  • @BlueSky-lb7cp
    @BlueSky-lb7cp Жыл бұрын

    Chỗ feature, form,center làm sao mình có được cái viền màu xám ở ngoài vậy ạ ?

  • @trantuanat524
    @trantuanat5243 жыл бұрын

    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 ạ ?

  • @hoangh.8887
    @hoangh.8887 Жыл бұрын

    Anh ơi mỗi lần em refesh nó lại load lại từ đàu web làm thế nào để refesh mà nó vẫn ở chỗ mình vừa kéo đến anh ?

  • 2 жыл бұрын

    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

  • @minhtrantuong7339
    @minhtrantuong73392 жыл бұрын

    Anh cho em hỏi coi 2 màn hình cùng lúc v làm sao v anh

  • @nhan88vlog
    @nhan88vlog Жыл бұрын

    Mình hỏi chút addon dùng ở 14:28 là gì vậy? Cảm ơn

  • @builinh4223
    @builinh42232 жыл бұрын

    đoạn keyframes mình ko code được ra giống video nhỉ

  • @TungPham-dt6tr
    @TungPham-dt6tr2 жыл бұрын

    cho em hỏi chút là max-width, min-width nó khác gì width bình thường ạ

  • @hoangphihung1526
    @hoangphihung15262 жыл бұрын

    Cho mình hỏi max-width có tác dụng gì ko ạ mình thấy nó chả khác width gì cả

  • @MN-wi2lm
    @MN-wi2lm4 жыл бұрын

    Khóa frontend của a rất hay, mong a ra video nhanh nhanh tới phần cắt web

  • @F8VNOfficial

    @F8VNOfficial

    4 жыл бұрын

    Từ tuần sau bắt đầu cắt web nha em

  • @tunamusic2314

    @tunamusic2314

    4 жыл бұрын

    khóa có mất phí không anh

  • @nghienreviewphim6789
    @nghienreviewphim6789 Жыл бұрын

    cái phần biểu đồ. sao e làm height:var(--percent) mà nó không nhận chiều cao nhỉ? AI biết chỉ e với

  • @nganguyenbinh7735
    @nganguyenbinh77353 жыл бұрын

    quá hay anh ạ

  • @ngocsangnguyen1434
    @ngocsangnguyen14344 жыл бұрын

    có phần dạy cắt psd chưa anh ?

  • @tnln7893
    @tnln78933 жыл бұрын

    Hay thật sự

  • @Bieno-pb7lo
    @Bieno-pb7lo Жыл бұрын

    align-content với align-item khác nhau những điểm gì anh nhỉ?

  • @TheKing-tt6dg
    @TheKing-tt6dg2 жыл бұрын

    phần form layout em code giống vậy mà sao nó khác thế nhỉ - em không hiểu phần form tạo màu xám kiểu j - trong khi ở code anh không có tạo màu xám cho phần form đó

  • @trunglengoc3853
    @trunglengoc3853 Жыл бұрын

    cho mình hỏi trên số 13 bên phần css là gì thế

  • @tungkkaka8290
    @tungkkaka82902 жыл бұрын

    hay quá a !

  • @thangta8147
    @thangta81473 жыл бұрын

    a ơi a có mở lớp off k a? mong nhận dc hồi đáp của a

  • @tinhnguyen2493
    @tinhnguyen24933 жыл бұрын

    hay quá a ơi

  • @tinhtranquoc6625
    @tinhtranquoc66254 жыл бұрын

    hay quá a

  • @buukhanhong40
    @buukhanhong403 жыл бұрын

    Magin auto 16px có nghĩa là sao anh

  • @HienNguyen-vf7jw
    @HienNguyen-vf7jw2 жыл бұрын

    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 ạ?

  • @luuuckhanh4692
    @luuuckhanh46922 жыл бұрын

    Phần màu xám chứa form-container là gì vậy mọi người mình code theo y video nhưng không có

  • @nguyenthanhbinh9598
    @nguyenthanhbinh95983 жыл бұрын

    Sao em cũng margin: auto mà chữ nó ko ra giữa nhỉ

  • @DucLe-hc8kz
    @DucLe-hc8kz9 ай бұрын

    hay 😀

  • @cuoi5842
    @cuoi5842 Жыл бұрын

    làm sao để xem được full code ạ

  • @nguyenngocle6542
    @nguyenngocle65424 жыл бұрын

    Khoá này hay cực

  • @F8VNOfficial

    @F8VNOfficial

    4 жыл бұрын

    Cảm ơn em nhé

  • @trunguc6711
    @trunguc67112 ай бұрын

    thanks anh

  • @TranNguyen-mv6ln
    @TranNguyen-mv6ln Жыл бұрын

    Xin cảm ơn

Келесі