WEB-02-flex容器

2017-07-11  本文已影响0人  就爱吃肉_165d

容器:

1、flex-wrap:wrap | nowrap | wrap-reverse

       //是否换行flex-wrap:

2、flex-direction:row|row-reverse|column|column-reverse

       //决定主轴的方向flex-direction

3、flex-flow:(上两个的缩写 值与值之间用空格分隔)

4、align-items:flex-start | center | flex-end | space-between | space-around | stretch

       //沿交叉轴对齐

      1.flex-start:沿交叉轴上方对齐

      2.center:沿交叉轴中心对齐

      3.-flex-end:沿交叉轴下方对齐

      4.baseline:沿文字基准线对齐

      5.stretch:默认值     填满整个交叉轴空间

5、align-content:flex-start | flex-end | center | space-around | space-between | stretch

      // (决定多根轴线沿交叉轴的对齐方向          **!注!只有换行            产生多根轴线时有效**

6、justify-content:flex-start | flex-end | center | space-around | space-between

       //决定项目在主轴上的对齐方式
上一篇下一篇

猜你喜欢

热点阅读