Google Chrome menggunakan port pandangan Flexbox untuk menambat arah pengembangan
<p>Terdapat isu dalam Google Chrome apabila elemen diletakkan di dalam bekas Flexbox yang mempunyai <em>bersebelahan</em> item Flex dengan <kod>ruang</kod Kembangkan/runtuhkan> kod>pusat</kod> selaraskan kandungan dalam arah yang berbeza berbanding dengan port pandangan. </p>
<p>Ini bukan masalah dalam Firefox, IE11, Edge atau Safari kerana elemen sentiasa berkembang ke bawah. </p>
<p>Saya ingin tahu:</p>
<ul>
<li>Adakah Chrome berkelakuan mengikut spesifikasi tertentu? Jika ya, yang mana satu? </li>
<li>Jika tidak, mengapa anda melakukannya dalam Chrome? (IMHO, mengklik pencetus yang hilang secara rawak di luar skrin adalah pengalaman pengguna yang mengerikan.) </li>
<li>Adakah mungkin untuk mengubah suai atau melumpuhkan kelakuan Chrome dalam beberapa cara? Sebagai contoh. Melalui CSS atau tag meta? </li>
</ul>
<p><strong>Kemas kini 1: Jika boleh, saya telah menyerahkan isu #739860 pada penjejak pepijat kromium untuk mendapatkan cerapan/penjelasan daripada pembangun Chromium. </strong></p>
<hr>
<p>Dua contoh disisipkan di bawah. Suite ujian penuh yang menerangkan masalah boleh didapati dengan pen ini: https://codepen.io/jameswilson/full/xrpRPg/ Saya memilih untuk menggunakan slipToggle dalam contoh ini supaya pergerakan terungkap/lipat adalah animasi dan menarik perhatian. Tingkah laku yang sama berlaku dengan tab butiran, tetapi tiada sokongan silang penyemak imbas lagi, dan kembangkan/runtuhkan terlalu jantan.</p>
<p><strong>示例 1：Chrome 针对对齐 Flexbox 之间的空格的展开/折叠行为</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$('button').klik(function() {
$(this).next().slideToggle();
})</pre>
<pre class="brush:css;toolbar:false;">body {
jidar: 30px;
font-family: sans-serif;
}
diketepikan,
mengetepikan div,
ringkasan,
utama,
butang,
butiran p,
butang + p {
latar belakang: rgba(0,0,0,.09);
sempadan: tiada;
padding: 20px;
margin: 0;
}
.flexcontainer {
paparan: flex;
}
ketepikan {
lentur: 1;
kedudukan: relatif;
lebar maksimum: 25%;
latar belakang: pudina;
paparan: flex;
flex-direction: lajur;
kedudukan: relatif;
}
aside.space-antara {
justify-content: ruang-antara;
}
aside.center {
justify-content: pusat;
}
utama {
lentur: 3;
kedudukan: relatif;
lebar maksimum: 75%;
latar belakang: aliceblue;
vertical-align: atas;
ketinggian: 100%;
}
utama > * + * {
jidar atas: 20px;
}
butang + p {
paparan: tiada;
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</skrip>
<section class="flexcontainer">
<aside class="space-between">
<div>Bar Sisi Atas</div>
<div>Bar Sisi Bawah</div>
</ketepikan>
<utama>
<div>
<butang>slideToggle</button>
<p>Pelayar lain: sentiasa mengembang ke bawah.<br>
Chrome: Harus sentiasa berkembang ke bawah kerana Bar Sisi Atas sentiasa kelihatan.</p>
</div>
<div>
<butang>slideTogol (biasanya mengembang ke bawah)</button>
<p>Pelayar lain: sentiasa mengembang ke bawah.<br>
Chrome: Harus berkembang ke bawah manakala Bar Sisi Bawah dan Bar Sisi Atas kedua-duanya kelihatan. Tetapi akan berkembang ke atas jika anda menatal ke bawah dengan cukup jauh supaya Bar Sisi Atas berada di luar skrin.</p>
</div>
<div>
<butang>slideTogol (biasanya mengembang ke bawah)</button>
<p>Pelayar lain: sentiasa mengembang ke bawah.<br>
Chrome: Harus berkembang ke bawah manakala Bar Sisi Bawah dan Bar Sisi Atas kedua-duanya kelihatan. Tetapi akan berkembang ke atas jika anda menatal ke bawah dengan cukup jauh supaya Bar Sisi Atas berada di luar skrin.</p>
</div>
</utama>
</section></pre>
</p>
<p><strong>示例 2：Chrome 对居中对齐的 Flexbox 的展开/折叠行为</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$('button').klik(function() {
$(this).next().slideToggle();
})</pre>
<pre class="brush:css;toolbar:false;">body {
jidar: 30px;
font-family: sans-serif;
}
diketepikan,
mengetepikan div,
ringkasan,
utama,
butang,
butiran p,
butang + p {
latar belakang: rgba(0,0,0,.09);
sempadan: tiada;
padding: 20px;
margin: 0;
}
.flexcontainer {
paparan: flex;
}
ketepikan {
lentur: 1;
kedudukan: relatif;
lebar maksimum: 25%;
latar belakang: pudina;
paparan: flex;
flex-direction: lajur;
kedudukan: relatif;
}
aside.space-antara {
justify-content: ruang-antara;
}
aside.center {
justify-content: pusat;
}
utama {
lentur: 3;
kedudukan: relatif;
lebar maksimum: 75%;
latar belakang: aliceblue;
vertical-align: atas;
ketinggian: 100%;
}
utama > * + * {
jidar atas: 20px;
}
butang + p {
paparan: tiada;
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</skrip>
<section class="flexcontainer">
<tepikan class="center">
<div>Bar Sisi Tengah</div>
</ketepikan>
<utama>
<div>
<butang>slideTogol (biasanya mengembang ke bawah)</button>
<p>Pelayar lain: sentiasa mengembang ke bawah.<br>
Chrome: Biasanya mengembang ke bawah. Berkembang dalam kedua-dua arah apabila bahagian tepi atas bekas menatal keluar dari port pandangan.</p>
</div>
<div>
<butang>slideToggle</button>
<p>Pelayar lain: sentiasa mengembang ke bawah.<br>
Chrome: Biasanya mengembang ke bawah. Berkembang dalam kedua-dua arah apabila bahagian tepi atas bekas menatal keluar dari port pandangan.</p>
</div>
<div>
<butang>slideTogol (biasanya mengembang ke bawah)</button>
<p>Pelayar lain: sentiasa mengembang ke bawah.<br>
Chrome: Biasanya mengembang ke bawah. Berkembang dalam kedua-dua arah apabila bahagian tepi atas bekas menatal keluar dari port pandangan, tetapi kemudian meneruskan pengembangan ke bawah sekali lagi apabila Bar Sisi Tengah menatal keluar dari paparan.</p>
</div>
</utama>
</section></pre>
</p>
