弹性盒子(转载自)
为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局
有两个主轴
main axis
cross axis
容器属性
- flex-direction :决定主轴的方向即item的排列方向 默认为水平 值(
row | row-reverse | column | column-reverse
) - flex-wrap:排不下换行的效果 值(
nowrap | wrap | wrap-reverse
) - flex-flow:上面两个属性的缩写默认为(row nowrap)
- justify-content:项目在主轴上面的对齐方式 值(
start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline
) - align-item:交叉轴上的对齐方式 值(
flex-start | flex-end | center | baseline | stretch
)
align-item:baseline; - 效果如下
stretch:如果项目未设置高度或设为auto,将占满整个容器的高度。
- align-content:定义多根轴线的对齐方式 值(
flex-start | flex-end | center | space-between | space-around | stretch
)
align-content:space-around;效果如下
item的属性
- order:排列顺序越大越靠后
- flex-grow:放大比例 根据比例分配剩余下来的位置
- flex-shrink:缩小比例
- flex-basis:分配多于位置时候之前占据的位置大小
- flex:flex属性是flex-grow,flex-shrink和flex-basis的简写
- align-self:
允许单个项目与其他项目有不一样的对齐方式