要素の横並び

sắp xếp các phần tử theo hàng ngang

今まで、ブロック要素やインライン要素も理解できない、親要素子要素も分からない状態で場当たり的に「要素　横並び」とかで調べた内容でfloat:left;とかを上手く動くまで適当に試してめちゃめちゃ苦戦してました。

trước đây , mình không hiểu gì về phần từ dạng block là gì hoặc phần tử inline, mà cũng chẳng hiểu phần tử cha phần tử con là gì, khi đó sau khi tìm hiểu kiểu như [sắp xếp các yêu tố theo chiều ngang] thì mình đã rất cực khổ khi thực hiện bằng cách float:left; sao cho nó hiển thị được chính xác.

よく分からないけど横並びにさせたい！！って場合にとりあえず使ってみてください。

bây giờ bất cứ khi nào nếu bạn không biết cách để sắp xếp theo chiều ngang thì hãy làm thử

flexbox めっちゃ楽。

flexbox rất dễ sử dụng

並べたい要素くん達が入っている親要素に、display: flex;とCSSで書くだけ！！

chỉ cần chúng ta viết css là display: flex; vào phần tử cha chứa các phần tử mà mình muốn sắp xếp nó là được

下記の例でいくと A B C を横並びにしたい。この場合、ABC達が入っている「field」クラスに対してdisplay: flex;　を書きます! これだけ！

Như ví dụ bên dưới là mình muốn sắp xếp A, B, C theo hàng ngang. Trong trường hợp này mình sẽ viết play: flex; vào class 「field」cái mà đang chứa ABC. Chỉ vậy thôi.

display: flex;　を書く場所間違えちゃうと動かないのでそこだけ注意です!

Nhưng nếu viết display: flex; vào sai chổ thì nó sẽ không hoạt động, vì vậy hãy chú ý nhé.

1<div class="field">
2    <div class="card">A</div>
3    <div class="card">B</div>
4    <div class="card">C</div>
5</div>

1.field {
2    display: flex;
3}

めちゃめちゃ簡単にできちゃいました。要素の間に空白作ったりとかは後で書きます。

Rất đơn giãn là có thể làm được rồi. Còn vấn đề tạo khoảng cách giữa các phần tử với nhau mình sẽ viết sau.

Hết rồi ! Chúc các bạn học tốt.