弹性盒子

弹性盒子

  弹性盒子是 CSS3 的一种新的布局模式，当页面需要适应不同的屏幕大小以及设备类型时，元素有恰&当的行为布局

如图所示，弹性盒子没有 x 轴 y 轴，而是主轴和侧轴

属性

写在容器上的属性

1.语法：display：flex | inline-flex

       .box {
			width: 1000px;
			border: 1px solid black;
			display: flex;
		}
		.one {
			width: 100px;
			height: 100px;
			background: #f00;
		}
		.two {
			width: 100px;
			height: 100px;
			background: #f0f;
		}
		.three {
			width: 100px;
			height: 100px;
			background: #00f;
		}
		.four {
			width: 100px;
			height: 100px;
			background: #ff0;
		}
    <div class="box">
		<div class="one">1</div>
		<div class="two">2</div>
		<div class="three">3</div>
		<div class="four">4</div>
    </div>

当设置为 flex 时：效果图：

当设置为 inline-flex 时，效果图：

2.语法：flex-direction：row | row-reverse | column | column-reverse

• row：默认位置：主轴横向，起点左侧，终点右侧
• row-reverse ：主轴横向反转，起点右侧，终点左侧
• column：主轴纵向，起点上方，终点下方
• column-reverse：主轴纵向，起点下方，终点上方

当设置 flex-direction：row

      .box {
			border: 1px solid black;
			display: flex;
			flex-direction: row;
       }

效果图：

当设置 flex-direction：row-reverse

		.box {
			border: 1px solid black;
			display: flex;
			flex-direction: row-reverse;
		}

效果图：

当设置 flex-direction：column

当设置 flex-direction：column-reverse

3.语法：flex-wrap： nowrap | wrap | wrap-reverse

• nowrap：默认值，子元素溢出父容器不换行
• wrap ：子元素溢出父容器自动换行
• wrap-reverse：反转 wrap 排列

当设置 flex-wrap：nowrap（给父元素设置了宽度为 300px）

当设置 flex-wrap：wrap

当设置 flex-wrap：wrap-reverse

4.语法：justify-content：flex-start | flex-end | center | space-between | space-around

• flex-start：默认值，主轴起始位置对齐
• flex-end ：主轴终点位置对齐
• center：主轴中间位置对齐
• space-between：平均分布在主轴里
• space-around：两端保留间距

当设置justify-content：flex-start

当设置justify-content：flex-end

当设置justify-content：center

当设置justify-content：space-between

当设置justify-content：space-around

5.语法：align-items： flex-start | flex-end | center | baseline | stretch

• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
• baseline：将文字对齐
• stretch：默认值，如果未设置宽高，那么将元素默认拉伸为父元素高度

当设置align-items： stretch

		.box {
			border: 1px solid black;
			display: flex;
			height: 200px;
		}
			

子元素不设置高度，效果：

当设置align-items： flex-start
子元素设置高度

当设置align-items： flex-end

当设置align-items： center

当设置align-items： baseline

<div class="four" style="font-size: 40px;">4</div>

6.语法：align-content：flex-start | flex-end | center | space-between | space-around | stretch
建立在子元素换行的情况，stretch为默认属性值

当设置为align-content：stretch

当设置为align-content：flex-start

当设置为align-content：flex-end

当设置为align-content：center

当设置为align-content：space-between

当设置为align-content：space-around

写在子元素上的属性

1.flex-grow：number （默认值为0）
设置或检索弹性盒子的扩展比率

.box {
			border: 1px solid black;
			width: 400px;
			display: flex;
		}
		.one {
			width: 100px;
			background: #f00;
			flex-grow: 1   /* 剩下的100px两个以1:1的比例平分 */
		}
		.two {
			width: 200px;
			background: #f0f;
			flex-grow: 1
		}

2.flex-shrink：number （默认值为1）

.box {
			border: 1px solid black;
			width: 250px;
			display: flex;
		}
		.one {
			width: 100px;
			background: #f00;
			flex-shrink: 2;
		}
		.two {
			width: 200px;
			background: #f0f;
			flex-shrink: 1;
		}

超出空间 = 100 + 200 - 250 = 50
加权总和 = 100 * 2 + 200 * 1= 400
.one被移除的总和：100 * 2 / 400 * 50 = 25
.two被移除的总和：200 * 1 / 400 * 50 = 25
.one的宽度：100 - 25 = 75
.two的宽度：200 - 25 = 175