WEB-02-flex容器

容器:

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

       //决定项目在主轴上的对齐方式
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,111评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,881评论 0 6
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 5,466评论 0 1
  • 在以前页面布局多依赖于table,但table标签太多,于是有了absolute布局,float布局等,但它们小问...
    张歆琳阅读 9,686评论 3 55
  • 无家可归,妻离业败。追!追!追!他一刻不停的追逐着,追公交,追窃贼,追时间,追幸福…… 他想在妻子温柔细语中醒来,...
    岑子辛阅读 955评论 0 0