flex布局入门

最新推荐文章于 2025-05-01 09:00:00 发布
原创 最新推荐文章于 2025-05-01 09:00:00 发布 · 291 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了Flex布局的特点、兼容性和核心概念，包括容器属性如flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content，以及子元素属性如order、flex-grow、flex-shrink、flex-basis和align-self。通过实例演示了各种属性的效果，强调动手实践是快速掌握Flex布局的关键。

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

flex - 弹性布局

特点：简单 快捷 方便

兼容性： 现代浏览器对其兼容性已经很好，老古董ie 除外
在这里插入图片描述

flex相关概念示意图
在这里插入图片描述
container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布局模型了，上图中还有主轴和纵轴分别是布局的一个方向，后面的属性会详细说到。

先展示一下具体概念：

容器属性：

属性名属性的含义属性值
容器属性flex-direction子元素的排列方向row,row-reverse,column,column-reverse
容器属性flex-wrap容器中子元素排列不下时 采用的换行方式nowrap,wrap,wrap-reverse
容器属性flex-flowflex-direction 及 flex-wrap的属性简写默认值 row nowrap
容器属性justify-content子元素在主轴上的排列方式flex-start,flex-end,center,space- between,space-around
容器属性align-items子元素在另一轴上的排列方式flex-start,flex-end,center，baseline，stretch
容器属性align-content多跟轴线的对其方式flex-start,flex-end,center，space- between,space-around，stretch
子元素属性order控制子元素的排列顺序0,1… 数字越小越靠前
子元素属性flex-grow当有多余空间时子，子元素的放大比例，默认0，不放大0,1,2…
子元素属性flex-shrink当空间不足时，子元素的缩小比例，默认1，进行缩小1,0
子元素属性flex-basis子元素在容器中占据的空间长度值，默认auto
子元素属性flexflex-grow，flex-shrink, flex-basis 合并写法默认值 0 1 auto
子元素属性align-self单个子元素独特的对齐方式同align-items 会覆盖 align-item

基本概念结束：

now !!!

code && demo
flex-direction

/*css*/
*{
   margin: 0;
     padding: 0;
 }
 .content{
     width: 800px;
     height: 500px;
     border: 1px solid #11caff;
     display: flex;
     flex-direction: row;
 }
 .item{
     border: 1px solid #000;
 }

/*dom*/
<div class="content">
   <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
</div>

在这里插入图片描述
上述css flex-direction: row; 替换成 flex-direction: row-reverse；
在这里插入图片描述
上述css flex-direction: row-reverse； 替换成 flex-direction: column;
在这里插入图片描述
上述css flex-direction: column; 替换成 flex-direction: column-reverse;
在这里插入图片描述
flex-wrap: nowrap|wrap|wrap-reverse

/*css*/
*{
  margin: 0;
     padding: 0;
 }
 .content{
     width: 800px;
     height: 500px;
     border: 1px solid #11caff;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
 }
 .item{
     width: 300px;
     border: 1px solid #000;
 }
/*dom*/
<div class="content">
   <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
</div>

在这里插入图片描述
上述代码 flex-wrap: nowrap; 替换为 flex-wrap: wrap;

在这里插入图片描述
上述代码 flex-wrap: wrap; 替换成 flex-wrap: wrap-reverse;

在这里插入图片描述
flex-flow: flex-direction flex-wrap 的简写；
运行结果图 略

justify-content: flex-start|center|flex-end|space-between|space-around;

/css/
*{
margin: 0;
padding: 0;
}
.content{
width: 800px;
height: 500px;
border: 1px solid #11caff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.item{
border: 1px solid #000;
}
/dom/

item1
item2
item3
``` ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190529110840346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjAxMDU2,size_16,color_FFFFFF,t_70) 上述代码 justify-content: flex-start; 替换成 justify-content: center; ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190529111246266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjAxMDU2,size_16,color_FFFFFF,t_70) 上述代码 justify-content: center; 替换成 justify-content: flex-end; ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190529111517402.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NjAxMDU2,size_16,color_FFFFFF,t_70) 上述代码justify-content: flex-end; 替换成 justify-content: space-between;

在这里插入图片描述
上述代码替换成 justify-content: space-around；

在这里插入图片描述
注意： 上述代码替换成 justify-content:space-evenly;
but 在安卓上存在兼容性问题
在这里插入图片描述
容我喝口水缓一缓！！！

align-items: flex-start|flex-end|center|baseline|stretch;

/*css*/
*{
   margin: 0;
    padding: 0;
}
.content{
    width: 800px;
    height: 500px;
    border: 1px solid #11caff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
}
.item1{
    border: 1px solid #000;
    height: 100px;
}
.item2{
    border: 1px solid #000;
    height: 150px;
}
.item3{
    border: 1px solid #000;
    height: 200px;
}
/*dom*/
<div class="content">
     <div class="item1">item1</div>
     <div class="item2">item2</div>
     <div class="item3">item3</div>
 </div>

在这里插入图片描述

上述代码 align-items: flex-start; 改为 align-items: flex-end;
在这里插入图片描述
上述代码 align-items: flex-end; 改为 align-items: center;
在这里插入图片描述
上述代码 align-items: center; 改为 align-items: baseline;

在这里插入图片描述
上面代码改为

/*css*/
 *{
      margin: 0;
       padding: 0;
   }
   .content{
       width: 800px;
       height: 500px;
       border: 1px solid #11caff;
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       justify-content: space-around;
       align-items: stretch;
   }
   .item1{
       border: 1px solid #000;
   }
   .item2{
       border: 1px solid #000;
       font-size: 50px;
   }
   .item3{
       border: 1px solid #000;
   }
   /*dom*/
   <div class="content">
       <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
    </div>

运行结果：
在这里插入图片描述
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content 只对多行有效果 align-items 对多行和单行都有效果
接下来详细看一下 align-content

/**css**/
 *{
    margin: 0;
      padding: 0;
  }
  .content{
      width: 800px;
      height: 500px;
      border: 1px solid #11caff;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: center;
  }
  .item1{
      width: 500px;
      border: 1px solid #000;
  }
  .item2{
      width: 200px;
      border: 1px solid #000;
      font-size: 50px;
  }
  .item3{
      width: 200px;
      border: 1px solid #000;
  }

/*dom*/
 <div class="content">
    <div class="item1">item1</div>
     <div class="item2">item2</div>
     <div class="item3">item3</div>
 </div>

在这里插入图片描述
上述代码 align-content替换为 align-content: flex-end;
在这里插入图片描述
上述代码 align-content替换为 align-content: center;
在这里插入图片描述
上述代码 align-content替换为 align-content: stretch;
在这里插入图片描述
上述代码 align-content替换为 align-content: space-between;
在这里插入图片描述
上述代码 align-content替换为 align-content: space-around;

在这里插入图片描述
接下来 是子元素属性（简单说一下）很容易理解
order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex 为 flex-grow,flex-shrink,flex-basis 的合并写法。
align-self ：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self属性举个栗子

/*css*/
 *{
     margin: 0;
       padding: 0;
   }
   .content{
       width: 800px;
       height: 500px;
       border: 1px solid #11caff;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: flex-start;
       align-items: flex-start;
   }
   .item1{
       width: 300px;
       border: 1px solid #000;
   }
   .item2{
       width: 200px;
       border: 1px solid #000;
       font-size: 50px;
       align-self: center;
   }
   .item3{
       width: 200px;
       border: 1px solid #000;
   }
   /*dom*/
   <div class="content">
      <div class="item1">item1</div>
       <div class="item2">item2</div>
       <div class="item3">item3</div>
   </div>

在这里插入图片描述
以上是flex 布局的基础知识

忠告： 要更快的掌握 请动手实践。。。

补充一张图

在这里插入图片描述

FLEX简单的入门快速总结
01-11
FLEX 数据绑定 Flex HTTPservice使用 Flex 创建自定义事件。 其它入门基础等。
flex 布局基础入门
m0_56966142的博客
02-19 560
一、flex 布局基础 1.1 flex 布局与传统布局 优缺点 传统布局 flex布局 兼容性好 操作方便，布局简单，移动端应用广泛 布局繁琐 PC端浏览器支持 1.2 flex 布局原理 1. 概述 flex 是 flexible Box 的缩写，意为"弹性布局"， 用来为盒状模型提供最大的灵活性，任何一个容器都可以 指定为 flex 布局。 Flex弹性盒模型的优势在于只需声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度
CSS布局-flex布局入门教程
03-29 189
前言 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 查询兼容 Flex 布局是什么 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .flexBox...
图文并茂 最详细的flex布局入门介绍 十分钟带你玩转flex布局
qq_42077395的博客
03-17 1万+
前奏 作为一个热衷后台开发的程序猿，自己对于前端页面布局掌握的真的不是太好，以前做过的大多数页面都是用bootstrap框架快速搭建的。在大学期间，页面布局仅仅学过一些table布局，div+css布局，瀑布流式布局，圣杯布局等等，前段时间在微信小程序上布局几个页面，发现用position+float布局起来很麻烦，就恶补了下flex布局。 Flex（弹性）布局，2009...
快速入门Flex布局
任性的wo的博客
03-08 666
参考文档： Flex 布局教程：语法篇(阮一峰) Flex 布局教程：实例篇(阮一峰) 在线flex布局样式演示 Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性盒子"，用来为盒状模型提供最大的灵活性 注意：设为Flex布局以后，子元素的float、clear和vertacal-align属性将失效 基本概念 采用Flex布局的元素，称为Flex...
Flex布局入门：初级开发者示例教程
### 知识点：Flex布局的基本概念和使用方法 #### Flex简介 Flex布局，全称Flexible Box Layout，意为弹性盒子布局模型，是一种用于在页面上布置、对齐和分配空间给子项的方式，无论它们的初始大小如何，也不考虑...
Flex布局入门作业5详细解析
该作业任务的描述提到它是一个入门级的代码实践，涉及到Flex布局技术。在前端开发领域，Flex布局是一个非常重要的CSS布局工具，用于创建灵活的响应式布局。Flex布局模型是CSS3中新增的一种布局方式，它能够使容器内...
Flex布局入门详解：从基础到实战
"flex布局布局篇 - 高清非扫描版本，特别适合放在kindle中阅读，适用于初学者快速入门" 本文主要介绍了关于CSS3中的Flex布局，也称为 Flexible Box 或 flexbox，这是一种用于创建响应式和动态布局的现代布局模式。...
Flex布局入门教程：弹性盒子的使用和示例解析
资源摘要信息: "flex-layout-demo:Flex布局教程，包含示例代码" Flex布局是CSS3中引入的一种新的布局方式，它被设计用来提供一个更加高效的方式来布置、对齐和分配容器内部元素之间的空间，即使它们的大小未知或是...
flex布局学习
叮当了个河蟹
10-04 468
关于flex布局 学习 Flex 布局，你只要学习几个 CSS 属性，就可以写出简洁优雅复杂的页面布局。 Flex布局是什么？ 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。 在容器中的每个单元块被称之为 flex item，每个项目占据的...
轻松掌握 Flex 布局：从入门到实战
2403_84691304的博客
04-10 2702
Flex 布局入门指南，从开启方式、核心概念讲起，阐述容器与项目属性，搭配代码与配图，借实战案例助你轻松掌握 Flex 布局技巧 。
一文学会CSS Flex布局 - 新手入门指南
最新发布
2401_83607690的博客
05-01 1237
‌作用对象‌：仅适用于包含多行弹性项目的 Flex 容器（需设置或）46。‌核心功能‌：控制多行项目作为一个整体在交叉轴上的分布和对齐方式（如行间距调节、整体居中或拉伸）13。
Flex布局详解
热门推荐
半亩方糖
03-31 12万+
Flex 布局详解 一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex? 解决元素居中问题 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语 三个2 序号 简记 术语 1 二成员 容器和项目(container / item) 2 二根轴 主轴与交叉轴(main-axis / cross-axis) 3 二根线 起始线(main/cross-start)与结束
flex布局基础入门总结(项目属性)
小满的博客
11-10 292
flex布局 项目属性 1.order order 属性定义项目的排列顺序 数值越小，排列越靠前，默认为0 .div { order: <integer>; } 2. flex-grow flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话） 如果一个项目的 flex-...
display:flex; 布局
weixin_34252686的博客
07-26 335
给父元素添加 display:flex; display:-webkit-flex; flex-direction: row | row-reverse | column | column-reverse; 属性决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在...
Flex初学者入门指南
由雪伟的专栏
02-21 493
 常常看到有人问,初学者该怎么学习Flex,我该从哪里入手?我每次都很想耐心的回答这个问题,但还是因为想说的内容太多,反而觉得那时候说肯定会漏掉一些重要的东西和步骤,所以没说。趁现在休息的时间,给自己一点思考,希望写出的东西也能更全面一点。 　　Macromedia Flex 2.0 Explorer　　此玩意称之为Flex Component Library, 虽然说这版本还是Flex2.0
Flex布局入门
weixin_34279246的博客
05-16 176
一、Flex介绍 Flex作为目前主流的弹性布局方式，已经能够完成日常工作中绝大多数场景。本片将结合实例讲述Flex布局中一些常用属性。关于兼容性，请移步MDN Flex布局兼容性。 二、如何使用 如何启用flex布局，很简单，只要按如下设置。 div { display: flex; } 复制代码让我们看看效果，当不设置flex布局，我们写两个div。 <div> &lt...
flex基础快速入门
SailingCoder的博客
03-01 892
Flex 是 Flexible Box 的缩写，意为"弹性布局"。任何一个容器都能使用flex布局。行内元素也可以。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值