Saya ingin menyelaraskan elemen ke kanan. Saya tahu bahwa saya harus menggunakan float right untuk menyelaraskan elemen ke kanan, tetapi saya memiliki proyek yang kompleks dan saya perlu memahami mengapa margin: 0 0 0 auto; sejajarkan elemen ke kanan dalam suatu kasus dan mengapa itu tidak berfungsi dalam kasus lain.

Ketika wadah adalah wadah fleksibel, margin: 0 0 0 otomatis; menyelaraskan elemen ke kanan seperti yang Anda lihat dalam contoh ini:

div {
  display: flex;
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
}
<div>
  <span>test</span>
</div>

Tetapi ketika wadah bukan wadah fleksibel, item tetap di sebelah kiri:

div {
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
}
<div>
  <span>test</span>
</div>

Jadi pertanyaan saya adalah:

  • Apakah mungkin untuk menyelaraskan item dengan margin ke kanan tanpa menggunakan flex pada wadah?
  • Apakah contoh Flex berfungsi sebagaimana mestinya atau apakah itu bug di flexbox?
11
Roland Soós 13 Maret 2017, 11:49

2 jawaban

Jawaban Terbaik
  1. Margin otomatis di flexbox menggantikan perataan default. artikel ini menjelaskan.
  2. Menempatkan margin otomatis pada elemen sebaris seperti <span> akan diabaikan. Margin otomatis berfungsi pada elemen blok dan akan terlihat jika lebih kecil dari elemen yang memuatnya. Jika tidak diberi lebar apa pun, maka secara default elemen blok adalah 100%. Lihat Cuplikan.

SNIPPET

div {
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
  display: block;
  width: 100px;
  border: 1px dashed red;
}
<div>
  <span>test</span>
</div>
7
zer00ne 13 Maret 2017, 09:13

Ini bukan bug di flex atau ada hubungannya dengan margin bukan. Anda selalu dapat membuat konten apa pun dengan margin, tetapi yang terjadi di sini adalah,

Dalam kasus 1 (dengan display: flex):

Secara sederhana flex selalu mengharapkan wadah yang terisi, sehingga akan mengisi ruang yang tersisa dengan margin. Di sini Anda telah memberikan margin: 0 0 0 auto. Jadi Anda telah menyebutkan atas menjadi 0, kanan menjadi 0, bawah menjadi 0 dan kiri menjadi otomatis. Karena Anda menentukan kiri menjadi otomatis, flexbox mengisi elemen kiri dengan margin, sehingga elemen muncul ke kanan. Tetapi cara yang lebih baik untuk melakukannya adalah dengan memberikan margin-left tertentu daripada otomatis, dan menggunakan properti justify-content ke wadah

div {
  justify-content: flex-end;
  display: flex;
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 0; //can be 0 or 10px or any exact value.
}

Dalam kasus 2: Anda belum menyebutkan jenis tampilan apa pun, jadi secara default akan menjadi block, di blok itu tidak akan mengharapkan wadah diisi seperti di flex. Jadi otomatis di margin: 0 0 0 auto diambil sebagai 0. Jadi konten ditempatkan di kiri sendiri. Tidak ada cara langsung untuk menyelaraskan di blok seperti justify-content di flex. Namun bisa dilakukan dengan banyak cara, seperti menggunakan float, setting position ke absolute dan right ke 0.

Saya pribadi suka menggunakan flex ketika harus bermain-main dengan keberpihakan.

2
Amir Suhail 13 Maret 2017, 10:01