Pemanas air yang rosak dan kotak basah mengajar saya tentang flexbox.

Pemanas air kami rosak. Saya masuk ke garaj dan terdengar air mengalir. Periksa paip rumah, tandas tidak berjalan, Periksa di luar. tiada hos padam. periksa semula garaj masih mendengar air, mungkin ia hanya bunyi kerana gas memanaskan air. Berjalan dan ada air di lantai.

Pemanas Air bocor dari atas. Terdapat lopak di atas lantai dan melalui permaidani. Kami mempunyai beberapa permaidani lama di atas lantai supaya ia bukan lantai kosong yang sejuk. Ia kini mempunyai aliran melaluinya.

Kotak-kotak yang disimpan di atas permaidani mempunyai air yang merosakkan. Kotak basah dan basah. Begitu juga beberapa kandungannya. Terdapat beberapa buku kertas dan beberapa dinosaur Jurassic Park di dalam kotak tersebut. Buku-buku rosak air tetapi kebanyakannya akan kering.

Kotak ini tidak lagi kukuh, ia fleksibel.

Kotak-kotak ini = kotak fleksibel. Yang memberi saya umpan klik LinkedIn seperti tajuk dan alasan untuk menulis tentang flexbox.

Flexbox

Dalam CSS flexbox digunakan untuk menyusun item secara mendatar atau menegak dalam sama ada baris atau lajur. Item akan melentur untuk memenuhi ruang dalam bekas.

Untuk mula menggunakan flex tambahkan paparan:flex pada bekas flex induk yang anda mahu pegang elemen anak anda.

.flex-container {
  display: flex;
}

<flex-container>
  <div>



<p>Then decide if you want row or columns with flex-directionoptions are row, row-reverse, column, and column-reverse. Row lines things up left-to-right, row-reverse lines them right-to-left. You might guess Column and column-reverse are similar but top-to-bottom and bottom-to-top respectively.<br>
</p>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
}

<flex-container>
  <div>



<h2>
  
  
  Justify Content
</h2>

<p>So how to arrange things horizontally? Use justify-content: to align the books in your boxes. Here you have several options.</p>

<ul>
<li>justify-content: center - Aligns items in the center of the container.</li>
<li>justify-content: space-around - Places space at the front and end of the container plus in between each item.</li>
<li>justify-content: space-between - Pushes items to the front and end of the container and place space evenly between the items.</li>
<li>justify-content: flex-start (default) - Aligns at the start of the container.</li>
<li>justify-content: flex-end - Aligns at end of container.
</li>
</ul>

<pre class="brush:php;toolbar:false">.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center; 
}

Imej ini menunjukkan buku berpusat di dalam kotak.

Imej ini menunjukkan buku dengan penggunaan ruang di sekeliling. Terdapat jurang antara permulaan dan penghujung kotak.

Imej ini menunjukkan buku dengan penggunaan ruang antara. Buku ditolak ke hadapan, tengah, hujung kotak dengan ruang di antaranya.

Imej ini menunjukkan flex-start. Semua buku ditolak ke bahagian permulaan atau kiri kotak.

Imej ini menunjukkan hujung lentur. Semua buku ditolak ke hujung atau sebelah kanan kotak.

Penjajaran

Gunakan align-item untuk menjajarkan benda secara menegak di dalam bekas induk.

• selaras-item: flex-start - Jajar di bahagian atas bekas
• selaras-item: hujung lentur - Jajar di bahagian bawah bekas
• align-item: tengah - Meletakkan item di tengah menegak
• align-item: garis dasar - Menjajarkan sepanjang garis dasar di dalam setiap item.
• align-item: regangan (lalai) - Rentang item untuk mengisi ketinggian bekas.

.flex-container {
  display: flex;
}

Diilustrasikan dengan CSS. Imej ini dibuat menggunakan CSS.

Kesimpulan

Ini hanyalah pengenalan kepada flexbox, lihat Wes Bos' What the flex box atau MDN Web Docs untuk penjelasan yang lebih mendalam.