弹性盒模型

flex

作用:页面布局

我们使用弹性布局时父元素控制子元素的布局方案,不需要计算.

就像我们军训一样,教官说小伙伴全部站在一起,大家向右看齐.

我们自己把左右两边间隙调整到适当的位置,

这样的话,我们所有的元素就会布局的非常的整齐了,

 <div class="bigbox">
        <div class="smallbox">1</div>
        <div class="smallbox">2</div>
        <div class="smallbox">1</div>
        <div class="smallbox">2</div>
    </div>

.bigbox{
  		display:flex; /*父元素开启弹性盒模型*/
		width:800px;
		height: 300px;
		margin: 100px auto 0;
		border:1px solid black;   
		}
 .smallbox{
		width: 150px;
		height: 150px;
		border: 1px solid black;
	}

这时候和之前的排列方向有什么区别?

我们在没有写弹性盒模型的时候盒子是从上往下排.

开启弹性盒模型现在是从左往右排.

display:flex;
开启弹性盒模型,内部所有的子元素不会按照普通流布局,听从父级的指挥,会按照从左往右依次排列.
这里默认是display:block-flex;对外块元素,对内弹性盒模型
display:block可以写成display:block-block;对内表现为块元素,对外也表现为块元素


display:inline-block(对外表现为行内元素,对内表现为块元素).

display:flex还有另外一种写法叫做display:inline-flex(对外表现为行内元素,对内是弹性盒模型)

• 弹性特点,

1. 指的是子元素盒子具有了弹性.从左往右排列.
2. 可以进行自动伸伸缩.元素如果超出一行的宽度,会挤到一起,等比例压缩
3. 默认不换行.,因为不知道换行朝哪里

现在网页上有四个盒子,四个盒子从右往右依次排列.

大盒子只写display: flex;
/*现在打开开发者工具,将我们bigbox的宽度逐渐减小,这怎么回事,这里面小盒子没有换行,自动被挤压了,变小了.
仿佛这四个小盒子都具有了弹性,大丈夫能屈能伸说的就是我们弹性盒模型*/

弹性盒模型的两条轴线

1,**弹性盒模型的轴,**这两个轴分别指什么呢?

分别指的是元素的排列方向和元素的换行方向

元素的排列方向(默认从左往右)

现在我们的smallbox他们的元素排列方向是朝哪的?从左往右,

那元素的排列方向最多有几个方向?

从左往右,从右往左,从上往下 还有从下往上

最多有四个方向.

弹性盒模型之所以很好用很弹性,你可以去制定规则,让它可以任意控制元素的排列方向,

元素排列方向就是的主轴方向

假如从左往右就是默认方向,那我们想要它从右往左呢,

元素的排列方向叫做flex-direction

1.row(行) 横向从左往右

2.row-reverse 横向的反向 从右往左 主轴的方向变为从右到左

3.column(列) 纵向 从上往下

4.column-reverse 纵向的反向 从下往上

弹性盒子：默认情况下，弹性盒模型的子元素高度与父元素一致,子元素相当于独占一列,

但是默认宽度为0（此处与普通的块级盒模型刚好相反）

元素的换行方向(默认不换行)

那元素的换行方向是不是可以可以由主轴方向决定,

元素排列方向也就是主轴方向从左往右开始排列.

换行方向只可能有两个方向要么是朝下换行要么是朝上换行.

如果主轴方向是竖直方向,竖直向上或竖直向下时.

换行方向也只有两个,一个是向左一个是向右.

所以元素的换行方向是可以由主轴方向决定的,并且最多有三个情况(包括不换行)

我们的换行方向用的单词叫做flex-wrap

我们给换行方向取一个名字叫交叉轴

flex-wrap:nowrap(默认不换行.多出来元素挤在一堆)

wrap(正常换行,只有向右和向下)

flex-direction: row;
flex-wrap: wrap;
/*正常换行,主轴方向从左往右,朝下换行.*/

flex-direction: row-reverse;/*朝下换行,此时元素的排列方向为从左往右*/
flex-wrap: wrap/*此时12345678的盒子按照正常方向进行换行*/

flex-direction: column;
flex-wrap: wrap;
/*此时每一行都进行了换行,换行方向是向右的,放不下的元素都朝右去进行排列*/

flex-direction:column-reverse;/*依然是从左往右换行,只是主轴方向是从下面往上面*/

如果换行子元素的宽高大于父元素,则会超出父元素的边界显示

但是还有一个值warp-rerverse(反向换行 只有向上或向左,具体由主轴进行决定)

flex-direction:row;
flex-wrap: wrap-reverse;
/*换行方向为反向,元素由原来的从上往下换行变为从下往上进行换行,元素自然而然往下排列进行向上的换行*/

flex-direction:column;
flex-wrap: wrap-reverse;/*此时的换行方向变为由朝着右边换行变为朝着左边进行换行*/

flex-direction:column-reverse;
flex-wrap: wrap-reverse;/*依然朝着左边进行换行,但是元素的排列方向也就是主轴是从下往上的*/

wrap具体的换行方向由主轴决定

如果主轴方向是竖直方向(无论是向上还是向下),都会朝着右边进行换行,

主轴是水平方向(无论向右还是向左),换行方向是往下的

flex-flow

flex-flow：flex-direction flex-wrap;(两个属性的简写)

主轴(元素排列方向)的布局方案

.bigbox{
		display: flex;
    	flex-wrap: wrap;
    /*这时候元素的排列方向从左往右,也就是主轴朝向从左往右,交叉轴去进行正常换行.
       我们先来说说主轴的布局方案*/
			width: 800px;
			height: 500px;
			margin:100px auto 0;
			border:1px solid black;
		}
		.smallbox{
			width: 180px;
			height: 180px;
			box-shadow: 0 0 10px black inset;
		}
	<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 class="smallbox">6</div>
	</div>

主轴上的元素布局方案 justify-content:

1.主轴的开始位置 flex-start:

.bigbox{justify-content: flex-start;}/*默认值 ,朝着左边进行对齐,在主轴的开始位置*/

2.主轴的结束位置 flex-end;

.bigbox{justify-content: flex-end;}/*右对齐,在主轴的结束位置*/

• 如果把元素的排列方向(主轴朝向)改变

	.bigbox{
       flex-direction: column;
			flex-wrap: wrap;
       justify-content: flex-end;
    }
        /*此时主轴方向从上向下,而不是从左向右.
          换行方向向右,主轴开始的位置在上边,主轴结束的位置在下边,此时元素在主轴的结束*/

3.元素在主轴上挤在一起居中 center

	justify-content:center;
/*上面四个元素作为整体留有空隙,下面两个元素作为整体留有空隙 
	现在无论增加或减少元素都能保证在主轴上面居中排列*/

4.散开

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

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

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

交叉轴(元素的换行方向)的布局方案

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

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

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

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

交叉轴方向是等比例填充的.(align-items: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;
		}

总结:

​ 弹性盒模型(父元素控制子元素的整体口号)

1.主轴 交叉轴

2,元素在主轴上的对齐方式 justify-content

3.多行元素看成一个整体,这个整体在交叉轴的方向上的对齐方式 align-content

4.单行主轴元素在交叉轴的对齐方式 align-items

---

子元素的微调操作

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

• 1.序号,排列顺序 oreder

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

css控制html结构的顺序,

order值:,默认是0,

值越小越前面越大越后面

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

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

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

	<div class="bigbox">
		<div class="smallbox">1</div>
		<div class="smallbox">2</div>
		<div class="smallbox">3</div>
		<div class="smallbox">4</div>
	</div>
.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,只有当有多余空间可分配可设置

<div class="smallbox grow">1</div>
.grow{
			flex-grow:1;
		}
/*这地方写1默认把多出来的部分全部都分,写小数就相当于百分比,写2也相当于1*/

<div class="smallbox grow">1</div>
<div class="smallbox grow">2</div>
.grow{
			flex-grow:1;/*这两家会均分*/
		}

<div class="smallbox grow1">1</div>

<div class="smallbox grow2">2</div>
grow1{
	flex-grow:3;
	}
grow2{
	flex-grow:7;/*这两家会按比例分配*/
}

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

有富余才放大

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

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

• 盒子的压缩比例

​ flex-shrink 默认值是1;

<div class="smallbox">5</div>/*多加一个盒子*/

.shrink0{
			flex-shrink:0;
}
<div class="smallbox shrink0">2</div>
/*此时不会缩小.随着宽度减少,每个元素都变得很小,它就不会减少*/

.shrink2{
			flex-shrink:2;
}
<div class="smallbox shrink0">2</div>	
/*此时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-