1、伸缩容器-伸缩项目
<!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>1、伸缩容器-伸缩项目</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color: #888;
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner3{
display: flex;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner inner3">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</div>
</body>
</html>2、主轴方向
<!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>2、主轴方向</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关属性-start */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向 水平从左到右 默认 */
flex-direction: row;
/* 调整主轴方向 水平从右侧到左，默认 */
/* flex-direction: row-reverse; */
/* 调整主轴方向，垂直从上到下 */
/* flex-direction: column; */
/* 调整主轴方向，垂直从下到上 */
flex-direction: column-reverse;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</body>
</html3、主轴换行方式
<!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>3、主轴换行方式</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关属性-start */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向 水平从左到右 默认 */
flex-direction: row;
/* 主轴换行方式,不换行，默认值 */
/* flex-wrap: nowrap; */
/* 主轴换行方式，换行 */
flex-wrap: wrap;
/* 主轴换行方式，反向换行 */
/* flex-wrap: wrap-reverse; */
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
</body>
</html>4、flex-flow
<!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>4、flex-flow</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关属性-start */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向 水平从左到右 默认 */
/* flex-direction: row; */
/* 主轴换行方式，换行 */
/* flex-wrap: wrap; */
flex-flow: row wrap;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
</body>
</html>5、主轴对齐方式
<!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>5、主轴对齐方式</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关属性-start */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向 水平从左到右 默认 */
flex-direction: row;
/* 主轴换行方式，换行 */
flex-wrap: wrap;
/* 主轴的对齐方式,主轴的起始位置 */
/* justify-content: flex-start; */
/* 主轴的对齐方式,主轴的结束位置 */
/* justify-content: flex-end; */
/* 主轴的对齐方式,主轴的中间位置 */
/* justify-content: center; */
/* 主轴的对齐方式：项目均匀的分布在一行中，项目与项目的距离是项目距离边缘的二倍 */
/* justify-content: space-around; */
/* 主轴的对齐方式：项目均匀的分布在一行中，项目与项目的距离是相等的，项目距离边缘没有距离 */
/* justify-content: space-between; */
/* 主轴的对齐方式，项目均匀分布在一行 */
/* justify-content: space-evenly; */
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</body>
</html>6、侧轴对齐
<!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>6、侧轴对齐</title>
<style>
.outer{
width: 1000px;
height: 600px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关属性-start */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向 水平从左到右 默认 */
flex-direction: row;
/* 主轴换行方式，换行 */
flex-wrap: wrap;
/* 主轴的对齐方式,主轴的起始位置 */
justify-content: flex-start;
/* 侧轴的对齐方式 侧轴的起始位置对齐*/
/* align-items: flex-start; */
/* 侧轴的对齐方式 侧轴的结束位置对齐*/
/* align-items: flex-end; */
/* 侧轴的对齐方式 侧轴的中间位置对齐*/
/* align-items: center; */
/* 侧轴的对齐方式 侧轴的中间位置对齐(字体基线对齐)*/
/* align-items: baseline; */
/* 侧轴的对齐方式，拉伸到父容器（前提：伸缩项目不能给高度），默认*/
align-items: stretch;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner2{
height: 300px;
}
.inner3{
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
</body>
</html>7、侧轴对齐方式-多行
<!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>7、侧轴对齐方式-多行</title>
<style>
.outer{
width: 1000px;
height: 900px;
background-color: #888;
margin: 0 auto;
/* 伸缩盒模型相关属性-start */
/* 将该元素变为了伸缩容器（开启了flex布局） */
display: flex;
/* 调整主轴方向 水平从左到右 默认 */
flex-direction: row;
/* 主轴换行方式，换行 */
flex-wrap: wrap;
/* 主轴的对齐方式,主轴的起始位置 */
justify-content: flex-start;
/* 侧轴的对齐方式（多行）侧轴的起始位置对齐 */
/* align-content: flex-start; */
/* 侧轴的对齐方式（多行）侧轴的结束位置对齐 */
/* align-content: flex-end; */
/* 侧轴的对齐方式（多行） 侧轴中间位置*/
/* align-content: center; */
/* 侧轴的对齐方式（多行） 伸缩项目之间的距离是相等的，且是边缘距离的2倍*/
/* align-content: space-around; */
/* 侧轴的对齐方式（多行） 伸缩项目之间的距离是相等的，且边缘没有距离*/
/* align-content: space-between; */
/* 侧轴的对齐方式（多行） 伸缩项目之间的距离是相等的*/
/* align-content: space-evenly; */
/* 侧轴的对齐方式（多行）拉伸（别给高）默认 */
/* align-content: stretch; */
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
box-sizing: border-box;
}
.inner2{
height: 300px;
}
.inner3{
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">1</div>
<div class="inner inner2">2</div>
<div class="inner inner3">3</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
</body>
</html>
评论 (0)