display:flex和三列布局
作者：互联网
flex 弹性盒子
在父元素上设置display：flex
弹性改变父元素中的子元素
默认情况下：有一条水平的主轴，所有子元素按照主轴方向排列，在主轴方向没有宽度，在侧轴方向宽度填满。主轴方向元素变多时，自动挤压
父元素属性
flex-direction表示主轴方向：
1.row表示主轴水平方向排列，从左到右，侧轴垂直从上到下
row-reverse表示主轴水平，从右到左排列
2.column表示主轴垂直方向排列，从上到下
column-reverse表示主轴垂直方向排列，从下到上
justify-content表示主轴方向元素排列方式
flex-start:从开始位置排列
flex-end：从主轴结束位置排列
center：所有元素居中排列
space-between ：所有空白填充在子元素之间，左右两个元素顶格
space-around：空白坏绕
space-evenly:表示均分所有的空白元素
aline-items表示侧轴的排列方式
flex-start:从开始位置排列
flex-end：从侧轴结束位置排列
center：所有元素居中排列
flex-wrap表示是否开启换行
no-wrap表示不允许换行
wrap表示可以换行（侧轴不会挤压元素，超出去就溢出）
aline-content表示侧轴的排列方式（整体侧轴）
前提：开启换行，有多行元素时
flex-start:从开始位置排列
flex-end：从侧轴结束位置排列
center：所有元素居中排列
space-between ：所有空白填充在子元素之间，左右两个元素顶格
space-around：空白坏绕
space-evenly:表示均分所有的空白元素
弹性子集上的属性
aline-self表示自己单独一个元素的侧轴排列方式
start 表示自己单独在侧轴的起始位置
end 表示自己单独在侧轴的结束位置
center 表示自己单独居中
flex:设置弹性宽度
比如：设置几个flex的和为20，其中一个flex为5，则该元素占5/20的宽度
挤压宽度的时候优先挤压弹性宽度元素，当弹性宽度不能挤压的时候，挤压定宽元素
order设置优先级
三列布局
左右固定，中间自适应
<!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>
*{
margin:0px;
padding:0px;
}
html,body{
width:100%;
height:100%;
overflow:hidden;
}
body{display:flex;}
div.left{
background:skyblue;
width:200px;
height:200px;
}
div.center{
background:orange;
height:200px;
flex:5;
}
div.right{
background:pink;
height:200px;
flex:5;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
</html>
标签：表示,flex,排列,主轴,元素,space,三列,display 来源： https://blog.csdn.net/weixin_41358807/article/details/113271016