网页笔记—弹性盒子

1. 定义：

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

2.属性：

1.设置父容器为盒子：会使每一个子元素自动变成伸缩项，以适应父元素盒子。

当子元素的宽度和大于父元素的宽度，子元素会自动收缩

2.justify-content：xxxxx

space-around：将多余的空间平均的分页在每一个子元素的两边 margin：0 auto。 造成中间盒子的间距是左右两边盒子间距的两倍

space-between：左右对齐父容器的开始和结束，中间平均分页，产生相同的间距

center：让子元素从父容器的中间位置开始排列

flex-end：让子元素从父容器的结束位置开始排列

flex-start：让子元素从父容器的起始位置开始排列