flex布局原理
flex介绍
flex 就是弹性布局的意思，用来为盒模型提供最大的灵活性，任何一个容器都可以指定flex布局
flex布局 需要为父元素设置flex布局(display：flex ) ，子元素的float、clear 、 vertical-align(让图片和基线的位置) 属性将失效
布局原理
-
采取 flex布局的元素,称为flex容器 , 简称 "容器" .
-
它的所有子元素自动称为容器成员 , 称为flex项目,简称 "项目"
子容器可以横向排列也可以纵向排列
所以 ： flex布局就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
注：设置flex布局的前提是，要在父元素添加display:flex
flex布局父项常见属性
flex-direction
设置主轴的方向
row 默认行
row-reverse
column
column-reverse
justify-content
设置主轴上子元素的排列方式
以下都是基于主轴的row设置的
flex-start 默认
flex-end
center
space-around
space-between
flex-wrap
设置子元素是否换行
nowrap 默认
wrap
align-items
设置子元素在侧轴上面的排列方式，是在子元素是单行的时候使用的
flex-start
flex-end
center
stretch 拉伸
子元素不要给高度
align-content
设置子元素在多行的时候是如何排列的
和align-items类似
flex-start
flex-end
center
space-around
space-between
stretch 拉伸
不给子元素设置高度，那么默认的就是拉伸
flex-flow 复合写法
flex-flow是把flex-direction和flex-wrap复合起来
flex布局子项常见属性
flex
定义子项目分配剩余空间，用flex来表示占多少份
可以多个平分，那么就是每个都1份，也可以给某一个多一份
align-self
控制子项自己在侧轴上的排列方式
align-self : 它允许单个项目有与其他项目不一样的对齐方式, 可以覆盖 align-items属性
默认值 :auto ,表示继承父元素的align-items属性,若没有父元素,则等同于 stretch 拉伸
在父元素中
在子元素中
order
排列顺序
数值越小 , 排列越靠前,默认是0 ； 注意 和 z-index 不一样 它是数值越大,排列越靠前
