flex布局——flex布局
2024-04-08 19:35:23
学习内容：
例如：
- 体验flex布局
- flex布局父项常见属性
- justify-content属性
- flex-wrap属性
- align-items属性
- align-content属性
- flex-flow属性
- 常见子项属性
- align-self和order属性
学习产出：
1.体验flex布局
<!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>Flex布局</title><style>/* 传统布局：兼容性好布局繁琐局限性，不能在移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE 11或更低版本，不支持或仅部分支持、flex布局原理flex是flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以制定为flex布局当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效伸缩布局=伸缩盒布局=弹性布局=弹性盒布局=flex布局布局原理采用Flex布局的元素，称为Flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目(flex item),称为“项目”。体验中div就是flex父容器体验中span就是子容器flex项目子容器可以横向排列也可以纵向排列总结flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式*/div {display: flex;width: 80%;height: 300px;background-color: pink;justify-content: space-around;}div span {width: 150px;height: 100px;background-color: aquamarine;margin-right: 5px;flex: 1;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>2.flex布局父项常见属性
<!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>flex布局父项常见属性</title><!-- 黑盒测试 白盒测试 三次握手 四次挥手 --><!-- 常见父项属性以下6个属性是对父元素设置的：flex-direction:设置主轴的方向justify-content:设置主轴上的子元素排列方式flex-wrap:设置子元素是否换行align-items:设置侧轴上的子元素排列方式(单行)flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrapflex-direction设置主轴的方向：1.主轴和侧轴在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴默认主轴方向就是x轴方向，水平向右默认侧轴方向就是y轴方向，垂直向下2.属性值flex-direction属性决定主轴的方向（即项目的排列方向）注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。我们的子元素就是跟着主轴来排列的属性值 说明row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上--><style>div{width: 800px;height: 300px;background-color: palevioletred;/* 给父级添加flex属性 */display: flex;/* 默认的主轴是x轴 行row 那么y轴就是侧轴 *//* 我们的元素是跟着主轴来排列的 *//* flex-direction: row; *//* 简单了解 翻转 *//* flex-direction: row-reverse; *//* 我们可以把我们的主轴设置为y轴 那么x轴就成了侧轴 *//* flex-direction: column; *//* 翻转 */flex-direction: column-reverse;}span{width: 150px;height: 100px;margin-right: 20px;background-color: paleturquoise;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span></div>
</body>
</html>3.justify-content属性
<!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>justify-content属性</title><!-- justify-content设置主轴上的子元素排列方式justify-content属性定义了项目在主轴上的对齐方式注意：使用这个属性之前要确定好主轴是哪个flex-start 默认值从头部开始，如果主轴是x轴，则从左到右flex-end 从尾部开始排列center 在主轴居中对齐(如果主轴是x轴则 水平居中)space-around 平分剩余空间space-between 先两边贴边 再平分剩余空间(重要)--><style>.box1{display: flex;width: 800px;height: 300px;margin-bottom: 20px;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;}.box1 span{width: 150px;height: 100px;background-color:paleturquoise;}.box2{display: flex;width: 800px;height: 400px;background-color: palegreen;flex-direction: column;/* justify-content: center; */justify-content: space-between;}.box2 span{width: 150px;height: 100px;background-color: antiquewhite;}</style>
</head>
<body><div class="box1"><span>1</span><span>2</span><span>3</span><span>4</span></div><div class="box2"><span>1</span><span>2</span><span>3</span></div>
</body>
</html>4.flex-wrap属性
<!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>flex-wrap属性</title><!-- flex-wrap设置子元素是否换行默认情况下，项目都排在一条线(又称“轴线”)上，flex-wrap属性定义，flex布局中默认是不换行的。nowrap 默认值，不换行wrap 换行--><style>div{display: flex;width: 600px;height: 400px;background-color: aquamarine;/* flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面 *//* flex-wrap: nowrap; */flex-wrap: wrap;}div span{width: 150px;height: 100px;background-color: palevioletred;color: #fff;margin: 10px;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span><span>3</span><span>3</span></div>
</body>
</html>5.align-items属性
<!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>align-items属性</title><!-- align-items设置侧轴上的子元素排列方式(单行)该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项的时候使用flex-start 默认值 从上到下flex-end 从下到上center 挤在一起居中(垂直居中)stretch 拉伸--><style>div {display: flex;height: 400px;width: 800px;background-color: pink;/* 默认的主轴是x轴 row */flex-direction: column;justify-content: center;/* 侧轴居中 *//* align-items: center; *//* align-items: flex-start; *//* 拉伸 但是子盒子不要给高度 *//* align-items: stretch; */align-content: center;}div span{width: 150px;height: 100px;background-color: aqua;color: #fff;margin: 10px;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>6.align-content属性
<!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>align-content属性</title><!-- align-content设置侧轴上的子元素的排列方式(多行)设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。flex-start 默认值在侧轴的头部开始排列flex-end 在侧轴的尾部开始排列center 在侧轴中间显示space-around 子项在侧轴平分剩余空间space-between 子项在侧轴先分布在两头，再平分剩余空间stretch 设置子项元素高度平分父元素高度--><style>div{display: flex;width: 800px;height: 400px;background-color: pink;/* 换行 */flex-wrap: wrap;/* 因为有了换行，侧轴上控制子元素的对齐方式用align-content *//* align-content:flex-start; *//* align-content: center; *//* align-content: space-around; *//* align-content: space-between; */align-items: flex-end;}div span{width: 150px;height: 100px;background-color: aquamarine;color: #fff;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>7.flex-flow复合属性
<!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>flex-flow属性</title><!-- flex-flow属性是flex-direction和flex-wrap属性的复合属性flex-flow:row wrap;flex-flow:wrap row;--><style>div{display: flex;/* flex-direction: column;flex-wrap: wrap; *//* 把 */flex-flow: wrap column;width: 600px;height: 300px;background-color: palevioletred;}div span{width: 150px;height: 100px;background-color: cadetblue;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</body>
</html>8.常见子项属性
<!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>flex布局常见子项属性</title><!-- 淘宝圣杯布局flex布局子项常见属性flex子项目占的份数align-self绘制子项目自己在侧轴的排列方式order属性定义子项的排列顺序(前后顺序)--><style>section{display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto;}section div:nth-child(1){width: 100px;height: 150px;background-color: red;}section div:nth-child(3){width: 100px;height: 150px;background-color: yellow;}section div:nth-child(2){flex: 1;}.box1{display: flex;width: 600px;height: 200px;background-color: cadetblue;margin: 0 auto;}.box1 div{flex: 1;background-color: rosybrown;}.box1 div:nth-child(1){flex: 2;background-color: mediumaquamarine;}p{display: flex;width: 60%;height: 150px;background-color: pink;margin: 100px auto;}p span{flex: 1;}p span:nth-child(2){flex: 2;background-color: cadetblue;}</style>
</head>
<body><section><div></div><div></div><div></div></section><!-- <div class="box1"><div class="boxchild1">1</div><div class="boxchild2">2</div><div class="boxchild3">3</div><div class="boxchild4">4</div><div class="boxchild5">5</div></div> --><p><span>1</span><span>2</span><span>3</span></p>
</body>
</html>9.align-self和order属性
<!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>align-self和order属性</title><!-- align-self控制子项自己在侧轴上的排列方式align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretchorder属性定义项目的排列顺序数值越小，排列越靠前，默认为0注意：和z-index不一样--><style>div{display: flex;width: 80%;height: 300px;background-color: pink;/* 让三个盒子沿着侧轴底侧对齐 *//* align-items: flex-end; *//* 只让3号盒子下来底侧 */}div span{width: 150px;height: 100px;background-color: cadetblue;margin-right: 5px;}div span:nth-child(3){align-self: flex-end;}div span:nth-child(3){order: -1;}</style>
</head>
<body><div><span>1</span><span>2</span><span>3</span></div>
</body>
</html>flex布局——flex布局相关推荐
- CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局 一栏.两栏.三栏布局 一栏布局 特点:页面内容居中,宽度固定 实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
- CSS3 flexbox 布局 ---- flex项目属性介绍
CSS3 flexbox 布局 ---- flex项目属性介绍 现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设d ...
- flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- flex将元素放在最后_前端布局——Flex弹性布局
本篇解释了有关flexbox的知识点内容,重点介绍父元素(flex容器)和子元素(flex元素)的不同及可能的属性. 背景 Flexbox Layout弹性布局模块的目的在于提供一种更有效的方式来布置 ...
- CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局 文字发光 & 图 ...
- flex 平铺布局_flex布局及各种布局的总结
Flexbox display: flex; 如果也想设置内联元素为弹性盒子,可以使用display:inline-flex; 实现三种其他布局难以达到的效果: 在父内容里面垂直居中一个块内容. 使容 ...
- Flex 流式布局 之 滚动条篇
Flex 流式布局 之 滚动条篇 flex 框架支持流式布局,什么是流式布局呢,就是在运行时对象的大小是未知的,它可能需要由他的内容(childs)或由它的容器来决定它的实际大小.flex 中有两种流 ...
- css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
前言 我曾一度觉得总写css的前端很low,有了这种思想以后我便远离网页布局,H5的工作更不想接,沉迷于页面逻辑和封装组件.直到最近我面试,面试官说我css3理解的不熟,我起初很不屑,但后来静下来反省 ...
- CSS3/ 弹性布局flex
需知: flex布局表示弹性布局 任何一种元素都可以设置且当它设置 display:flex ,则开启了弹性布局,它成为弹性容器,它的所有子元素成为待排布的项目 开启弹性布局后,容器内待排布的项目的f ...
- java窗口三栏布局_移动端的flex三栏布局的相关知识介绍（代码示例）
本篇文章给大家带来的内容是关于移动端的flex三栏布局的相关知识介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 默认情况下先显示移动端,通过 @media 属性适配屏 ...
最新文章
- tf.io.gfile.glob 遍历文件
- （深入理解）强化学习中Model-based和Model-free的区别是什么
- AI强势来袭，锁上手机就真的安全了吗？
- 记一次Python与C#的AES加密对接
- ubuntu20.04安装mysql教程
- 使用Hybris Commerce User API读取用户信息时，电话字段没有返回
- 多线程爬取新闻标题和链接
- 15张图呈现数据库事务背后的并发原理
- Android 系统（177）---Android消息机制分析：Handler、Looper、MessageQueue源码分析
- BZOJ 1042: [HAOI2008]硬币购物 [容斥原理]
- wpf 自定义窗口，最大化时覆盖任务栏解决方案
- 一个邮箱联结全球？也许不会是遥不可及的梦想
- SQL22 统计各个部门的工资记录数
- 物联网的那些事----------01无线通信技术介绍
- android tips 8 | mystra,Mystra是什么意思
- 第一次写writeup
- 015、移动WEB开发基础
- 我的ubuntu（持续更新中）
- ssm框架外卖订餐系统
- esp8266-01s控制继电器开关