Flexbox
2017-10-30 本文已影响0人
ryyou
一、背景
1、什么是Flexbox？
Flex为flexible box的简写，意思是弹性布局，为了给盒模型提供更大的灵活性，提供更有效的方式来实现页面布局（适应各种显示设备和屏幕大小），可以用来填充多余的空间，以及缩小元素防止溢出。
flexbox布局是最合适的一个应用程序的组件，以及小规模的布局。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
2、Flex Basic
Flex.png
使用Flex的元素被称为Flex Container，这个元素的直接子元素称为Flex Items
main-cross.png
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
3、作用在container上的属性
- flex-direction：元素排序
属性值：row/row-reverse/column/column-reverse
- flex-wrap：折行
属性值：nowrap/wrap/wrap-reverse
- flex-flow : flex-direction和flex-wrap的组合
- justify-content ：水平布局（和主轴平行）
属性值：flex-start/flex-end/center/space-between/space-around/space-evenly
- align-items：垂直布局（和交叉轴平行），只作用于一行内容
属性值：flex-start/flex-end/center/stretch/baseline
- align-content：垂直布局（和交叉轴平行），作用于多行内容
属性值：flex-start/flex-end/center/stretch/space-between/space-around
4、作用在items上的属性
- order：排序，default：0
属性值：<Number> //可以为负
- flex-grow：将一行剩余的宽度按照属性值比例进行分配
属性值：<Number>
- flex-shrink：当每一个item.width加起来大于container.width时，按照属性之分配到没一个对应元素上并减去对应的像素值
属性值：<Number>
- flex-basis：width的代替品（当和width同时出现时，优先级比width高）
属性值：<Number>px
- flex：flex-grow、flex-shrink和flex-basis的结合，default：0 1 auto
其中flex-shrink和flex-basis的值可省略
eg：flex：1
- align-self ：每一个元素的位置
属性值：flex-start/flex-end/center/stretch/baseline
