文章目录
一、Flex布局
传统布局:
div布局,table布局,结构标签。
这些布局方式都离不开三个要素。 display, position, float。(操作麻烦)
Flex布局:
操作便捷。一般用于移动端。
布局名称:弹性布局,弹性盒子,伸缩盒布局,伸缩布局,Flex布局。
Flex简介
Flex布局设置在父元素之上,作用于对子元素进行排列。
注意:设置Flex布局以后,浮动和清除浮动会失效。
1.容器
如果一个父元素设置了flex布局,那么我们可以称这个父元素为容器。
如果没有设置flex布局的父元素,那么他就是一个普通的父元素。
2.项目
如果子元素的父元素设置了flex布局,那么这个子元素我们称之为项目。
二、Flex容器常用属性
dispaly: flex;
dispaly-flex; 设置flex布局。
设置父元素为容器,通过flex搭建页面。
案例:
<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>
*{
margin: 0;
padding: 0;
}
/* 给父元素(容器)设置flex
如果一个父元素设置了flex布局,那么我们可以称这个父元素为容器。
如果没有设置flex布局的父元素,那么他就是一个普通的父元素。
*/
.flexbox{
border: 1px solid red;
/* 给容器设置flex */
display: flex;
}
/* 给子元素(项目)设置样式
如果子元素的父元素设置了flex布局,那么这个子元素我们称之为项目。
*/
/*
在flex布局中,不要去考虑项目是块级元素还是行级元素,直接设置宽高就可以。
比如div,如果没有添加flex布局之前。想一行排列。要不使用display, 要不设置float.
span 也是一样,必须使用display。 所以我们需要关注的地方是布局!!!
*/
.flexbox span{
width:100px;
height: 100px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="flexbox">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<script>
var spanlist= document.querySelectorAll(".flexbox span");
spanlist.forEach(function(w){
w.style.backgroundColor=
"rgb("+(parseInt(Math.random()*255)+1)+","
+(parseInt(Math.random()*255)+1)+","+(parseInt(Math.random()*255)+1)+")";
})
</script>
</body>
</html>
flex-direction
设置主轴方向。
Flex布局中分为:主轴和侧轴,侧轴也称之为(交叉轴)。
主轴:X轴 横轴 默认
交叉轴:Y轴,竖轴。
属性值 | 解释说明 |
---|---|
row | 默认值,X轴,水平方向,从左到右 |
row-reverse | X轴,水平方向 从右到左 |
column | 侧轴,Y轴, 交叉轴 垂直方向 从上到下 |
column-reverse | 侧轴,Y轴, 交叉轴 垂直方向 从下到上 |
案例:
<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>
*{
margin: 0;
padding: 0;
}
/* 给父元素(容器)设置flex
如果一个父元素设置了flex布局,那么我们可以称这个父元素为容器。
如果没有设置flex布局的父元素,那么他就是一个普通的父元素。
*/
.flexbox{
border: 1px solid red;
/* 给容器设置flex */
display: flex;
/* 切换主轴
默认为x轴。 水平方向,从左到右 flex-direction:row
水平方向 从右到左 flex-direction:row-reverse;
切换主轴为Y轴:垂直方向 从上到下 flex-direction:column
垂直方向 从下到上 flex-dirction:column-reverse
*/
flex-direction: column-reverse;
}
/* 给子元素(项目)设置样式
如果子元素的父元素设置了flex布局,那么这个子元素我们称之为项目。
*/
/*
在flex布局中,不要去考虑项目是块级元素还是行级元素,直接设置宽高就可以。
比如div,如果没有添加flex布局之前。想一行排列。要不使用display, 要不设置float.
span 也是一样,必须使用display。 所以我们需要关注的地方是布局!!!
*/
.flexbox span{
width:100px;
height: 100px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="flexbox">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<script>
var spanlist= document.querySelectorAll(".flexbox span");
spanlist.forEach(function(w){
w.style.backgroundColor=
"rgb("+(parseInt(Math.random()*255)+1)+","
+(parseInt(Math.random()*255)+1)+","+(parseInt(Math.random()*255)+1)+")";
})
</script>
</body>
</html>
flex-wrap
设置项目换行模式.
属性值 | 解释说明 |
---|---|
nowrap | 默认不换行(压缩项目大小) |
wrap | 换行 |
wrap-reverse | 换行 反转(倒序) |
案例:
<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>
.flexbox{
width: 500px;
height: 500px;
border: 1px solid red;
/* 设置父元素为flex */
display: flex;
/* 设置换行模式
flex-wrap:nowrap 默认 不换行(压缩项目大小)
wrap 换行
wrap-reverse 换行 反转 倒序
*/
flex-wrap: wrap-reverse;
}
.flexbox span{
width: 200px;
height: 200px;
font-size: 40px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="flexbox">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<script>
var spanlist = document.querySelectorAll(".flexbox span");
spanlist.forEach(function(w){
w.style.backgroundColor="rgb("+(parseInt(Math.random()*255)+1)+","+(parseInt(Math.random()*255)+1)+","+(parseInt(Math.random()*255)+1)+")";
})
</script>
</body>
</html>
flex-flow简写方式
flex-direction属性和flex-wrap属性的简写形式
/* flex-flow flex-direction属性和flex-wrap属性的简写形式 /
/ 主轴为Y轴,换行 */
flex-flow: column wrap;
justify-content
设置项目(子元素)在主轴上的对齐方式
属性值 | 解释说明 |
---|---|
flex-start | 默认值。设置子元素在主轴头部显示 |
flex-end | 设置子元素在主轴尾部显示 |
center | 设置子元素在主轴中间显示 居中对齐 |
space-around | 设置子元素平分主轴上的剩余空间(两边子元素的间距占中间间距的一半) |
space-between | 设置子元素两边贴边,平分剩余空间 |
space-evenly | 设置子元素平分主轴上的剩余空间,并且间距一致(子元素间距全部一致) |
设置项目在主轴上的对齐方式:
<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>
*{
margin: 0;
padding: 0;
}
.flexbox{
border: 1px solid red;
width: 600px;
height: 500px;
/* 给容器设置flex */
display: flex;
/* 设置项目在主轴上的对齐方式 justify-content */
/* 设置子元素在主轴头部显示 */
/* justify-content: flex-start; */
/* 设置子元素在主轴尾部显示 */
/* justify-content: flex-end; */
/* 设置子元素在主轴中间显示 居中对齐 */
justify-content: center;
/* 设置子元素平分主轴上的剩余空间 */
/* justify-content: space-around; */
/* 设置子元素两边贴边,平分剩余空间 */
/* justify-content: space-between; */
/* 设置子元素平分主轴上的剩余空间,并且间距一致 */
/* justify-content: space-evenly; */
/*换行 */
flex-wrap: wrap;
}
.flexbox span{
width:100px;
height: 100px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="flexbox">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<script>