Web前端笔记（9） flex布局

flex弹性布局：

1. flex弹性盒模型：

随着移动互联网的发展，对布局的要求越来越高，传统的布局方案对于实现特殊布局非常的不方便，比如垂直居中，2009年W3C提出了一种新的布局方案---flex布局，可以简便，完整，响应式的实现各种页面布局。目前所有浏览器都支持这种布局方案。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#parent{width: 300px;height: 300px;border: 1px solid black;margin: 20px auto;display: flex;          /*使父容器变成弹性盒模型*/}#box{width: 100px;height: 100px;background: red;margin: auto;           /*margin auto下会上下左右居中*/}</style>
</head>
<body><div id="parent"><div id="box"></div></div>
</body>
</html>

效果：

flex弹性盒模型语法主要分为两类：

a. 作用在flex容器上：

1. flex-direction: 用来控制子项整体布局方向，是从左往右还是从右往左，从上到下还是从下到上。

属性值：row, row-reverse, column, column-reverse

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;margin: 20px auto;display: flex;          /*使父容器变成弹性盒模型*/flex-direction: column;   /*排列方向加给父容器*/}#box div{width: 50px;height: 50px;background: red;color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

2. flex-wrap: 用来控制子项整体是单行显示还是换行显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;margin: 20px auto;display: flex;          /*使父容器变成弹性盒模型*/flex-direction: row;   /*排列方向加给父容器*/flex-wrap: wrap;        /*溢出时进行换行*/}#box div{width: 50px;height: 50px;background: red;color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>1</div><div>2</div><div>3</div><div>1</div></div>
</body>
</html>

3. flex-flow: 是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行

例如上面的可以写成： flex-flow: row, wrap

4. justify-content: 决定主轴方向上子项的对齐与分布方式, 是针对所有子项的整体操作：

主轴方向取决于：flex-direction: row/column

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;margin: 20px auto;display: flex;          /*使父容器变成弹性盒模型*/flex-direction: row;   /*排列方向加给父容器*/justify-content: center;}#box div{width: 50px;height: 50px;background: red;color: white;line-height: 50px;text-align: center;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>1</div></div>
</body>
</html>

属性值：

flex-start: 默认值，表示起始位置

flex-end: 表现为结束位置

center: 表示居中对齐

space-between: 表现为两端对齐，between表示多余的空白间距只在元素中间区域分配。

space-around: around表示环绕，每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度的一半。

space-evenly: 表示每个flex子项两侧空白间距完全相等。

5. align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式：

属性值：

stretch: 默认值，flex子项拉伸

flex-start: 表现为容器顶部对齐

flex-end: 表现为容器的底部对齐

center: 表现为垂直居中对齐

如果不设定子项的高度，则子项的高度默认为父容器的高度：

表示子项在侧轴上的对齐方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;margin: 20px auto;display: flex;          /*使父容器变成弹性盒模型*/flex-direction: row;   /*排列方向加给父容器*/justify-content: space-evenly;align-items: flex-end;}#box div{width: 50px;background: red;}</style>
</head>
<body><div id="box"><div>测试文本</div><div>测试文本测试文本</div><div>测试文本测试文本测试文本</div><div>测试文本</div><div>测试文本</div></div>
</body>
</html>

6. align-content:可以看成和justify-content是相似且对立的属性，如果所有的flex子项只有一行，则align-content属性是没有任何效果的。

属性值：

strect：默认值，每一行flex子元素都等比拉伸，例如，假设只有两行子项，则每一行拉伸高度为50%。

flex-start: 默认值，表示起始位置对齐

flex-end: 表现为结束位置对齐

center: 表示居中对齐

space-between: 表现为两端对齐，between表示多余的空白间距只在元素中间区域分配。

space-around: around：每一行元素上下都享有独立不重叠的空白空间。

space-evenly: 表示每一行元素都完全上下等分。

b. 作用在flex子项上：

1. order：可以通过设置order来改变某一个flex子项的排序位置。所有flex子项默认的order都是0

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;margin: 20px auto;display: flex;          /*使父容器变成弹性盒模型*/}#box div{width: 50px;height: 50px;line-height: 50px;text-align: center;background: red;}#box div:nth-of-type(2){order: 1;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>
</html>

效果：

2. flex-grow：属性中的grow是扩展的意思，扩展就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素之外的剩余的空白间隙，默认值为0，1表示占据全部剩余间隙：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;margin: 20px auto;display: flex;          /*使父容器变成弹性盒模型*/}#box div{width: 50px;height: 50px;line-height: 50px;text-align: center;background: red;}#box div:nth-child(2){background: yellow;color: black;flex-grow: 1;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div>
</body>
</html>

3. flex-shrink: flex-shrink主要处理当flex容器空间不足的时候，单个元素的收缩比例。默认值是1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;margin: 20px auto;display: flex;          /*使父容器变成弹性盒模型*/}#box div{width: 50px;height: 50px;line-height: 50px;text-align: center;background: red;}#box div:nth-child(2){background: yellow;color: black;flex-shrink: 1.5;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>3</div><div>4</div><div>4</div></div>
</body>
</html>

4. flex-bias：定义了在分配剩余空间之前元素的默认大小。相当于重新设定当前元素的宽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;margin: 20px auto;display: flex;          /*使父容器变成弹性盒模型*/}#box div{width: 50px;height: 50px;line-height: 50px;text-align: center;background: red;}#box div:nth-child(2){background: yellow;color: black;flex-basis: 30px;      /*在子项不受所的情况下，相当于重新设置了子元素的宽度*/}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
</html>

效果如下所示：

5. align-self指控制单独某一个flex子项的垂直对齐方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;margin: 20px auto;display: flex;          /*使父容器变成弹性盒模型*/}#box div{width: 50px;height: 50px;line-height: 50px;text-align: center;background: red;}#box div:nth-child(2){background: yellow;color: black;align-self: center;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
</html>

效果如下所示：

flex案例：
1. 利用flex布局设计骰子平面效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#container{display: flex;flex-direction: row;width: 750px;justify-content: space-around;}#box{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;display: flex;justify-content: center;align-items: center;}#box div{width: 30%;height: 30%;background: black;border-radius: 50%;}#box2{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;display: flex;justify-content: space-around;}#box2 div{width: 28%;height: 28%;background: black;border-radius: 50%;margin: 5px 0 5px 0;}#box2 div:last-child{align-self: flex-end;}#box3{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;display: flex;justify-content: space-around;}#box3 div{width: 25%;height: 25%;background: black;border-radius: 50%;margin: 5px 0 5px 0;}#box3 div:nth-child(2){align-self: center;}#box3 div:nth-child(3){align-self: flex-end;}#box4{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;}#box4 div{width: 100%;height: 50%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}#box4 div div{width: 25%;height: 50%;background: black;border-radius: 50%;margin: 5px 0 5px 0;}#box5{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;}#box5 div{width: 100%;height: 33.3%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}#box5 div div{width: 25%;height: 70%;background: black;border-radius: 50%;margin: 5px 0 5px 0;}#box6{width: 100px;height: 100px;border: 1px solid black;border-radius: 5px;}#box6 div{width: 100%;height: 33.3%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}#box6 div div{width: 25%;height: 70%;background: black;border-radius: 50%;margin: 5px 0 5px 0;}</style>
</head>
<body><div id="container"><div id="box"><div></div></div><div id="box2"><div></div><div></div></div><div id="box3"><div></div><div></div><div></div></div><div id="box4"><div class="row"><div></div><div></div></div><div class="row"><div></div><div></div></div></div><div id="box5"><div class="row"><div></div><div></div></div><div class="row"><div></div></div><div class="row"><div></div><div></div></div></div><div id="box6"><div class="row"><div></div><div></div></div><div class="row"><div></div><div></div></div><div class="row"><div></div><div></div></div></div></div>
</body>
</html>

效果图如下所示：

2. 固定两列，一列自适应：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}#main{display: flex;flex-direction: row;}#left{width: 200px;height: 200px;background: red;}#center{width: calc(100% - 200px - 150px);height: 300px;background: yellow;}#right{width: 150px;height: 200px;background: blue;}</style>
</head>
<body><div id="main"><div id="left"></div><div id="center"></div><div id="right"></div></div>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------

Web前端笔记（9） flex布局相关推荐

Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
移动WEB开发三、flex布局
零.文章目录文章地址个人博客-CSDN地址:https://blog.csdn.net/liyou123456789 个人博客-GiteePages:https://bluecusliyou.gi ...
web前端html+css常用布局05列表布局
web前端html+css常用布局05列表布局注意:引入jquery的jquery-2.1.4.min.js包图片从自己目录中路径. 代码: <!DOCTYPE html> <h ...
前端学习笔记一.Flex布局与VUE2中vuex的使用
经过大佬的提醒开始记笔记,顺便发个博客吧. 一.Flex布局. 参考博客:flex布局知识点(阮一峰博客) - 走看看目前关于flex布局还有一些问题,留个插槽,后面编辑. 同时记一下html中 & ...
Web前端笔记（10）Grid布局
Grid网格布局: Grid布局是一个二维布局方法,横纵两个方向总是同时存在.与flex布局的语法类似,Grid布局涉及到的语法也分为两类,一类是作用在Grid容器上的,另一类是作用在grid子项上的 ...
web前端笔记1-hml，css部分
这里写目录标题一.基础内容 1.网页 1.1什么是网页 1.2什么是HTML 1.3网页的形成 2.常用浏览器 2.1常用的浏览器 2.2浏览器内核 3.web标准 3.1为什么需要web标准 3. ...
css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货发展过程上个世纪Web开发人员流行使用表格进行 ...
Web前端笔记（1）
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...

Web前端笔记（9） flex布局

flex弹性布局：

Web前端笔记（9） flex布局相关推荐

最新文章

热门文章