flex布局学习笔记

最新推荐文章于 2025-05-12 23:42:28 发布
最新推荐文章于 2025-05-12 23:42:28 发布
阅读量547 收藏 16
点赞数 17
文章标签： 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43749732/article/details/144453619
版权

最近学习跳槽面试，发现学习知识总是会遗忘的。不如总结记录下来，方便回忆。

flex布局定义

flex布局又叫弹性布局，伸缩布局，通过给父容器设置dispaly：flex属性，子元素实现弹性布局。父容器实现弹性布局后，子元素的一些属性也会消失，如子元素的float,clear,vertical-align属性

（学习前要了解，flex布局有主轴和副轴的概念，默认横向为主轴，纵向为副轴。）

设置flex  display:flex

设置父元素display:flex后，子元素沿主轴排列

<style>
    div {
        display: flex;
        background-color: pink;
        width: 400px;
        height: 400px;
    }
    div span {
        background-color: red;
        margin: 5px 5px;
        width:50px;
        height: 50px;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

设置主轴方向  flex-direction

flex-direction：row(colum)

row:横向排列 row-reverse:横向反向排列（从右至左）

colum:纵向排列 colum-reverse:纵向排列（从下至上）设置主轴方向

<style>
    div {
        display: flex;
        /* flex父元素属性设置 1.flex-direction 设置主轴方向 排列方式,默认为row横向排列 */
        /*  */
        flex-direction: row;
        /* flex-direction: row-reverse;
        flex-direction: column;
        flex-direction:colum-reverse; */
        background-color: pink;
        width: 400px;
        height: 400px;
    }
    div span {
        background-color: red;
        margin: 5px 5px;
        width:50px;
        height: 50px;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

设置主轴排列方式  justify-content

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

 当主轴是row时，代码效果如下

justify-content:flex-start

<style>
    div {
        display: flex;
        /* flex父元素属性设置 1.flex-direction 设置主轴方向 排列方式,默认为row横向排列 */
        /*  */
        flex-direction: row;
        /* flex-direction: row-reverse;
        flex-direction: column;
        flex-direction:colum-reverse; */
        justify-content: flex-start;
        /* justify-content: flex-end; */
        /* justify-content: center;
        justify-content: space-around;
        justify-content: space-between; */
        background-color: pink;
        width: 400px;
        height: 400px;
    }
    div span {
        background-color: red;
        margin: 5px 5px;
        width:50px;
        height: 50px;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

效果如下 

 

justify-content:flex-end

 

 justify-content:center 

 

 justify-content:space-around

 justify-content:space-between

两端对齐后居中

设置副轴排列方式  align-item

align-item(单行） align-content(副轴换行时对齐方式）

设置换行  flex-wrap

flex-wrap:no-wrap|wrap（默认不换行）

如下图，当子元素宽度总和超过父容器宽度时，子元素宽度会沿着父容器方向被压缩。不足100px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        display: flex;
        /* flex父元素属性设置 1.flex-direction 设置主轴方向 排列方式,默认为row横向排列 */
        /*  */
        flex-direction: row;
        /* flex-direction: row-reverse;
        flex-direction: column;
        flex-direction:colum-reverse; */
        justify-content: flex-start;
        /* justify-content: flex-end; */
         /* justify-content: center; */
        /* justify-content: space-around; */
        /* justify-content: space-between;  */
        background-color: pink;
        width: 400px;
        height: 400px;
    }
    div span {
        background-color: red;
        margin: 5px 5px;
        height: 50px;
        width: 100px;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

设置flex-wrap:wrap后效果

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        display: flex;
        /* flex父元素属性设置 1.flex-direction 设置主轴方向 排列方式,默认为row横向排列 */
        /*  */
        flex-direction: row;
        /* flex-direction: row-reverse;
        flex-direction: column;
        flex-direction:colum-reverse; */
        justify-content: flex-start;
        /* justify-content: flex-end; */
         /* justify-content: center; */
        /* justify-content: space-around; */
        /* justify-content: space-between;  */
        background-color: pink;
        width: 400px;
        height: 400px;
        flex-wrap:wrap
    }
    div span {
        background-color: red;
        margin: 5px 5px;
        height: 50px;
        width: 100px;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

 

flex-flow属性

flex-flow是flex-direction属性和flex-warp的组合写法。如flex-flow:row warp;即可实现行排列和换行操作。

子元素属性

flex属性

设置子盒子占用父盒子剩余空间比例.

如下图，设置父盒子宽度为80%，设置1 3 子容器宽度固定，给子元素2设置flex:1属性后。即可分配父盒子剩余空间，且会因为屏幕大小变化而自适应。

<!-- 设置主轴上元素排列方式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 元素跟着主轴走 */
    /* flex父元素属性设置 1.flex-direction 设置主轴方向 排列方式 */
    div {
        display: flex;
        /* 设置主轴方向，竖向排列,竖向相反排列 */
        flex-direction: row;
        /* flex-direction: column; */
        /* flex-direction: column-reverse;
        flex-direction: row;
        flex-direction: row-reverse; */
        /* justify-content: center; */
        /* justify-content: flex-end; */
        /* justify-content: left; */
        /* justify-content: space-around; */
        justify-content: space-between;
        align-items: center;
        align-content: space-between;
        /* align-items: stretch; */
        /* 是否自动换行 */
        flex-wrap: wrap;  

        background-color: pink;
        width: 80%;
        height: 400px;
    }
    div span:nth-child(1) {
        background-color: red;
        /* flex: 1; */
        margin: 5px 5px;
        height: 50px;
        width: 50px;
    }
    div span:nth-child(2) {
        background-color: red;
        flex: 1;
    }
    div span:nth-child(3) {
        background-color: red;
        /* flex: 1; */
        margin: 5px 5px;
        height: 50px;
        width: 50px;
    }
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

当不设置子元素宽度，设置flex:1时，即可实现子元素平均分配父元素空间操作。

<!-- 设置主轴上元素排列方式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 元素跟着主轴走 */
    /* flex父元素属性设置 1.flex-direction 设置主轴方向 排列方式 */
    div {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;  
        background-color: pink;
        width: 80%;
        height: 400px;
    }
    div span{
        background-color: red;
        flex: 1;
        height: 100px;
        border: 1px solid beige;
    }
    
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果如下：

 

align-self属性

设置子元素本身侧轴排列方式

<!-- 设置主轴上元素排列方式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 元素跟着主轴走 */
    /* flex父元素属性设置 1.flex-direction 设置主轴方向 排列方式 */
    div {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;  
        background-color: pink;
        width: 80%;
        height: 400px;
    }
    div span{
        background-color: red;
        flex: 1;
        height: 100px;
        border: 1px solid beige;
    }
    div span:nth-child(3){
        align-self: flex-end;
    }
    
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果如下:

order属性 

设置子元素顺序，数值越小，越靠前，默认为0；

<!-- 设置主轴上元素排列方式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 元素跟着主轴走 */
    /* flex父元素属性设置 1.flex-direction 设置主轴方向 排列方式 */
    div {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;  
        background-color: pink;
        width: 80%;
        height: 400px;
    }
    div span{
        background-color: red;
        flex: 1;
        height: 100px;
        border: 1px solid beige;
    }
    div span:nth-child(2){
        align-self: flex-start;
        order: -1;
    }
    div span:nth-child(3){
        align-self: flex-end;
    }
    
</style>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果如下：

总结

以上就是本次学习过程中常用的flex布局属性，后续会补充。

学习链接：【黑马！真的很详细！】CSS3-flex布局(flex布局的单个知识点忘记也可以复习)_哔哩哔哩_bilibili

猫小壮
关注
Flex 布局学习笔记
吴小花的博客
03-04 230
学习网址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex弹性布局 1.任何一个容器都可以指定为 Flex 布局 Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为 ...
Flex 3 布局容器学习笔记 整理
10-29
国庆期间，做了不少基于 flex 的开发工作，对 flex 的布局容器有了进一步深入的理解，也找到不少非常棒的文章，分享到这里方便一下大家。
Flex弹性布局一文通【最全Flex教学】
一键难忘的博客
03-07 835
flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。注意：主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
响应式布局--flex学习
蹦哒哒的王小哲
07-07 4570
flex 是css3 中一种新的布局模式，可以简单、完整、响应式地实现各种页面布局，非常适合移动端页面开发。
学习篇之flex布局
最新发布
2402_88205090的博客
05-12 296
容器的两个轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。项目默认沿主轴排列。注意：在使用弹性布局时要定义display: flex;定义了display: flex;才是弹性布局。
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 17万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
CSS笔记(一) - Flex学习笔记
JUN_7777的博客
01-12 389
flex笔记 黑马教程 pink老师
学Flex布局-这一篇就够了
软件测试的坑，让我来踩吧
08-14 2538
在PC端页面中布局，推荐使用传统布局，在移动端布局或者不考虑兼容性问题的话PC端页面布局，还是使用Flex弹性布局更加实用
水牛01248：flex布局学习笔记
03-29
flex布局实现需要至少两层控件,外层叫做容器,内部的叫做项目(item).类似于Android里的ViewGroup和里面装的View。 容器分两个轴,水平的主轴（main axis）和竖直方向的交叉轴（cross axis）,就相当于盒子模型中的xy轴,...
FLEX学习笔记
05-27
《FLEX学习笔记》 FLEX，全称为Flex Builder，是由Adobe公司开发的一款基于MXML和ActionScript的开源框架，用于构建富互联网应用程序（RIA）。它允许开发者创建具有交互性、响应性和丰富用户体验的Web应用。FLEX的...
flex布局教程的实例
11-20
综上所述，通过廖雪峰老师网站的学习笔记，我们可以看到Flex布局在实现各种布局时的灵活性和强大能力。通过少量的CSS代码，我们能够快速实现多种复杂的布局效果，这在传统的CSS布局方式中，可能需要更复杂的HTML结构...
Flex学习笔记(flex必知必会).doc
12-02
Flex学习笔记(flex必知必会).docFlex学习笔记(flex必知必会).doc
flex布局语法以及实操，一文带你吃透flex布局的基础
心态的博客
09-13 6963
Flex弹性布局已是目前最为流行的布局方式之一，它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。以上就是今天要讲的内容，本文仅仅简单介绍了Flex布局的使用，而Flex的功能还不止于此，如果大家还想了解更多的前端知识和flex布局的相关内容，可以到MDN上面去了解更多的知识，学无止尽。
全面掌握Flex开发：从入门到实践
weixin_35756373的博客
11-20 1402
本文还有配套的精品资源，点击获取 简介：Flex是由Adobe推出的开源框架，专用于构建富互联网应用程序。本文通过详解Flex的核心概念和技术，引导初学者快速入门。内容涵盖Flex简介、ActionScript 3.0基础、MXML与组件、Flex架构与生命周期、数据绑定、与BlazeDS的集成、调试与性能优化以及实战项目。从理论到实践，本文将帮助开发者全面掌握Flex开发...
CSS学习之flex篇（前端）
wwz914的博客
03-29 1335
flex是一种一维的布局模型，它给 所在盒子 的子元素之间提供了强大的空间分布和对齐能力。一次只能处理一个维度上的元素布局，一行或者一列。这样的直接的好处就是，整行的父级盒子模型不用脱离文档流，避免空间不足导致的溢出换行，和新增盒子模型的向上镶嵌（呃呃大概这个意思，you know )。
深入学习flex布局
xxuxioxx的博客
12-16 126
flex布局
Flex布局学习笔记
2401_88410373的博客
01-17 656
给父元素添加一个display属性，并且将取值设置成flex其父元素叫做伸缩容器，其本身叫做伸缩项目。
flex布局与grid布局
2302_81350372的博客
01-18 992
flex布局，也称为弹性盒子布局，是CSS3里新增的一种布局方式，通过使用flex布局，可以让布局更加便捷高效。
Flex布局图文详解与示例代码
07-29 3万+
Flex布局，按照官方的说法，即FlexiBle Box（弹性布局），是一种比较灵活的页面布局方式。在深入学习Flex布局前，我们需要了解一些与 Flex 相关的概念。 一、基础概念 首先，我们来了解一下Flex布局中的一些术语：Flex容器、Flex项目、主轴、交叉轴、主轴空间、交叉轴空间，如下图所示： 图1 容器与项目 使用 Flex 布局的元素，称之为Flex容器，简称 “容器”。它的所有子元素自动成为容器成员，称为flex item(Flex项目)，简称“项目”。 主轴、...
Flex学习笔记：从基础到组件详解
Flex学习笔记是一份由LiGL在2008年7月至9月期间编写的关于Adobe Flex技术的详细指南。Flex是Adobe公司开发的一款基于ActionScript 3.0的富互联网应用开发工具，主要用于构建高性能、交互式的应用程序，特别是在移动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值