css:flex布局
目录
align-content设置侧轴上的子元素排列方式（多行）
flex-flow属性是flex-direction和flex-wrap属性的复合属性
补一下之前没学的flex
flex布局
flex是flexible Box的缩写，表示弹性布局，用来为盒装模型提供最大的灵活度，任何一种容器都可以指定为flex布局
注意事项：
当我们为父盒子施加flex布局以后，子元素的float、clear和vertical-align属性都失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，叫flex容器，简称容器
它的所有子元素为容器成员，这些容器成员也被称为flex项目，简称项目
flex布局父项的常见属性
flex-direction设置主轴的方向
我们的元素一般是按照主轴来排列的
主轴和侧轴，也被称为行和列、x轴和y轴
一般默认主轴是x轴方向，水平向右；侧轴方向是y轴方向，水平向下
| 属性值 | 说明 |
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
初始：
从右到左：
从上到下和从下到上
justify-content设置主轴上的子元素排列方式
这种方法可以达到居中对齐的效果
| 属性值 | 说明 |
| flex-start | 默认值，从头部开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 两边贴边，剩余的项目平分剩余空间 |
flex-direction:row;
justify-content: center; 
flex-direction:row;
justify-content: space-between; 
flex-direction:row;
justify-content: space-around; 
如果把主轴设置为y轴：
flex-direction:column;
justify-content: space-around; 
解决盒子摆不开的问题：弹性布局会改变内部项目的大小和间距，来保证我们一定塞得下盒子
flex布局下，默认盒子是不换行的
如果想让盒子摆成两行：
flex-wrap设置子元素是否换行
| 属性值 | 说明 |
| nowrap | 默认值，不换行 |
| wrap | 换行 |
justify-content: space-around;
flex-wrap: wrap;
align-items设置侧轴上的子元素排列方式（单行）
| 属性值 | 说明 |
| flex-start | 默认值，从头部开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中） |
| strech | 拉伸（默认值） |
上下左右都居中：
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
<!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;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
align-items:stretch;
}
div span {
width: 150px;
/* height: 100px; */
/* 子盒子不给高度，才能达到stretch的效果 */
background-color: cadetblue;
}
</style>
</head>
<body>
<!-- 补充：flex布局 -->
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</body>
</html>
如果改变主轴：
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
align-content设置侧轴上的子元素排列方式（多行）
设置子项在侧轴的排列方式，只适用多行，单行的时候没有效果
| 属性值 | 说明 |
| flex-start | 默认值，从头部开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中） |
| strech | 拉伸（默认值） |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
flex-flow属性是flex-direction和flex-wrap属性的复合属性
复合写法：
flex-flow:column wrap子项flex布局
flex属性定义子项目分配剩余看见，用flex表示占多少份数
<!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;
/* 给父盒子一个flex */
width: 800px;
height: 100px;
background-color: pink;
flex-flow: row wrap;
}
div span:nth-child(1) {
width: 150px;
height: 100px;
background-color: cadetblue;
}
div span:nth-child(2) {
flex: 1;
/* 左右的盒子各占自己的位置，中间的盒子占满剩下的位置 */
/* height: 100px;不给高度*/
background-color: rgb(187, 105, 146);
}
div span:nth-child(3) {
width: 150px;
height: 100px;
background-color: rgb(214, 231, 165);
}
</style>
</head>
<body>
<!-- 补充：flex布局 -->
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
还可以用flex把父盒子平均分成三份
div span:nth-child(1) {
flex: 1;
background-color: cadetblue;
}
div span:nth-child(2) {
flex: 1;
/* 左右的盒子各占自己的位置，中间的盒子占满剩下的位置 */
/* height: 100px;不给高度*/
background-color: rgb(187, 105, 146);
}
div span:nth-child(3) {
flex: 1;
background-color: rgb(214, 231, 165);
}
给第二个盒子设置flex:2;2盒子占1/2的空间，剩下两个盒子各占1/4
align-self控制子项在自己侧轴上的排列方式
div span:nth-child(2) {
width: 150px;
height: 100px;
background-color: rgb(187, 105, 146);
align-self: flex-start;
}独立设置项目自己的排列方式
order属性定义项目的排列顺序
order里的数字越小越靠前，而z-index里的数字越在前面
默认的order：0；，我们设置为-1就可以改变排序
order:-1;
原文地址：https://blog.csdn.net/Au_ust/article/details/144373721
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！