Css提高——flex布局及其相关属性

1、传统布局与flex布局的区别

2、flex的布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

3、flex常见的父项属性

flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

3.1、flex-direction ：设置主轴的方向

1、主轴和侧轴的概念

2、flex-direction的属性值

3、例子

如果我想要将flex的子元素从右往左排列的话，则需要对父元素添加flex-direction: row-reverse;属性

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>.main {width: 800px;height: 600px;margin: 0 auto;border-radius: 12px;background-color: skyblue;display: flex;flex-direction: row-reverse;}span {width: 200px;margin-left: 10px;height: 100%;border-radius: 12px;background-color: pink;}</style>
</head><body><div class="main"><span>1</span><span>2</span><span>3</span></div>
</body></html>

2、效果图

3.2、justify-content 设置主轴上的子元素排列方式

1、justify-content 的属性值：

2、例子：

2、代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {display: flex;width: 800px;height: 400px;background-color: pink;/* 我们现在的主轴是y轴 */flex-direction: column;/* justify-content: center; */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></div>
</body></html>

3、效果图：

3.3、flex-wrap 设置子元素是否换行

1、flex-wrap 属性值

2、例子

1、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><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;color: #fff;margin: 10px;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</body></html>

2、效果图

3.4、align-items 设置侧轴上的子元素排列方式（单行）

1、align-items 属性值

2、例子

1、代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {display: flex;width: 800px;height: 400px;background-color: pink;/* 默认的主轴是 x 轴 row */flex-direction: column;justify-content: center;/* 我们需要一个侧轴居中 *//* 拉伸，但是子盒子不要给高度 *//* align-items: stretch; */align-items: center;/* align-content: center; */}div span {width: 150px;height: 100px;background-color: purple;color: #fff;margin: 10px;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>

2、效果图：

3.5、align-content 设置侧轴上的子元素的排列方式（多行）

1、align-content属性值

2、例子

1、代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><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-between; */align-content: space-around;}div span {width: 150px;height: 100px;background-color: purple;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>

2、效果图：

3.6、flex-flow（flex-direction 和 flex-wrap 属性的复合属性）

1、flex-flow 属性值

4、flex常见的子项属性

4.1、flex

1、flex属性

2、例子

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>.main {width: 800px;height: 400px;background-color: skyblue;margin: 0 auto;border-radius: 12px;display: flex;}span {flex: 1;background-color: green;height: 100px;border-radius: 12px;margin-left: 10px;}.main span:nth-child(2) {flex: 2;background-color: blue;height: 100px;border-radius: 12px;margin-left: 10px;}</style>
</head><body><div class="main"><span>1</span><span>2</span><span>3</span></div>
</body></html>

2、效果图

4.2、align-self 控制子项自己在侧轴上的排列方式&

1、定义

align-self

order：

2、例子：

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>.main {width: 90%;height: 400px;background-color: skyblue;margin: 0 auto;border-radius: 12px;display: flex;flex-direction: row;}span {flex: 1;background-color: green;height: 100px;border-radius: 12px;margin-left: 10px;}.main span:nth-child(2) {flex: 2;background-color: blue;height: 100px;border-radius: 12px;align-self: flex-end;margin-left: 10px;}.main span:nth-child(3) {height: 100px;border-radius: 12px;order: -1;margin-left: 10px;}</style>
</head><body><div class="main"><span>1</span><span>2</span><span>3</span></div>
</body></html>