css弹性盒子flex box

flex box

简介

弹性盒子是一种当页面需要适应多个不同屏幕大小以及设备类型的时候所做的布局方式，他的目的是为了更好的让容器中的子元素进行排列、布局。经常被用来做响应式布局。
弹性盒子是由弹性容器和弹性子元素组成的，通过对弹性容器设置display值为flex或inline-flex将其定义为弹性容器
弹性盒子只定义了弹性容器中子元素的布局方式，不会对弹性容器外的渲染造成影响。
弹性盒子针对父元素有六大属性：

• direction 子元素的排列方向
• flex-direction 子元素在父容器中的位置
• justify-content 子元素内容在水平方向的对齐方式
• align-items 子元素内容在垂直方向的对齐方式
• flex-wrap 子元素是否换行
• align-content 子元素的堆叠方式只针对多行元素

给父元素设置为display：flex 可以让块元素在一行从左到右排列

direction可以设置子元素的排列方向 默认值为ltr 从左到右，从右到左为rtl：
子元素的内容也会在右边

flex-direction设置子元素在父容器中的位置
row： 横向从左到右排列（左对齐），默认的排列方式。
row-reverse： 反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column： 纵向排列。
column-reverse： 反转纵向排列，从后往前排，最后一项排在最上面。
在浏览器中的效果是：

与direction：rtl不同的是它的子元素内容的位置没有变

column：纵向排列

column-reverse 反向纵向排列

justify-content 子元素内容在水平方向的对齐方式
flex-start; 横轴对齐 内容项目左对齐
flex-end;内容项目右对齐
center; 内容项目居中对齐
space-between;内容项目平均分布
space-around; 内容项目平均分布 两边留有一半空间



justify-content: space-between; 可以用来做网页中的头部布局

align-items:strech; 纵向对齐 默认拉伸以适应容器
flex-start; 元素位于容器开头
flex-end; 元素位于容器结尾
Center； 元素位于容器中心

strech 在没有高度时默认拉伸以适应容器

flex-wrap: wrap ; 子元素在必要时候换行
nowrap; 默认，不换行
wrap-reverse; 反向换行
当子元素宽度大于父容器时 设置是否换行

只适应于多行子元素
align-content:flex-start; 向弹性盒容器的起始位置堆叠
flex-end; 各行向弹性盒容器的结束位置堆叠。
Center; 各行向弹性盒容器的中间位置堆叠。
space-between; 各行在弹性盒容器中平均分布。
space-around; 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半

对于子元素的六大属性：
Order:number; 弹性盒子子元素排列顺序 值越小就在前面
align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
flex:1; 子元素在空白空间的占比
flex-grow: 1； 子元素扩展 默认值是0
flex-shrink:1; 子元素收缩 默认是1收缩，0不收缩
flex-basis: 子元素长度