ｆｌｅｘ　ｄｉｖ

最新推荐文章于 2024-06-25 17:09:18 发布

转载最新推荐文章于 2024-06-25 17:09:18 发布 · 371 阅读

本文详细介绍弹性布局(Flex)的基本概念、使用方法及12个关键属性。通过5个div示例，帮助读者深入理解Flex布局在网页设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹性布局详解——5个div让你学会弹性布局

ｏｒｉｇｉｎａｌ　ｐａｇｅ：　弹性布局　5个ｄｉｖ．．．

前言

JRedu

　在网页制作过程中，布局是我们最重要的一个环节。可以说布局的好坏直接影响到整个网页的成败！布局成，则事半功倍；布局败，则事倍功半。随着移动互联的到来，响应式网站风靡。这也就兴起了一种新兴的布局方式——弹性布局。取代我们之前“display+float+position”的布局形式，采用全新的弹性布局，会让你的网站如丝般顺滑！今天，就让我们一起来学习一下弹性布局，让我们用5个div玩转弹性布局吧~

　本章内容将详细介绍Android事件的具体处理及常见事件。

1 弹性布局简介

弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。

>>> 了解两个基本概念，接下来会频繁提到：

① 容器：需要添加弹性布局的父元素；

② 项目：弹性布局容器中的每一个子元素，称为项目；

>>> 了解两个基本方向，这个牵扯到弹性布局的使用：

① 主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；

② 交叉轴：与主轴垂直的另一方向，称为交叉轴。

2 弹性布局的使用

① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；

③ display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

④ 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

2.1代码实例

<div id="div">
            <div class="div1">1</div>
            <div class="div2">2</div>
            <div class="div3">3</div>
            <div class="div4">4</div>
        </div>

#div{
                width: 400px;
                height: 400px;
                background-color: yellow;
                display: flex;
                
            }
            #div div{
                width: 100px;
                height: 100px;
                background-color: blue;
                color: white;
                font-size: 30px;
                
            }