flex布局基础的属性有哪些？⼀、flex-容器属性
1、⾸先决定是flex主轴⽅向：flex-direction
row  ⽔平向右（默认）
row-reverse  ⽔平向左
column 垂直向下
column-rrverse ⽔平向右
<!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>
</head>
<style>
#dad {
position: relative;
display: flex;
height: 100px;
}
#son-1 {
width: 120px;
background: blue;
}
#son-2 {
width: 80px;
background: green;
}
#son-3 {
width: 100px;
background: yellow;
}
</style>
<script>
function handleClick(flexDirection) {
}
</script>
<body>
<div>决定主轴的⽅向：flex-direction</div>
<div id="dad">
<div id="son-1">w-120</div>
<div id="son-2">w-80</div>
<div id="son-3">w-100</div>
</div>
<button onclick="handleClick('row')">row</button>
<button onclick="handleClick('row-reverse')">row-reverse</button>
<button onclick="handleClick('column')">column</button>
<button onclick="handleClick('column-reverse')">column-reverse</button>
</body>
</html>
View Code
2、设置⽗容器属性，决定⼦容器主轴排列⽅式（⽔平⽅向）：justify-content
flex-start 左对齐（默认）
flex-end 右对齐
center 居中对齐
space-around 均匀分布，
space-between 均匀分布，收尾⼦容器紧邻⽗容器
<!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>
</head>
<style>
#dad {
position: relative;
display: flex;
height: 100px;
display: flex;
}
#son-1 {
width: 120px;
background: blue;
}
#son-2 {
width: 80px;
background: green;
}
#son-3 {
width: 100px;
background: yellow;
}
</style>
<script>
function handleClick(justifyContent) {
}
</script>
<body>
<div>
设置⼦容器排列，主轴排列 justify-content
</div>
<div id="dad">
<div id="son-1">w-120</div>
<div id="son-2">w-80</div>
<div id="son-3">w-100</div>
</div>
<button onclick="handleClick('flex-start')">flex-start</button>
<button onclick="handleClick('flex-end')">flex-end</button>
<button onclick="handleClick('center')">center</button>
<button onclick="handleClick('space-around')">space-around</button>
<button onclick="handleClick('space-between')">space-between</button>
</body>
</html>
View Code
3、设置⽗容器属性，决定⼦容器的交叉轴排列⽅式（垂直⽅向）：align-items
flex-start 顶部对齐（默认）
flex-end 底部对齐
center 居中对齐
baseline 基准线对齐
stretch 拉伸对齐
<!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>
</head>
<style>
#dad {
position: relative;
display: flex;
height: 150px;
}
#son-1 {
width: 120px;
height: 120px;
background: blue;
}
#son-2 {
width: 80px;
height: 80px;
background: green;
}
#son-3 {
width: 100px;
height: 100px;
background: yellow;
}
</style>
<script>
function handleClick(alignItems) {
}
</script>
<body>
<div>设置⼦容器排列，交叉轴排列 align-items</div>
<div id="dad">
<div id="son-1">w-120</div>
<div id="son-2">w-80</div>
<div id="son-3">w-100</div>
</div>
<button onclick="handleClick('flex-start')">flex-start</button>
<button onclick="handleClick('flex-end')">flex-end</button>
<button onclick="handleClick('center')">center</button>
<button onclick="handleClick('baseline')">baseline</button>
<button onclick="handleClick('stretch')">stretch</button>
</body>
</html>
View Code
4、设置⼦容器交叉轴排列，和⽗容器align-items完全⼀致：align-self
flex-start 顶部对齐（默认）
flex-end 底部对齐
center 居中对齐
baseline 基准线对齐
stretch 拉伸对齐
<!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>
</head>
<style>
#dad {
position: relative;
display: flex;
height: 150px;
align-items: center;
}
#son-1 {
width: 120px;
height: 120px;flex布局对齐方式
background: blue;
}
#son-2 {
width: 80px;
height: 80px;
background: green;
}
#son-3 {
width: 100px;
height: 100px;
background: yellow;
}
</style>
<script>
function handleClick(alignSelf) {
}
</script>
<body>
<div>决定⼦容器交叉轴⽅向：align-self</div>
<div id="dad">
<div id="son-1">w-120</div>
<div id="son-2">w-80</div>
<div id="son-3">w-100</div>
</div>
<button onclick="handleClick('flex-start')">flex-start</button>
<button onclick="handleClick('flex-end')">flex-end</button>
<button onclick="handleClick('center')">center</button>
<button onclick="handleClick('baseline')">baseline</button>
<button onclick="handleClick('stretch')">stretch</button>
</body>
</html>
View Code
⼆、flex-参数属性
1、order：默认0，⽤于决定项⽬排列顺序，数值越⼩，项⽬排列越靠前。<!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>
#dad {
position: relative;
display: flex;
height: 150px;
}
#son-1 {
width: 120px;
height: 120px;
background: blue;
order: 0;
}
#son-2 {
width: 80px;
height: 80px;
background: green;
order: 0;
}
#son-3 {
width: 100px;
height: 100px;
background: yellow;
order:0;
}
</style>
<script>
function handleClick(cls) {
const order = ElementById(cls).der;
}
</script>
</head>
<body>
<div>决定项⽬排列顺序：order</div>
<div id="dad">
<div id="son-1">w-120</div>
<div id="son-2">w-80</div>
<div id="son-3">w-100</div>
</div>
<button onclick="handleClick('son-1')">w-120 ++</button>
<button onclick="handleClick('son-2')">w-80 ++</button>
<button onclick="handleClick('son-3')">w-100 ++</button>
</body>
</html>
View Code
2、flex-grow：默认0，⽤于决定项⽬在有剩余空间的情况下是否放⼤，默认不放⼤；注意，即便设置了固定宽度，也会放⼤。
<!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>
#dad {
position: relative;
display: flex;
height: 150px;
}
#son-1 {
width: 120px;
height: 120px;
background: blue;
flex-grow: 0;
}
#son-2 {
width: 80px;
height: 80px;
background: green;
flex-grow: 0;
}
#son-3 {
width: 100px;
height: 100px;
background: yellow;
flex-grow: 0;
}
</style>
<script>
function handleClick(cls) {
const flexGrow = ElementById(cls).style.flexGrow;
}
</script>
</head>
<body>
<div>决定项⽬剩余空间缩放：flex-grow</div>
<div id="dad">
<div id="son-1">w-120</div>
<div id="son-2">w-80</div>
<div id="son-3">w-100</div>
</div>
<button onclick="handleClick('son-1')">w-120 ++</button>
<button onclick="handleClick('son-2')">w-80 ++</button>
<button onclick="handleClick('son-3')">w-100 ++</button>
</body>
</html>
View Code
3、flex-shrink：默认1，⽤于决定项⽬在空间不⾜时是否缩⼩，默认项⽬都是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>
#dad {
position: relative;
display: flex;
height: 150px;
}
#son-1 {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。