01 flex2个重要的概念
02 flex布局模型
03 flex相关属性
04 flex container相关属性
4.1 flex direction
不同的值会改变主轴的方向
4.2 flex-wrap
4.3 flex-flow
function getRandomColor() {
return `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
}
const itemEls = document.querySelectorAll(".item")
for (const item of itemEls) {
item.style.backgroundColor = getRandomColor()
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
flex-flow: row-reverse wrap;
width: 600px;
height: 600px;
background-color: orange;
}
.item {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<span class="item item1">1</span>
<span class="item item2">2</span>
<span class="item item3">3</span>
<span class="item item4">4</span>
</div>
<script src="./color.js"></script>
</body>
</html>
4.4 justify-content
4.5 align-item
4.6 align-content
05 flex-item的属性
5.1 order
改变flex-item的排布顺序
5.2 align-self
5.3 flex-grow
默认情况下会如下排布
设置flex-grow:1为1时,会把剩余的空间等分给item
5.4 flex-shrink
06 缩写语法
07 flex布局解决对齐问题
第一种方法就是把距离都算出来，但是这种扩展性不强
第二种方法
color.js代码
function getRandomColor(){
return `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`
}
const itemEls = document.querySelectorAll(".item")
for (const item of itemEls){
item.style.backgroundColor = getRandomColor()
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 500px;
/* height: 500px; */
background-color: orange;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 120px;
height: 120px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<!-- <div class="item item8">8</div> -->
</div>
<script src="./color.js"></script>
</body>
</html>
这样不用通过计算，可以让其余行的元素都是均匀排布
标签：flex,13,const,random,item,Math,255
From： https://www.cnblogs.com/yufc/p/18257452