flex弹性布局笔记

最新推荐文章于 2024-09-13 23:28:46 发布
最新推荐文章于 2024-09-13 23:28:46 发布
阅读量151 收藏
点赞数 2
文章标签： flex css3 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shitoureng/article/details/117533707
版权

Flex 起步

核心概念

主轴设置

简单理解为：元素的默认添加方向所在的轴，即为主轴

侧轴设置

与主轴交叉的那个轴被称为侧轴

 

弹性布局实现过程

语法：

display: flex;

在需要设置为弹性盒子的DIV元素上添加 display 属性即可，父元素设置为弹性盒子，其直接的子元素具有弹性布局的特性。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                display: flex;
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </body>
</html>

演示效果：

 

核心属性

父项属性

1、设置主轴

语法：

flex-direction: row; /* 设置X轴为主轴，子元素从左向右排列，默认 */
flex-direction: row-reverse; /* 设置X轴为主轴，子元素从右向左排列 */
flex-direction: column; /* 设置Y轴为主轴，子元素从上向下排列 */
flex-direction: column-reverse; /* 设置Y轴为主轴，子元素从下向上排列 */

示例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                display: flex;
                flex-direction: row;
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </body>
</html>

演示效果：

示例2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 300px;
                display: flex;
                flex-direction: row-reverse; /* 修改 */
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>
​

演示效果：

 

示例3：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 300px;
                display: flex;
                flex-direction: column; /* 修改 */
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>
​

演示效果：

 

示例4：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 300px;
                display: flex;
                flex-direction: column-reverse; /* 修改 */
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>
​

演示效果：

2、换行属性

语法：

flex-wrap: wrap; /* 设置换行 */
flex-wrap: nowrap; /* 设置不换行，默认 */

示例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 300px;
                width: 300px;
                display: flex;
                flex-direction: row; /* 设置主轴 */
                flex-wrap: nowrap; /* 不换行，默认 */
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>
​

演示效果：

 

示例2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 300px;
                width: 300px;
                display: flex;
                flex-direction: row; /* 设置主轴 */
                flex-wrap: wrap; /* 换行 */
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>
​

演示效果：

 

3、主轴子元素排列

语法：

justify-content: flex-start; /* 从开始位置对齐 */
justify-content: center; /* 居中对齐 */
justify-content: flex-end; /* 从结束位置对齐 */
justify-content: space-evenly; /* 平分，完全平分 */
justify-content: space-around; /* 平分，元素外边距值相等 */
justify-content: space-between; /* 平分，两边贴边，剩下空间平分 */

 

平分示例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 300px;
                display: flex;
                justify-content: space-evenly; /* 修改 */
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>
​

演示效果：

 

平分示例2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 300px;
                display: flex;
                justify-content: space-around; /* 修改 */
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
    </body>
</html>
​

演示效果：

 

平分示例3：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 300px;
                display: flex;
                justify-content: space-between; /* 修改 */
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
    </body>
</html>
​

演示效果：

 

4、侧轴子元素排列

设置子元素排列分为单行和多行两个属性：

/* 单行 */
align-items: flex-start;
/* 多行 */
align-content: flex-start;

语法：

/* 单行 */
align-items: flex-start; /* 从开始位置对齐 */
align-items: center; /* 居中对齐 */
align-items: flex-end; /* 从结束位置对齐 */
​
/* 多行 */
align-content: flex-start; /* 从开始位置对齐 */
align-content: flex-end; /* 从结束位置对齐 */
align-content: center; /* 居中对齐 */
align-content: space-around; /* 平分，元素的外边距值相等 */
align-content: space-between; /* 平分，两边贴边，平分剩余空间 */

 

平分示例1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 700px;
                width: 300px;
                display: flex;
                flex-wrap: wrap;
                /* 多行 */
                align-content: space-around; /* 修改 */
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">4</div>
            <div class="item">4</div>
        </div>
    </body>
</html>
​

演示效果

 

平分示例2：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 700px;
                width: 300px;
                display: flex;
                flex-wrap: wrap;
                /* 多行 */
                align-content: space-between; /* 修改 */
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">4</div>
            <div class="item">4</div>
        </div>
    </body>
</html>
​

演示效果

 

子项属性

子项属性是将属性定义在弹性盒子内的直接子元素上。

语法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box{
                display: flex;
            }
            .item{
                flex: 1; /* 设置在item中的为子项属性 */
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
        </div>
    </body>
</html>
​

 

1、元素的占比

语法：

.item{
    flex: 1; /* 值为数字类型，值越大占比越大，可以为小数 */
}

 

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 700px;
                display: flex;
                justify-content: space-around;
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
            #a{
                flex: 1;
            }
            #b{
                flex: 2;
            }
            #c{
                flex: 3;
            }
            #d{
                flex: 4;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item" id="a">1</div>
            <div class="item" id="b">2</div>
            <div class="item" id="c">3</div>
            <div class="item" id="d">4</div>
        </div>
    </body>
</html>
​

演示效果：

 

2、排序属性

语法：

.item{
    order: 0; /* 值为数字类型，默认为0，值越大越靠后，可以使用负数 */
}

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 700px;
                display: flex;
                justify-content: space-around;
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
            #a{
                order: 1;
            }
            #b{
                order: 3;
            }
            #c{
            }
            #d{
                order: 2;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item" id="a">1</div>
            <div class="item" id="b">2</div>
            <div class="item" id="c">3</div>
            <div class="item" id="d">4</div>
        </div>
    </body>
</html>
​

演示效果：

 

3、自身侧轴排列方式

语法：

align-self: flex-start; /* 开始 */
align-self: center; /* 居中 */
align-self: flex-end; /* 结束 */
align-items: stretch; /* 拉伸 */

 

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                border: 1px solid #000;
                height: 700px;
                display: flex;
                justify-content: space-around;
            }
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                font-size: 20px;
            }
            #a{
                align-self: center; /* 居中 */
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item" id="a">1</div>
            <div class="item" id="b">2</div>
            <div class="item" id="c">3</div>
            <div class="item" id="d">4</div>
        </div>
    </body>
</html>
​

演示效果：

你遗憾吗？
关注
弹性布局的介绍和使用
weixin_45974687的博客
07-11 1016
弹性布局的介绍 弹性布局 也叫作伸缩布局 是c3中新增的一种布局方式 而且移动端用的居多 注意 : 弹性布局 就是加在父盒子上 然后让子元素应用弹性布局 弹性布局主轴， 副轴图 : css: <ul> width: 400px; height: 350px; border: 1px solid black; list-style: none; padding: 0;
flex弹性布局 笔记2
m0_74284133的博客
05-09 848
布局"项目"的父级属性创建弹性盒子，用或就是这个容器是还是，一般都是设置弹性布局的基本弹性布局的此外，弹性布局还涉及其他属性，如order、flex-grow、flex-shrink、flex-basis、flex和align-self等。这些属性可以帮助开发者更灵活地控制元素在容器内的排列和分布。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
flex布局
小森呀
04-05 95
常见父项属性： flex-direction 设置主轴的方向 row-----默认值从左到右； row-reverse-----从右到左 column-----从上到下 column-reverse-----从下到上 justify-content 设置主轴上的子元素排列方式 flex-start-----默认值从头部开始 flex-end-----从尾部开始 center-----在主轴居中对齐 spac
flex弹性布局学习笔记
weixin_30872337的博客
04-04 871
前言 资料来源于网络，本人只是对此作了一下操作，记录于此以便以后查阅。目的在于梳理自己前端凌乱的知识点。 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动开发相关知识进行快速学习和整理。本文内容大多数为网上或者书上摘抄，然后自己整个操作了一下，作个简单的入门。 Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为...
flex布局(弹性布局)学习笔记
freedom
08-26 351
FLEX布局(弹性布局) flixible Box flex容器：使用display： flex就是flex容器 项目：flex容器中的子元素就是项目，不包括孙子元素 默认主轴方向排列，即横向 Flex-容器的属性 1、display属性 作用：指定flex属性 取值：flex | inline-flex flex：将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100% inline-flex：将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度 2、flex-directio
前端-flex弹性布局笔记
Cxil的博客
09-06 281
这个意思是：将剩余的空间分成1+3份，第一个子盒子占1份，第二个子盒子占3份。flex全称是flexiblebox既弹性盒子，用来进行弹性布局，弹性布局也是目前应用最广泛的布局。也就是子元素的宽度大于外部盒子宽度时，flex布局辉自动压缩子元素以适应外部盒子大小。flex-shrink 设置盒子的缩小比例 设置后超出父盒子的范围的子盒子不会缩小压缩。wap-reverse：换行或者换列，但是里面盒子的顺序会变成相反的方向排列。2.当内嵌的盒子超出最外层大盒子的宽度时，会挤压离着边最近的盒子。
flex布局笔记flex布局笔记
04-03
Flex布局，全称为“Flexible Box”，也被称为弹性盒布局，是一种用于定义Web页面或应用程序中容器内元素排列方式的CSS布局模型。它旨在提供一种更加灵活、响应式的布局方案，尤其适用于多设备环境，如手机、平板电脑...
弹性布局-flex布局.zip
05-18
Flex布局，全称为“Flexible Box”或“弹性盒布局”，是CSS3中一种用于处理容器内元素布局的模型。它旨在提供一个更加灵活、响应式的布局方式，尤其适用于多设备环境，如手机、平板电脑等移动设备。在传统布局模式下...
2022-12-29 [整理]flex弹性布局
GAARA
12-29 573
0.前言 1.设置flex布局后的父子元素 2.容器(父元素)的属性 3.项目(子元素)的属性 4.示例一:flex布局实现flex容器中子元素的水平垂直居中 5.示例二:flex:1实现子元素平分flex容器宽度 6.示例三:换行,多行布局 7.示例四:flex-grow,flex-shrink和flex-basis属性的使用 7.1.flex-grow的使用 7.2.flex-shrink的使用 7.3.flex-basis与width和min-width,max-width的区别 7.4 flex-b
Flex弹性布局简洁版笔记
WEB__Wang的博客
01-12 107
CSS Flex布局的精简版笔记
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
热门推荐
高大志leo的博客
12-11 4万+
前言 我们知道，网页展示就好比一个个盒子堆叠在一起，通过调整盒子的大小、位置、样式等，形成了各式各样的页面。当我们在开发一个页面的时候，我们常规的做法可能是：搭建框架、划分区域、定制排版、调整位置、嵌入内容、微调与增添样式。 今天所介绍的是基础且关键的一环--布局排版。其中，展开布局中常用的技术：Flex布局。 Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box {
Flex弹性布局
cx18333的博客
05-19 1616
Flex弹性布局笔记 flex-direction:文本排列方向 row：默认值，水平排列，从左侧开始排序 row-reverse:水平排序，从右侧开始排序 column:垂直排序，从上到下进行排序 column-reverse:垂直排序，从下到上进行排序 flex-wrap：文本是否换行排序 nowrap:默认，不换行 wrap：换行，进行多行排列 wrap-reverse:换行，第一行在最下方 align-content：多行排列时使用对齐，如果只有单行该属性不生效 stretch
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1404
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格
m0_61118741的博客
09-12 1526
通过使用 HTML 和 CSS3 的新特性，我们成功打造了一个充满动感、炫酷十足的个人网页。你可以根据自己的喜好继续添加更多效果，比如动画按钮、背景视频等。炫酷设计的背后，是 CSS3 强大的功能。如果你希望让网页更加动感和富有层次感，不妨尝试更多 CSS3 的特性，让每个访问你网页的人都能眼前一亮！
前端用html写excel文件直接打开
全易
09-10 762
html文件直接用excel打开
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1341
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML、CSS实现树状图
p_s_p的博客
09-09 689
【代码】HTML、CSS实现树状图。
Flex弹性布局详解与用法
"flex弹性布局用法笔记，主要包括display:flex属性开启弹性布局，flex-direction定义主轴方向，flex-wrap控制是否换行，justify-content调整主轴上的对齐方式，align-items处理交叉轴上的对齐，align-content用于...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值