display:flex和三列布局
阿新 • • 發佈：2021-01-28
技術標籤：前端面試
flex 彈性盒子
在父元素上設定display：flex
彈性改變父元素中的子元素
預設情況下：有一條水平的主軸，所有子元素按照主軸方向排列，在主軸方向沒有寬度，在側軸方向寬度填滿。主軸方向元素變多時，自動擠壓
父元素屬性
flex-direction表示主軸方向：
1.row表示主軸水平方向排列，從左到右，側軸垂直從上到下
row-reverse表示主軸水平，從右到左排列
2.column表示主軸垂直方向排列，從上到下
column-reverse表示主軸垂直方向排列，從下到上
justify-content表示主軸方向元素排列方式
flex-start:從開始位置排列
center：所有元素居中排列
space-between ：所有空白填充在子元素之間，左右兩個元素頂格
space-around：空白壞繞
space-evenly:表示均分所有的空白元素
aline-items表示側軸的排列方式
flex-start:從開始位置排列
flex-end：從側軸結束位置排列
center：所有元素居中排列
flex-wrap表示是否開啟換行
no-wrap表示不允許換行
wrap表示可以換行（側軸不會擠壓元素，超出去就溢位）
aline-content表示側軸的排列方式（整體側軸）
前提：開啟換行，有多行元素時
flex-start:從開始位置排列
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>