本篇文章主要给大家简单介绍css flex弹性盒子布局的基础知识。
在之前的文章中给大家介绍过css Grid网格布局，本节继续给大家介绍css中的flex弹性布局。
flex弹性布局是css3中的一个有效的布局方式。
引入弹性盒布局模型（flex box）的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。
或者说当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
那什么是flex容器？
采用Flex布局的元素，称为Flex容器（container），简称”容器”。
推荐flex布局视频教程：《2018最新5个flex弹性布局视频教程》
flex弹性布局简单的代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
</head>
<style>
.box1{
background: #1F376D;
height: 500px;
width: 500px;
}
.box2{
background: #745A74;
height: 500px;
width: 500px;
}
.box3{
background: #26A3CF;
height: 500px;
width: 500px;
}
.box4{
background: #CCCC66;
height: 500px;
width: 500px;
}
</style>
<body style="display: flex; flex-direction: row">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box3"></div>
<div class="box1"></div>
</body>
</html>效果如下图：
我们可以设置使用display: flex;属性，让盒子具有弹性布局的属性。
flex-direction 属性规定灵活项目的方向。
而项目就是容器成员，称为Flex项目（item），简称”项目”。
flex-direction可以有不同的属性值：
row：默认值。灵活的项目将水平显示，如本例中项目从右到左水平展示。
row-reverse：与 row 相同，但是以相反的顺序。
column：灵活的项目将垂直显示。
column-reverse：与 column 相同，但是以相反的顺序。
initial：设置该属性为它的默认值。
inherit：从父元素继承该属性。
注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。
本篇文章就是关于flex弹性盒子布局的简单介绍，希望对感兴趣的朋友有一定的帮助！
Atas ialah kandungan terperinci 弹性盒子布局flex是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
Dreamweaver CS6
Alat pembangunan web visual
