JS之弹性盒模型详解

弹性盒模型

基础认识

作用 :用于页面的布局

对于布局之前知道哪些?

1、display:inline:缺点:文本极限对齐,解析空格
2、浮动:flow(本质:图文混排):缺点:高度塌陷
3、定位:相对,绝对
弹性布局是父元素控制子元素的布局方案,不需要计算,自动分配

父元素:display:flex //开启弹性盒模型(默认子元素,从左向右排列,(无论块级还是行内元素))
我们平时:

display:block;块级元素本身本质是display:block-block(对外,对内都是表现块级元素)
display:flex;弹性盒模型其实本质是display:block-flex(当然也可以这样写但是麻烦),对外表现为块级,对内表现为弹性模型
display:inline-block行内块元素,对外表现为行内,对内表现为块级元素。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bigbox{
            display: flex;//启动弹性盒模型
            width: 800px;
            height: 300px;
            margin: 100px auto 0;
            border: 1px solid black;


        }
        .smallbox{
            background-color: #11f133;
            width: 150px;
            height: 150px;
            border: 1px solid green;

        }
    </style>
</head>
<body>

<div class="bigbox">
    <div class="smallbox">1</div>
    <div class="smallbox">2</div>
    <div class="smallbox">3</div>
    <div class="smallbox">4</div>
</div>
<script>

</script>
</body>
</html>

启动弹性盒模型和之前有什么区别?
没有开启弹性盒模时,块级模块从上到下排列,开启后,默认从左向右排列
JS之弹性盒模型详解_第1张图片

JS之弹性盒模型详解_第2张图片

弹性特点

①指子元素盒子具有了弹性
②可以进行自动伸缩
③默认不换行
现在网页上有四个盒子,从左向右排列,大盒子只写display:flex,当我们在控制台自动逐渐缩小大盒子宽度,则里边的小盒子没有换行自动被挤压了,仿佛这几个盒子都具有了弹性
JS之弹性盒模型详解_第3张图片JS之弹性盒模型详解_第4张图片

弹性盒模型的两个轴

(1)元素的排列方向————主轴
(2)元素的换行方向————交叉轴

元素的排列的方向(主轴)叫做flex-direction

①row(行)横向从左到右排列(默认)
②row-reverse 横向反向从右到左排列
③column(列) 纵向从上到下排列
④column-reverse 纵向反向从下到上排列
弹性盒子:默认情况下,弹性盒模型的子元素的高度和父元素一致(不设置高度的时候),宽度默认为0,由自己的内容撑开(整个和普通的块级盒模型相反)

flex-direction:row;
JS之弹性盒模型详解_第5张图片

flex-direction:row-reverse;
JS之弹性盒模型详解_第6张图片
flex-direction:column;
JS之弹性盒模型详解_第7张图片
flex-direction:column-reverse;
JS之弹性盒模型详解_第8张图片

元素的换行方向(交叉轴)叫做flex-wrap

元素的换行方向由主轴决定
(1)norwrap:不换行(默认不换行),子元素总和wide>大盒子wide则挤压存在
(2)wrap:正常换行:正常换行只有两种:①主轴横向:向下②主轴竖直:向右
(3)wrap-reverse:反向换行:反向换行也有两种:①主轴横向:向上②主轴竖直:向左
flex-wrap:wrap;
flex-direction:row;

<head>
    <meta charset="UTF-8">
    <style>
        .bigbox{
            display: flex;
            flex-direction:row;/*默认是row*/
            flex-wrap:wrap;/*正常换行主轴是横向,向下换行*/
            width: 400px;
            height: 150px;
            border: 1px solid black;

        }
        .smallbox{
            width: 100px;
            height: 100px;
            background-color: #ccaadd;
            border: 1px solid black;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="bigbox">
    <div class="smallbox">1</div>
    <div class="smallbox">2</div>
    <div class="smallbox">3</div>
    <div class="smallbox">4</div>
    <div class="smallbox">5</div>
</div>
<script>

</script>
</body>
</html>

JS之弹性盒模型详解_第9张图片

flex-wrap:wrap;
flex-direction:row-reverse;

<head>
    <meta charset="UTF-8">
    <style>
        .bigbox{
            display: flex;
            flex-direction:row-reverse;/*主轴方向(主轴)方向是从右向左*/
            flex-wrap:wrap;/*正常换行主轴是横向,向下换行*/
            width: 400px;
            height: 150px;
            border: 1px solid black;

        }
        .smallbox{
            width: 100px;
            height: 100px;
            background-color: #ccaadd;
            border: 1px solid black;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="bigbox">
    <div class="smallbox">1</div>
    <div class="smallbox">2</div>
    <div class="smallbox">3</div>
    <div class="smallbox">4</div>
    <div class="smallbox">5</div>
</div>
<script>

</script>
</body>
</html>

JS之弹性盒模型详解_第10张图片
flex-wrap:wrap-reverse;
flex-direction:row;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .bigbox{
            margin-top:100px;
            display: flex;
            flex-direction:row;/*主轴方向(主轴)方向是从左向右(默认)*/
            flex-wrap:wrap-reverse;/*正常换行主轴是横向反向,向上换行*/
            width: 400px;
            height: 150px;
            border: 1px solid black;

        }
        .smallbox{
            width: 100px;
            height: 100px;
            background-color: #ccaadd;
            border: 1px solid black;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="bigbox">
    <div class="smallbox">1</div>
    <div class="smallbox">2</div>
    <div class="smallbox">3</div>
    <div class="smallbox">4</div>
    <div class="smallbox">5</div>
</div>
<script>

</script>
</body>
</html>

JS之弹性盒模型详解_第11张图片
flex-wrap:wrap-reverse;
flex-direction:row-reverse;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .bigbox{
            margin-top:100px;
            display: flex;
            flex-direction:row-reverse;/*主轴方向(主轴)方向是从右向左*/
            flex-wrap:wrap-reverse;/*正常换行主轴是横向反向,向上换行*/
            width: 400px;
            height: 150px;
            border: 1px solid black;

        }
        .smallbox{
            width: 100px;
            height: 100px;
            background-color: #ccaadd;
            border: 1px solid black;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="bigbox">
    <div class="smallbox">1</div>
    <div class="smallbox">2</div>
    <div class="smallbox">3</div>
    <div class="smallbox">4</div>
    <div class="smallbox">5</div>
</div>
<script>

</script>
</body>
</html>

JS之弹性盒模型详解_第12张图片
flex-wrap:wrap;
flex-direction:column;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .bigbox{
            margin-top:100px;
            display: flex;
            flex-direction:column;/*主轴方向(主轴)方向是从上到下*/
            flex-wrap:wrap;/*正常换行主轴是横向反向,向右换行*/
            width: 400px;
            height: 400px;
            border: 1px solid black;

        }
        .smallbox{
            width: 100px;
            height: 100px;
            background-color: #ccaadd;
            border: 1px solid black;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="bigbox">
    <div class="smallbox">1</div>
    <div class="smallbox">2</div>
    <div class="smallbox">3</div>
    <div class="smallbox">4</div>
    <div class="smallbox">5</div>
</div>
<script>

</script>
</body>
</html>

JS之弹性盒模型详解_第13张图片
flex-wrap:wrap;
flex-direction:column-reverse;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .bigbox{
            margin-top:100px;
            display: flex;
            flex-direction:column-reverse;/*主轴方向(主轴)方向是从下到上*/
            flex-wrap:wrap;/*正常换行主轴是横向反向,向右换行*/
            width: 400px;
            height: 400px;
            border: 1px solid black;

        }
        .smallbox{
            width: 100px;
            height: 100px;
            background-color: #ccaadd;
            border: 1px solid black;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="bigbox">
    <div class="smallbox">1</div>
    <div class="smallbox">2</div>
    <div class="smallbox">3</div>
    <div class="smallbox">4</div>
    <div class="smallbox">5</div>
</div>
<script>

</script>
</body>
</html>

JS之弹性盒模型详解_第14张图片
flex-wrap:wrap-reverse;
flex-direction:column;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .bigbox{
            margin-top:100px;
            display: flex;
            flex-direction:column;/*主轴方向(主轴)方向是从上到下*/
            flex-wrap:wrap-reverse;/*正常换行主轴是横向反向,向左换行*/
            width: 400px;
            height: 400px;
            border: 1px solid black;

        }
        .smallbox{
            width: 100px;
            height: 100px;
            background-color: #ccaadd;
            border: 1px solid black;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="bigbox">
    <div class="smallbox">1</div>
    <div class="smallbox">2</div>
    <div class="smallbox">3</div>
    <div class="smallbox">4</div>
    <div class="smallbox">5</div>
</div>
<script>

</script>
</body>
</html>

JS之弹性盒模型详解_第15张图片
flex-wrap:wrap-revers;
flex-direction:column-reverse;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .bigbox{
            margin-top:100px;
            display: flex;
            flex-direction:column-reverse;/*主轴方向(主轴)方向是从下到上*/
            flex-wrap:wrap-reverse;/*正常换行主轴是横向反向,向左换行*/
            width: 400px;
            height: 400px;
            border: 1px solid black;

        }
        .smallbox{
            width: 100px;
            height: 100px;
            background-color: #ccaadd;
            border: 1px solid black;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div class="bigbox">
    <div class="smallbox">1</div>
    <div class="smallbox">2</div>
    <div class="smallbox">3</div>
    <div class="smallbox">4</div>
    <div class="smallbox">5</div>
</div>
<script>

</script>
</body>
</html>

JS之弹性盒模型详解_第16张图片
为了能写明白详细的不能再详细了,写这个博客好费眼睛

那么其实我们的两个flex-direction和flex-wrap可以写在一起
flex-flow:flex-diection(属性) flex-wrap(属性值)

接下来讲一下布局

布局方案

主轴的布局方案justify-content

(1)flex-start(主轴)开始的位置,如果是row相当于左对齐,cloumn相当于上对齐
(2)flex-end(主轴)结束呃位置,row右对齐,column下对齐,row-reverse左对齐,column-reverse上对齐
(3)center:挤在一起居中(只是主轴方向上居中
(4)散开

1.space-around(around是环绕的意思,每个flex子元素两侧都有互不干扰的等宽空白间距.最终视觉上子元素之间的间距只有子元素到父元素间距的一半)

2.justify-content:space-between;(表现为两端对齐,between是中间的意思,只有子元素之间有空隙,并且均分)

3.justify-content: space-evenly;(evenly是匀称平等的意思,最终子元素和父元素,子元素和子元素间距都一样

JS之弹性盒模型详解_第17张图片

JS之弹性盒模型详解_第18张图片
JS之弹性盒模型详解_第19张图片

交叉轴的布局方案align-content(针对多行的)align-items(单行的)

弹性之一:不换行的时候元素在主轴会挤在一起

弹性之二:元素在交叉轴方向上其实是有弹性的,当我们不设置高度的时候元素的高度会按照行数均分

flex里的子元素不是普通的块元素,有自己的性质

默认主轴方向的长度是包裹的.

交叉轴方向是等比例填充的.(align-conent:stretch)

  • 交叉轴上的元素的对齐方式

    两种不同的场景

1.我们将主轴方向上面的多行元素看成一个整体

此属性只在flex容器中有多行flex元素时才有作用.(使用flex-wrap)

换了两行就相当于有两个元素,这两个元素是怎么对齐?这是我们需要讨论的第一个特点,

整体与整体在交叉轴的对齐方式

	flex-direction:row;
	flex-wrap: wrap;
	justify-content:space-between;
	align-content:stretch;
/*默认交叉轴方向的长度是等比例填充的,如果元素换行后仍然有多余空间,元素会平分剩余空间
		如果子元素没有高度,元素则会拉伸到父元素的高度,每行平分父元素的高度*/
align-content:flex-start;/*元素在交叉轴的开始位置排列*/
align-content:flex-end;/*元素在交叉轴的结束位置排列,元素位于容器的结尾*/
align-content:center;/*元素在交叉轴居中显示(结合justify-content:center可以水平垂直居中)*/
align-content:space-between;
/*结合justify-content:space-between.
各行在弹性盒容器中平均分布,子元素与子元素的间隙是相同的
*/
align-content:space-around;
/*结合justify-content:space-around元素与元素之间的间隙都一样*/
align-content:space-evenly;

2.主轴每一个元素在交叉轴方向上的排列布局方式

align-items

strech(默认值) 自动把元素拉伸成容器的高度,

flex-start交叉轴的起点对齐。

flex-end 交叉轴的终点对齐

center交叉轴的中点对齐

baseline基线对齐

<div class="bigbox">
		<div class="smallbox h130">1</div>
		<div class="smallbox ">2</div>
		<div class="smallbox h150">3</div>
		<div class="smallbox ">4</div>
		<div class="smallbox h200">5</div>
		<div class="smallbox">6</div>
		<div class="smallbox">7</div>
		<div class="smallbox">8</div>
	</div>
.bigbox{
			display: flex;
			flex-direction:row;
			flex-wrap: wrap;
			justify-content:space-between;
			align-content: center;
			align-items: baseline;
			width: 800px;
			height: 500px;
			margin:100px auto 0;
			border:1px solid black;
		}
		.smallbox{
			width: 180px;
			height: 180px;
			box-shadow: 0 0 10px black inset;
		}
		.h150{
			height: 150px;
			font-size: 50px;
		}
		.h130{
			height: 130px;
			font-size:80px;
		}
		.h200{
			height: 200px;
			font-size: 100px;
		}

多行元素看成一个整体,这个整体在交叉轴的方向上的对齐方式 align-content
单行主轴元素在交叉轴的对齐方式 align-items
*子元素的微调操作

给子元素添加样式,作为子元素的微调

1.序号,排列顺序 oreder

我们之前学习前端的元素顺序时候1就是1,2就是2,1写在2前面就是写在2前面,没有办法修改,

css控制html结构的顺序,

order值:,默认是0,

值越小越前面越大越后面

order值一样根据代码书写顺序来,只能弹性盒子中

取值 只能是整数 可以为负数 0是默认 数值越大在越后面

2.弹性盒子内的子元素的大小属性

	
1
2
3
4
.bigbox
{ display: flex; /*此时元素不换行,主轴默认朝右,右边有空余的区域,. 如果我们想这空出来的区域被这个盒子占满呢?*/ width: 800px; height: 500px; margin:100px auto 0; border:1px solid black; } .smallbox{ width: 180px; height: 180px; box-shadow: 0 0 10px black inset; }

盒子的膨胀系数 flex-grow: 默认都是0,只有当有多余空间可分配可设置**

1
.grow
{ flex-grow:1; } /*这地方写1默认把多出来的部分全部都分,写小数就相当于百分比,写2也相当于1*/
1
2
.grow
{ flex-grow:1;/*这两家会均分*/ }
1
2
grow1
{ flex-grow:3; } grow2{ flex-grow:7;/*这两家会按比例分配*/ }

如果份数和小于1,就按百分比分,如果大于1,就全部分

有富余才放大

默认是0 设置越大拉伸越多

自己要多分的部分=总多出来的部分*(自己的份数/总份数)

盒子的压缩比例

flex-shrink 默认值是1;

"smallbox">5
/*多加一个盒子*/
.shrink0{
			flex-shrink:0;
}
"smallbox shrink0">2
/*此时不会缩小.随着宽度减少,每个元素都变得很小,它就不会减少*/
.shrink2{
			flex-shrink:2;
}
"smallbox shrink0">2
/*此时shrink:2的元素会比shrnk1的元素收缩值大两倍*/

自己的捐献的部分 = 总的缺失部分*(自己的捐献系数/总的捐献系数)

  • flex-basis属性定义了在分配多余空间之前,子元素占据的主轴空间

    用长度值来定义宽度。不允许负值

    用百分比来定义宽度。不允许负值

    content:基于内容自动计算宽度

    auto:检索你是否设置了width/height值,没有就使用content

这三个数膨胀和压缩系数和felx-basis基准值可以合并到一起

flex属性是 flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。

auto: 计算值为 1 1 auto

initial: 计算值为 0 1 auto

none:计算值为 0 0 auto

inherit:从父元素继承

flex:none 当盒子变小时不会压缩,变大的话也不会拉伸,相当于我们物理学的刚体,不屈不挠,不会变通的一个盒子

flex:auto 缩小盒子时等比例缩小,放大盒子也会拉伸

align-self子元素覆盖的对齐方式

align-self用于设置单个弹性子元素在交叉轴上的对齐方式 可以覆盖align-items

flex兼容性

1.旧版本的flex写法只支持旧的语法书写

  1. 最早: display:box;
  2. 过渡: display:flex box;
  3. 当今标准 display:flex;

2.为了兼容老版本的游览器

需要添加游览器兼容前缀 如-webkit-

你可能感兴趣的:(flex,css,html,css3)