CSS的浮动和flex布局
浮动案例
<!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>
.content {
width: 1190px;
margin: 0 auto;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
float: left;
margin-bottom: 10px;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
</div>
</div>
</body>
</html>
该思路有点问题,突出边框
<!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>
.content {
width: 1100px;
margin: 0 auto;
height: 800px;
background-color: orange;
}
.box {
border: 1px solid #000;
margin-right: -1px;
height: 168px;
border-right: none;
}
.item {
width: 220px;
height: 168px;
float: left;
border-right: 1px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
小插曲 margin-left重叠
<!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>
span,
strong {
float: left;
}
span {
background-color: #f00;
}
strong {
background-color: #0f0;
margin-left: -10px;
}
</style>
</head>
<body>
<span>我是span元素</span>
<strong>我是strong元素</strong>
</body>
</html>
<!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>
.content {
width: 1100px;
margin: 0 auto;
height: 800px;
background-color: orange;
}
.item {
width: 221px;
height: 168px;
float: left;
background-color: purple;
border: 1px solid #000;
margin-left: -1px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
正规思路一
<!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>
.content {
width: 1100px;
margin: 0 auto;
height: 800px;
background-color: orange;
}
.box {
margin-left: 1px;
}
.item {
width: 221px;
height: 168px;
float: left;
background-color: purple;
border: 1px solid #000;
margin-left: -1px;
box-sizing: border-box;
}
.item.first {
width: 220px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="item first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
正规思路二
<!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>
.content {
width: 1100px;
margin: 0 auto;
height: 800px;
background-color: orange;
}
/* .box {
margin-left: 1px;
} */
.item {
width: 221px;
height: 168px;
float: left;
background-color: purple;
border: 1px solid #000;
margin-right: -1px;
box-sizing: border-box;
}
.item.first {
width: 220px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="item first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
清除浮动
高度塌陷
<!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>
.content {
width: 1190px;
margin: 0 auto;
background-color: #f00;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
float: left;
margin-bottom: 10px;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
.other {
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
</div>
</div>
<div class="other"></div>
</body>
</html>
高度塌陷解决方案
- 清楚浮动的目的是
- 让父元素计算总高度的时候,把浮动子元素的高度算进去
清楚浮动的方案
给父元素设置固定高度
<!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>
.content {
width: 1190px;
margin: 0 auto;
background-color: #f00;
height: 560px;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
float: left;
margin-bottom: 10px;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
.other {
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
</div>
</div>
<div class="other"></div>
</body>
</html>
添加一个空块级元素
- 给父元素最后添加一个空的块级子元素,并且设置clear: both;
- clear属性可以指定一个元素是否必须移动(清除浮动)到在他之前的浮动元素的下面
- 取值
- left
- right
- both
- none
<!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>
.content {
width: 1190px;
margin: 0 auto;
background-color: #f00;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
float: left;
margin-bottom: 10px;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
.other {
height: 100px;
background-color: #0f0;
}
.line {
height: 0;
clear: both;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="line"></div>
</div>
</div>
<div class="other"></div>
</body>
</html>
父元素设置::after
<!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>
.content {
width: 1190px;
margin: 0 auto;
background-color: #f00;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
float: left;
margin-bottom: 10px;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
.other {
height: 100px;
background-color: #0f0;
}
.bin::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper bin">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
</div>
</div>
<div class="other"></div>
</body>
</html>
<!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>
.content {
width: 1190px;
margin: 0 auto;
background-color: #f00;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
float: left;
margin-bottom: 10px;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
.other {
height: 100px;
background-color: #0f0;
}
.clearFix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper clearFix">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
</div>
</div>
<div class="other"></div>
</body>
</html>
<!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>
.content {
width: 1190px;
margin: 0 auto;
background-color: #f00;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
float: left;
margin-bottom: 10px;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
.other {
height: 100px;
background-color: #0f0;
}
.clearFix::after {
content: "";
display: block;
clear: both;
/* 浏览器兼容 */
visibility: hidden;
height: 01;
}
/* 兼容IE6/7 */
.clearFix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper clearFix">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
</div>
</div>
<div class="other"></div>
</body>
</html>
flex布局
- flexbox
- 弹性盒子是一种用于按行或按列布局元素的一维布局方案
- 元素可以膨胀以填充额外的空间,收缩以适应更小的空间
- 通常我们使用flexbox来进行布局的方案称之为flex布局
display: flex;
<!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>
.box {
display: flex;
background-color: #f00;
}
</style>
</head>
<body>
aaaa
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
bbb
</body>
</html>
display: inline-flex;
<!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>
.box {
display: inline-flex;
background-color: #f00;
}
</style>
</head>
<body>
aaaa
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
bbb
</body>
</html>
flex
<!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>
.box {
display: flex;
background-color: #f00;
width: 200px;
height: 200px;
flex-wrap: wrap;
}
.item {
width: 60px;
height: 60px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
flex container
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
flex items
- flex-grow
- flex-basis
- flex-shrink
- order
- align-self
- flex
flex-direction
- 修改主轴的方向
- 属性值
- row
- row-reverse
- column
- column-reverse
- 属性值
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* 默认值 */
/* flex-direction: row; */
flex-direction: column;
}
.item {
width: 120px;
height: 120px;
}
</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>
<!-- <script src="./itemRandomColor.js"></script> -->
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* 默认值 */
/* flex-direction: row; */
/* flex-direction: column; */
flex-direction: row-reverse;
}
.item {
width: 120px;
height: 120px;
}
</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>
<!-- <script src="./itemRandomColor.js"></script> -->
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* 默认值 */
/* flex-direction: row; */
/* flex-direction: column; */
/* flex-direction: row-reverse; */
flex-direction: column-reverse;
}
.item {
width: 120px;
height: 120px;
}
</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>
<script>
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();
}
</script>
</body>
</html>
flex-wrap
- 是单行还是多行
- nowrap 不换行 (默认值)
- wrap
- wrap-reverse
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* 默认值 */
flex-wrap: nowrap;
/* flex-wrap: wrap; */
}
.item {
width: 120px;
height: 120px;
}
</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 item5">6</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* 默认值 */
/* flex-wrap: nowrap; */
flex-wrap: wrap;
}
.item {
width: 120px;
height: 120px;
}
</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 item5">6</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* 默认值 */
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
flex-wrap: wrap-reverse;
}
.item {
width: 120px;
height: 120px;
}
</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 item5">6</div>
</div>
<script>
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();
}
</script>
</body>
</html>
flex-flow
- flex-direction和flex-wrap的简写属性
- 任意顺序,并且都可以省略
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* 默认值 */
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
flex-flow: wrap;
}
.item {
width: 120px;
height: 120px;
}
</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 item5">6</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* 默认值 */
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
/* flex-wrap: wrap-reverse; */
flex-flow: row-reverse wrap;
}
.item {
width: 120px;
height: 120px;
}
</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 item5">6</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* flex-direction: row-reverse;
flex-wrap: wrap-reverse; */
flex-flow: row-reverse wrap-reverse;
}
.item {
width: 120px;
height: 120px;
}
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* flex-direction: row-reverse;
flex-wrap: wrap-reverse; */
/* flex-flow: row-reverse wrap-reverse; */
flex-flow: column-reverse wrap-reverse;
}
.item {
width: 120px;
height: 120px;
}
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* flex-direction: row-reverse;
flex-wrap: wrap-reverse; */
/* flex-flow: row-reverse wrap-reverse; */
flex-flow: column wrap-reverse;
}
.item {
width: 120px;
height: 120px;
}
</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>
<script>
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();
}
</script>
</body>
</html>
justify-content
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
justify-content: space-around;
/* justify-content: space-between; */
/* justify-content: space-evenly; */
}
.item {
width: 120px;
height: 120px;
}
</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>
<script>
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();
}
</script>
</body>
</html>
align-items
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* align-items: flex-start; */
/* align-items: center; */
/* align-items: flex-end; */
/* align-items: baseline; */
align-items: stretch;
}
.item {
width: 120px;
height: 120px;
}
.item1 {
height: 80px;
/* baseline属性值专用 */
font-size: 30px;
}
.item2 {
height: 150px;
/* baseline属性值专用 */
font-size: 40px;
}
.item3 {
height: 60px;
}
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* align-items: flex-start; */
/* align-items: center; */
/* align-items: flex-end; */
/* align-items: baseline; */
align-items: stretch;
}
.item {
width: 120px;
/* height默认为auto,可以不写 */
height: auto;
}
/* .item1 {
height: 80px;
}
.item2 {
height: 150px;
}
.item3 {
height: 60px;
} */
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
/* align-items: flex-start; */
/* align-items: center; */
/* align-items: flex-end; */
/* align-items: baseline; */
/* align-items: stretch; */
align-items: normal;
}
.item {
width: 120px;
}
/* .item1 {
height: 80px;
}
.item2 {
height: 150px;
}
.item3 {
height: 60px;
} */
</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>
<script>
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();
}
</script>
</body>
</html>
align-content
<!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;
width: 500px;
height: 500px;
background-color: orange;
flex-wrap: wrap;
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
align-content: space-evenly;
}
.item {
width: 120px;
height: 120px;
}
</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 item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
}
.item {
width: 120px;
height: 120px;
margin-bottom: 10px;
}
</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 item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
flex-wrap: wrap;
justify-content: space-between;
/* align-content: stretch;
align-content: normal; */
/* 拉伸 */
/* align-content: stretch; */
/* 拉伸 */
align-content: normal;
}
.item {
width: 120px;
/* height: 120px; */
margin-bottom: 10px;
}
</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 item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
flex-wrap: wrap;
justify-content: space-between;
align-content: center;
}
.item {
width: 120px;
height: 120px;
}
</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 item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
</div>
<script>
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();
}
</script>
</body>
</html>
order
- item的排列顺序
- 默认值 0
- 整数
- 数值越大,越靠后
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
}
.item1 {
order: 5;
}
.item2 {
order: 3;
}
.item3 {
order: 9;
}
</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>
<script>
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();
}
</script>
</body>
</html>
align-self
- 可以覆盖container设置的align-items
<!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;
width: 500px;
height: 500px;
background-color: orange;
align-items: center;
}
.item {
width: 120px;
height: 120px;
}
.item1 {
height: 90px;
}
.item2 {
height: 150px;
align-self: flex-start;
}
.item3 {
height: 120px;
}
</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>
<script>
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();
}
</script>
</body>
</html>
flex-grow
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
flex-grow: 1;
}
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
/* 默认值 */
/* flex-grow: 0; */
flex-grow: 1;
}
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
/* flex-grow: 1; */
}
.item1 {
flex-grow: 1;
}
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
flex-grow: 1;
}
/* .item1 {
flex-grow: 1;
} */
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
flex-grow: 1;
}
.item1 {
flex-grow: 2;
}
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
flex-grow: 0;
}
.item1 {
/* flex-grow: 1; */
flex-grow: 10000;
}
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
flex-grow: 0;
}
.item1 {
flex-grow: 1;
max-width: 150px;
}
</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>
<script>
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();
}
</script>
</body>
</html>
flex-shrink
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
/* 默认值 */
/* flex-shrink: 1; */
/* 不收缩 */
flex-shrink: 0;
}
</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 item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
/* 默认值 */
/* flex-shrink: 1; */
/* 不收缩 */
flex-shrink: 0;
}
.item1,
.item2 {
flex-shrink: 1;
}
</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">1</div>
<div class="item item5">2</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
/* 默认值 */
/* flex-shrink: 1; */
/* 不收缩 */
flex-shrink: 0;
}
.item1,
.item2 {
flex-shrink: 1;
}
.item1 {
min-width: 100px;
}
</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">1</div>
<div class="item item5">2</div>
</div>
<script>
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();
}
</script>
</body>
</html>
flex-basis
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
/* width: 120px; */
flex-basis: 120px;
height: 120px;
}
</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>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
/* width: 120px; */
flex-basis: 120px;
height: 120px;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2我是why,哈哈哈,呵呵呵</div>
<div class="item item3">3</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
/* width: 120px; */
flex-basis: 120px;
height: 120px;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2我是coderwhy_why_hahahaha</div>
<div class="item item3">3</div>
</div>
<script>
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();
}
</script>
</body>
</html>
flex
单值语法: 值必须为以下其中之一:
- 一个无单位数(<number>): 它会被当作flex:<number> 1 0; <flex-shrink>的值被假定为1,然后<flex-basis> 的值被假定为0。
- 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。
- 关键字none,auto或initial.
双值语法: 第一个值必须为一个无单位数,并且它会被当作 <flex-grow>的值。第二个值必须为以下之一:
- 一个无单位数:它会被当作 <flex-shrink> 的值。
- 一个有效的宽度值: 它会被当作 <flex-basis>的值。
三值语法:
- 第一个值必须为一个无单位数,并且它会被当作 <flex-grow>的值。
- 第二个值必须为一个无单位数,并且它会被当作 <flex-shrink>的值。
- 第三个值必须为一个有效的宽度值, 并且它会被当作 <flex-basis> 的值。
取值
- initial
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器,但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为flex: 0 1 auto。
- auto
元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收 flex 容器中额外的自由空间,也会缩短自身来适应 flex 容器。这相当于将属性设置为 flex: 1 1 auto.
none
元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器。相当于将属性设置为flex: 0 0 auto。
<flex-grow>
定义 flex 项目的 flex-grow。负值无效。省略时默认值为 1。 (初始值为 0)
<flex-shrink>
定义 flex 元素的 flex-shrink 。负值无效。省略时默认值为1。 (初始值为 1)
- <flex-basis>
定义 flex 元素的 flex-basis属性。若值为0,则必须加上单位,以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)
<!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;
width: 500px;
height: 500px;
background-color: orange;
}
.item {
width: 120px;
height: 120px;
/* flex: flex-grow flex-shrink flex-basis */
/* none: 0 0 auto */
/* auto: 1 1 auto */
/* flex: 1 1; */
flex: 1 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2我是coderwhy_why_hahahaha</div>
<div class="item item3">3</div>
</div>
<script>
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();
}
</script>
</body>
</html>
修复justify-content
<!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-wrap: wrap;
width: 500px;
background-color: orange;
}
.item {
width: 110px;
height: 140px;
margin-right: 20px;
}
.item:nth-child(4n) {
margin-right: 0;
}
</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 item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
</div>
<script>
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();
}
</script>
</body>
</html>
<!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;
justify-content: space-between;
flex-wrap: wrap;
width: 500px;
background-color: orange;
}
.item {
width: 110px;
height: 140px;
}
.container > span {
width: 110px;
}
</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 item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<!-- 列数 - 2 -->
<span></span>
<span></span>
</div>
<script>
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();
}
</script>
</body>
</html>
内容回顾
一、浮动float
1.1.两个案例
- 自己做一下
- 第二个边框不要立马掌握
1.2.清楚浮动
- after伪元素
1.3.多种布局对比
- 标准流
- 定位
- 浮动
二、flex布局
2.1.认识flex布局
2.2.flex布局重要的概念
- flex container
- flex item
- main axis/cross axis
- main start/main end /cross start/cross end
2.4.flex container中的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2.4.flex item中的属性
- order
- align-self
- flex-grow
- flex-shrinnk
- flex-basis
- flex
2.5.fle布局中justify-content最后一行布局问题
课后作业
一. 完成课堂所有的代码
- 边框可以不做
二. 说出为什么需要清除浮动以及如何清除浮动
三. 利用浮动完成如下布局结构(完成结构即可)(选做)
四. 总结flex布局container和item的属性以及作用(重要)
五. 自己找3个案例练习
- 案例一:其中用到元素定位
- 案例二:其中用到浮动布局
- 案例三:其中用到flex布局