flex学习笔记之父项

最新推荐文章于 2024-07-25 22:24:14 发布
最新推荐文章于 2024-07-25 22:24:14 发布
阅读量70 收藏
点赞数
文章标签： 学习 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35821503/article/details/123560460
版权

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color:rebeccapurple ;
            scroll-margin-inline: 5px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-evenly;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color:rebeccapurple ;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

 

 2.平均分为3等分：（把宽度去掉，让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>
    <style>
        div{
            /* 给父级容器添加flex属性 */
            display: flex;
            /* 默认的主轴是x轴，行;那么y轴就是侧轴了 */
            /* flex-direction: row; */
            /* 我们的元素是跟着主轴来排列的 */
            /* 简单了解 翻转 */
            /* flex-direction: row-reverse; */


            /* 我们可以把我们的主轴设置为y轴 那么x轴就成了侧轴 */
            flex-direction: column;
            
            width: 800px;
            height: 300px;
            background-color: rebeccapurple;
        }

        div span{
            width: 150px;
            height: 100px;
            background-color: pink;
        }
    </style>

</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    
</body>
</html>

 

 

 

先以主轴为x轴来看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;

            /* 默认的主轴是x轴，row，相当于默认就写了下面的这句代码 */
            flex-direction: row;

            /* justify-content: 是设置主轴上子元素的排列方式 相当于默认就写了下面的这句代码 */
            /* 左对齐 */
           /* justify-content: flex-start;  */
           /* 右对齐 */
           /* justify-content: flex-end; */
           /* 居中对齐 */
           /* justify-content: center; */
           /* 平分剩余空间 */
           /* justify-content: space-around; */
           /* 先两边贴边，再平分剩余的空间 */
           justify-content: space-between;

        }

        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    
</body>
</html>

 

 

 后以主轴为y轴来看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;

            /* 默认的主轴是x轴，row，现在将主轴设置为y轴 */
            flex-direction: column;

            /* justify-content: 是设置主轴上子元素的排列方式 相当于默认就写了下面的这句代码 */
            /* 左对齐 */
           /* justify-content: flex-start;  */
           /* 右对齐 */
           /* justify-content: flex-end; */
           /* 居中对齐 */
           /* justify-content: center; */
           /* 平分剩余空间 */
           /* justify-content: space-around; */
           /* 先两边贴边，再平分剩余的空间 */
           justify-content: space-between;

        }

        div span{
            width: 550px;
            height: 30px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行的，如果装不下就会把子元素缩小了放在父元素里面*/
            /* 默认就相当于写了下面的这句话 */
            /* flex-wrap: nowrap; */

            /* 如果装不下就另外起一行，不改变子元素的大小 */
            flex-wrap: wrap;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>4</span>
    </div>
    
</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是x轴row */
            justify-content: center;
            /* 我们需要侧轴居中 */
            align-items: center;

            /* stretch拉伸，但是子盒子不要给高度 */
            /* align-items: stretch; */

        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 换行，默认是不换行的yo */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式用 align-content*/
            /* align-content: flex-start; */
            /* align-content: center; */
            /* 上面的贴上沿，下面的贴下沿 */
            /* align-content: space-between; */
            /* 上沿有一个距离，下沿有一个距离，中间有两个距离 */
            align-content: space-around;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
    
</body>
</html>

 

 

 

 

 ​​​​​​​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;

            /* 设置主轴为y轴，并且让它自动换行 */
            /* flex-direction: column;
            flex-wrap: wrap; */

            /* 设置主轴方向和是否换行（换列） 简写 */
            flex-flow: column wrap;
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    
</body>
</html>

 

 

 

 

滢滢读书哇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记之flex布局 3.26
qq_36450483的博客
03-26 288
前端学习笔记之flex布局
flex布局学习笔记
weixin_47023786的博客
10-27 181
文章目录flex布局(伸缩布局)主轴方向（flex-direction）（了解）主轴对齐方式（justify-content）（重点）单行侧轴对齐方式（align-items）（重点）是否换行（flex-wrap）多行侧轴对齐方式（align-content）----------------分配子元素空间（flex属性）子元素排序（order属性）单个子元素侧轴对齐方式（align-self） flex布局(伸缩布局) flex布局也叫做弹性布局、伸缩布局 布局：其实就是调整元素在水平和垂直方向上的布局方
Flex 布局之学习笔记
我是希希呀的博客
09-13 187
一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ dis
Flex学习笔记
bokerr的博客
03-06 143
一 盒子模型已经不适用于某些特殊的布局， PS*dispaly规定元素应该生成的框的类型 .Class_{ dispaly: inline;//将元素指定为行内元素; dispaly: list-item;//将元素指定为列表显示; dispaly: flex;//弹性布局; } flex弹性布局为盒子模型提供最大的灵活性，所有容器都可以指定为flex弹性布...
Flex 学习笔记：布局教程之语法篇
谦谦君的博客
11-01 150
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; }...
Flex布局学习笔记
qq_45254055的博客
05-27 410
认识Flex布局 flex布局（Flexible布局，弹性布局） 目前特别在移动端用的最多，PC端也越来越多 两个重要概念 开启flex布局的元素叫flex container flex container里面的子元素叫flex items 开启Flex布局 display属性设置为 flex（块级元素）或 inline-flex（行内元素） Flex布局模型 应用在Flex-container（容器）的属性 display 作用：指定flex属性 取值：flex | inline-flex f
前端学习笔记：移动端布局之flex布局
weixin_43339892的博客
02-17 295
flex布局 flex 是 flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align 属性将失效 flex布局=伸缩布局=弹性布局=伸缩盒布局=弹性盒布局 ...
Flex布局之学习笔记二
HZKang的博客
10-13 233
这篇讲的是容器里面元素的属性设置：1，orderorder: <integer>; 定义元素的排列顺序。数值越小，排列越靠前，默认为02，flex-growflex-grow: <number>; /* default 0 */定义元素的放大比例，默认为0，即如果存在剩余空间，也不放大。3，flex-shrinkflex-shrink: <number>; /* default 1 */定义了元素的
前端基础学习笔记
sober30的博客
07-27 4001
css3有哪些新特性：圆角盒子阴影文本阴影不透明度 ：opacity 、rgba渐变背景 ：线性渐变、径向渐变背景属性：backgroud-size、background-clip（拓展）结构选择器：first-child()…伪元素新写法 :before ::before(css3) 为了和:hover之类的伪类选择器作区分弹性盒子：flex转换：2D转换、3D转换（拓展）过渡：一般搭配hover使用animation动画（拓展）媒体查询。
FLEX学习笔记
05-27
《FLEX学习笔记》 FLEX，全称为Flex Builder，是由Adobe公司开发的一款基于MXML和ActionScript的开源框架，用于构建富互联网应用程序（RIA）。它允许开发者创建具有交互性、响应性和丰富用户体验的Web应用。FLEX的...
Flex学习笔记1
08-08
Flex学习笔记1 - 容器布局对象状态的切换和数据绑定 在 Flex 应用程序中，容器布局对象状态的切换是非常常见的需求。例如，在购物车应用程序中，我们可能需要在不同的状态之间切换，例如从商品浏览状态到购物车状态...
水牛01248：flex布局学习笔记
03-29
Flex 布局教程：语法篇 Flex 布局教程：实例篇 flex布局游戏 理解 flex布局实现需要至少两层控件,外层叫做容器,内部的叫做项目(item).类似于Android里的ViewGroup和里面装的View。 容器分两个轴,水平的主轴（main ...
Flex学习笔记(flex必知必会).doc
12-02
Flex学习笔记(flex必知必会).docFlex学习笔记(flex必知必会).doc
AvaloniaUI的学习
最新发布
lishuangquan1987的博客
07-25 632
官方中文文档：https://docs.avaloniaui.net/zh-Hans/docs/welcome。
Python编程学习第一篇——Python零基础快速入门（六）（4）异常处理
urhero的专栏
07-25 243
我们已经了解了Python的基本数据类型、变量和基本的逻辑控制语句，基于这些基础知识可以编写一些小程序了，但是在写程序的时候我们会发现，有时候程序并不是按我们预期的方向执行，有的直接报错，有的没有报错，却并未得到我们预期的结果。在这个例子中，除数为0会引发ZeroDivisionError异常，我们将异常信息赋值给变量e，并输出"除数不能为0"和异常信息。在这个例子中，由于除数不为0，所以没有发生ZeroDivisionError异常，代码会执行else语句块，并输出结果2.0。
Linux：基础命令学习
qq_55038440的博客
07-20 1400
实例：-F根据文件类型在列出的文件名称后加一符号。实例： -R 递归显示目录中的所有文件和子目录。. 开头的隐藏文件也会列出。可执行文件则加 "*"，用于显示目录文件信息。
Spring Security学习笔记（二）Spring Security认证和鉴权
飞！！！的博客
07-24 655
用户认证的基础Filter，只有UsernamePasswordAuthenticationFilter这一个实现类。...//主要方法//先校验请求url与表单校验提交的url是否一致，不一致执行下一个Filter//一致的话就执行认证逻辑，一般默认的表单提交url是"/login"if (!} else {try {//实现类执行具体的认证逻辑return;//由子类实现具体的验证逻辑...
"Flex学习笔记，适合入门，包括环境和基础知识，持续深入学习，有问题可咨询
本文主要是我在学习Flex过程中整理的学习笔记，适合刚刚入门的开发者参考。如果你在学习过程中遇到问题，欢迎与我联系。 在Flex学习笔记的第一章中，首先介绍了Flex的基本概念和开发环境。Flex3是Adobe开发的RIA...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值