css弹性盒子二

弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间

怎么是弹性盒子
长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 float 和 position。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。

以下简单的布局需求是难以或不可能用这样的工具方便且灵活的实现的：

在父内容里面垂直居中一个块内容。
使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
这些弹性盒子都可以实现。。。我草

指定元素的布局为弹性盒子
首先，我们需要给父元素设置display：flex

div {
   display:flex
}

<style>
.parent {
	width:500px;
	height:200px;
	background-color:coral;
	display:flex; /*弹性盒子*/
}
.parent div {
	width:100px;
	height:100px;
	background-color:blueviolet;
}
</style>
 
<div class="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

 

flex 模型说明

当元素表现为 flex 框时，它们沿着两个轴来布局，也就是 main axis 和 cross axis：

 主轴（main axis）是水平 flex 元素放置的方向延伸的轴。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）
在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）

 flex-fl