弹性盒模型——flex布局

弹性盒模型

概念：内部空间的子元素默认横向排放，当元素超出时，会压缩子集不会换行

1. flexbox=flex container + flex item
   弹性盒=弹性容器+弹性子元素
2. 容器设置display:flex成为弹出容器
3. 弹性容器包含了一个或多个弹性容器

注：

• 弹性容器外以及弹性子元素内是正常渲染的。
• 弹性盒子只定义了弹性子元素如何在弹性容器内是正常渲染的。
• 设置为flex布局后，子元素的float,clear,vertical-align属性失效

div{
    display: flex;
    display: -webkit-flex;/*Safari*/
}

容器属性

注：default表示默认值

1. flex-direction: 主轴排列方向

   • row: default 横向排列，从左边到右边
   • row-reverse: 从右到左
   • column: 竖向排列，从上到下
   • column-reverse:从下到上

2. justify-content: 子元素在主轴上的对齐方式

   • flex-start: 开头
   • flex-end: 结尾
   • center: 居中
     平分空白：
   • space-between: 两侧盒子无留白
   • space-around: 两侧盒子有留白

   

3. align-items: 侧轴的对齐方向

   • flex-start:
   • flex-end:
   • center:
   • baseline: 基线
   • stretch: default
     注:弹性盒子给高度才能看出效果

4. flex-wrap: 换行方式

   • nowrap: default，当不够宽度的时候，压缩子集不换行
   • wrap:换行
   • wrap-reserve: 底部左边开始

5. align-content: 行与行之间的对齐方式

   • strtch: default
   • flex-start:
   • flex-end:
   • center:
   • space-between:
   • space-around:

弹性子元素属性

1. order:定义项目的排列顺序
   数值越小，排列越靠前，默认0
2. flex-flow:定义弹性盒子元素的拓展比率（即放大比例）
   • 默认0，即如果存在剩余空间，也不放大
   • 为1时，等分剩余空间
   • 为2时，其他项目为1，则前者占据的剩余空间比其他项多一倍
3. flex-shrink:定义项目的缩小比例
   • 默认为1，如果空间不足，则如果空间不足，则该项目缩小
   • 若一个项目为0，其余为1则空间不足时，前者不缩小
4. flex-basis:项目占据主轴的空间
   • 默认auto，即项目本来大小
5. flex:
   • 是flex-grow,flex-shrinl，flex-basis的简写
   • 默认flex: 0 1 auto;
   • 快捷键
     • auto(1 1 auto); 放大 缩小 不变
     • none(0 0 auto); 不放大不缩小
       优先使用快捷键，浏览器会推算相关的值
6. align-self:定义弹性元素在侧轴上的对齐方式
   • auto,flex-start,flex-end,center,baseline,stretch