Day07-flex布局

最新推荐文章于 2024-07-24 13:45:34 发布
最新推荐文章于 2024-07-24 13:45:34 发布
阅读量285 收藏 1
点赞数
分类专栏： 前端1 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33396183/article/details/129288238
版权

文章目录

弹性布局

一 简介

弹性布局是2009年css新增的一种布局方式，用来替代float浮动布局. 因为float布局它有明显的缺陷: 1.板块塌陷 2.排版困难。

二 弹性容器

采用 Flex 布局的元素，称为 Flex 容器（flex container）。它的所有子元素称为 Flex 项目（flex item）；

弹性容器默认存在两根轴：水平的主轴和垂直的侧轴。弹性项目默认沿主轴排列。

image-20221130154326231

案例-让多个div排成一行

image-20230227095953079

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 500px;
            border: 1px red solid;
            /* 
                    只要在div中使用  display: flex; div就变成了弹性容器,
                弹性容器里面的元素称为弹性项目,弹性项目默认水平排列
                
            */
            display: flex;
        }

        .box .small{
            width: 100px;
            height: 200px;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="small">1</div>
        <div class="small">2</div>
    </div>
</body>
</html>

弹性布局 display: flex

三 容器项目的对齐方式

案例1-justify-content(主轴对齐)

image-20221213095209234

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 500px;
            border: 1px red solid;
            display: flex;
            /* 主轴对齐 */
            justify-content: space-evenly;

        }

        .box .small1{
            width: 100px;
            height: 200px;
            background-color: pink;
        }

        .box .small2{
            width: 100px;
            height: 200px;
            background-color: green;
        }
        .box .small3{
            width: 100px;
            height: 200px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="small1">1</div>
        <div class="small2">2</div>
        <div class="small3">2</div>
    </div>
</body>
</html>

justify-content

​ 左flex-start

​ 中center

​ 右flex-end

​ 两端对齐space-between

​ 平均分配(视觉上的空间不相等)space-around

​ 平均分配(视觉上的空间相等) space-evenly

案例2-flex-wrap(换行)

image-20221227122305078

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 250px;
            height: 500px;
            border: 1px red solid;
            display: flex;
            /* 
                    当弹性容器一行装不下所有的弹性项目时,弹性项目的宽度默认会被压缩
                我们可以通过flex-wrap: wrap;让多余的弹性项目换行
            */

            flex-wrap: wrap;
        }

        .box .small1{
            width: 100px;
            height: 200px;
            background-color: pink;
        }

        .box .small2{
            width: 100px;
            height: 200px;
            background-color: green;
        }
        .box .small3{
            width: 100px;
            height: 200px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="small1">1</div>
        <div class="small2">2</div>
        <div class="small3">2</div>
    </div>
</body>
</html>

flex-wrap控制子元素在一条轴线排不下的换行方式

​ 不换行(默认)nowrap

​ 换行wrap

案例3-align-items(侧轴对齐)

image-20221222153814499

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 500px;
            border: 1px red solid;
            display: flex;
            /* 
                侧轴对齐
                    当弹性项目不写高度时,高度自动拉伸
                    当弹性项目写了高度后,可以实现 上 中 下的对齐方式
            
            */
            /* align-items: center; */
        }

        .box .small1{
            width: 100px;
            height: 200px;
            background-color: pink;
        }

        .box .small2{
            width: 100px;
            height: 200px;
            background-color: green;
        }
        .box .small3{
            width: 100px;
            height: 200px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="small1">1</div>
        <div class="small2">2</div>
        <div class="small3">2</div>
    </div>
</body>
</html>

align-items属性定义项目在侧轴上如何对齐。

​ 上flex-start

​ 中center

​ 下flex-end

​ 默认值 stretch

案例4-align-self(项目垂直对齐)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 500px;
            border: 1px red solid;
            display: flex;
        }

        .box .small1{
            width: 100px;
            height: 200px;
            background-color: pink;
            /* 
                我们可以单独设置某个弹性项目的侧轴对齐方式
                align-self: flex-end;
            */
            align-self: flex-end;
        }

        .box .small2{
            width: 100px;
            height: 200px;
            background-color: green;   
        }
        .box .small3{
            width: 100px;
            height: 200px;
            background-color: blue;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="small1">1</div>
        <div class="small2">2</div>
        <div class="small3">2</div>
    </div>
</body>
</html>

align-self 调整单个弹性项目的侧轴对齐，不做整体调整

​ 上flex-start

​ 中center

​ 下flext-end

案例5-flex-direction(改变轴向)

image-20221222160141151

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 500px;
            border: 1px red solid;
            display: flex;
            /* 
                改变轴向
                    让主轴垂直,侧轴水平
            
            */
            flex-direction: column;
        }

        .box .small1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .box .small2{
            width: 100px;
            height: 100px;
            background-color: green;   
        }
        .box .small3{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>


</head>
<body>
    <div class="box">
        <div class="small1">1</div>
        <div class="small2">2</div>
        <div class="small3">2</div>
    </div>
</body>
</html>

flex-direction属性决定主轴的方向

​ 水平row

​ 垂直column

案例6-弹性布局应用

image-20221212113641985

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px red solid;
            display: flex;
            /* 改变轴向 */
            flex-direction: column;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;
        }

        img{
            width: 150px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="https://woniufile.oss-cn-hangzhou.aliyuncs.com/banner/.com.pc.jpg" alt="">
        我是一张小图片
    </div>
</body>
</html>

四 弹性项目-flex属性

这个属性用来处理容器的富余空间

案例1-按比例分配宽度

image-20230227121745997

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 200px;
            border: 1px solid red;
            display: flex;
            
        }
        .box .s1{
            flex: 1;
            background-color: orange;
        }
        .box .s2{
            background-color: aqua;
            flex: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="s1"></div>
        <div class="s2"></div>
    </div>
</body>
</html>

案例2-后台管理界面

image-20221212144329674

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
        }
        .box{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .box .head{
            height: 100px;
            background-color: aqua;
        }
        .main{
            background-color: orange;
            flex: 1;
            display: flex;
        }
        .aside{
            width:200px ;
            background-color: gray;
        }
        .content{
            background-color: pink;
            flex-grow: 2;
        }
        .box .copyright{
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="head"></div>
        <div class="main">
            <div class="aside"></div>
            <div class="content"></div>
        </div>
        <div class="copyright"></div>
    </div>
</body>
</html>

五-语义化标签

header main nav footer等r这些名字,我们在前端项目开发中经常用,在H5的时候提出了语义化标签

        <header></header>
        <nav></nav>
        <main></main>
        <footer></footer>

语义化标签本质上还是div

语义化标签可以提高开发速度,提高代码的可读性

六-作业-个人中心布局

金霖海
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
都在用的Flex布局神器
J1ong的博客
07-17 819
一、Flex display: flex; //将对象作为弹性伸缩盒展示 display: -wekit-flex; //webkit内核浏览器上使用需加上前缀 dispaly: inline-flex // 将对象作为内联块级伸缩盒展示 dispaly: flex || inline-flex //兼容写法 二、容器属性 flex-direction: row | row-rever...
【CSS】彻底搞懂flex页面布局,附最佳实践代码
qq_36321909的博客
06-13 2179
dasd
flex 布局
Daisy__xu的博客
04-20 1179
flex 基本概念 使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。 #dad { display: flex; justify-content: center; align-items: center }
flex html编辑器
286
12-15 124
在flex里有一个组件叫RichTextEditor，它可以编辑简单的文字样式，但是它生成的htmlText却并不是十分符合html规范，所以我简单修改了下，具有复制功能的html编辑器： &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"...
Flex布局做出自适应页面--语法和案例
某年某月某条街
01-20 4万+
本文发布在： github项目地址：https://github.com/tenadolanter/flex-layout-demo SegmentFault地址：https://segmentfault.com/a/1190000012916949/ CSDN地址：http://blog.csdn.net/qq_34648000/article/details/79115294 博客
day3-flex-example
06-14
【标题】"day3-flex-example"是一个与前端开发相关的项目示例，主要涉及JavaScript技术，尤其是Flex布局的应用。在这个项目中，我们将会深入探讨Flex布局的基本概念、使用方法以及在实际开发中的应用。 【描述】...
Day06-CSS布局-浮动
07-10
【CSS布局-浮动详解】 在Web开发中，CSS布局是构建网页结构的关键技术之一，而“浮动”（Float）是CSS布局中一个重要的概念，它主要用于创建多列布局和实现图文混排效果。本篇文章将深入探讨CSS浮动的原理、用途...
day10-Dad jokes（老爸笑话）
07-06
可能的样式规则包括使用`display`属性控制元素的布局，如设置为`flex`或`grid`，或者使用`transition`和`animation`来增加视觉效果。CSS还可能通过选择器选中特定的HTML元素，如`.dad-joke`，然后应用相应的样式。 ...
Work-Day-Scheduler
04-04
例如，使用`:hover`伪类可以为鼠标悬停在时间块上时添加视觉反馈，`display: flex`或`grid`布局可以实现更灵活的网格设计，使得日程表更加整洁易读。 考虑到这个项目是一个"工作日程"，它可能会针对工作日进行优化...
day34-Animated Countdown（动画倒计时）
07-23
我们可以设定字体、颜色、布局等样式，同时也可以通过CSS动画来实现动态效果。例如，可以为每个计时单位添加过渡效果，使其在数值改变时平滑过渡： ```css #countdown { display: flex; justify-content: center;...
flex超出换行
盏茶作酒的博客
04-13 4万+
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Document&lt;/title&gt;    &lt;style&gt;        *{            padding:0;     
使用flex布局平分宽度
热门推荐
parhat的博客
08-13 7万+
css3 父元素 display:flex； 子元素给定flex占比 1的时候子元素平分 .color_container { width: 100%; height: 22px; display: flex; flex-direction: row } .color_container&gt;div{ height: 22px; fl...
css flex布局 精确计算成员宽度值
weixin_34402408的博客
05-10 1450
前言css 的 flex 弹性布局,广泛应用在当今的页面开发中,其弹性伸缩的的灵活性非常擅长于开发有响应式需求的网站。但是有很多时候,其灵活性也会让人疑惑,特别是确定尺寸时,基本上是靠不断尝试。为了在开发时更加得心应手,下面将以主轴方向上,也就是默认布局方向上的成员宽度值计算为例子进行研究。准备flex 是弹性的伸缩布局,具有伸和缩两个特性,下面在研究时也以伸和缩两种状态来进行研究。 在开始...
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 342
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css性能优化的方法
jht_520的博客
07-21 337
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
CSS相关记录
最新发布
oThrowsException的博客
07-24 606
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS学习笔记[Web开发]
Jenlibein的博客
07-19 746
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。CSS指的是层叠样式表* (CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在CSS 文件中***：**也称级联样式表。一张 HTML 页面 可以有 多个样式下面是一张提供了四个不同样式表的 HTML 页面。
CSS 创建：从入门到精通
wjs2024的博客
07-24 275
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
css上下动画 和淡化
ssorth的博客
07-24 365
上下动画
Flex4速成指南：核心特性与新功能解析
"Flex4-in-a-day" 是一份简明教程，旨在帮助读者在一天内快速掌握Adobe Flex 4的主要特性。文档由平台布道师Mihai Corlan和计算机科学家Alin Achim共同撰写，内容涵盖了Flex 4的关键概念和技术，包括MXML 2009、命名...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值