flex布局

在flex之前用

float + clear

position relative + absolute

display inline-block

负margin

flex (flexible:弹性,灵活)

1.与方向无关
2.空间自动分配,自动对齐
3.简单的线性布局

flex container 的属性

flex-direction 方向

flex-direction: column-reverse;| column|row|row-reverse;

flex-wrap 换行

 wrap|nowrap

flex-flow 上面两个的简写

justify-content 主轴方向对齐方式

space-between|space-around|flex-start|flex-end|center

align-items 侧轴对齐方式

align-content 多行/列内容对齐方式(用得较少)

http://js.jirengu.com/jiluk/4/edit

flex item 的属性

flex-grow 增长比例(空间过多时)

flex-shrink 收缩比例(空间不够是)

flex-basis 默认大小(一般不用)

flex 上面三个的缩写

order 顺序(代表双飞翼)

align-self 自身的对齐方式

http://js.jirengu.com/fogol/2/edit

http://js.jirengu.com/fogol/3/edit


1.手机页面布局

http://js.jirengu.com/kezan/2/edit

2.产品列表

http://js.jirengu.com/kosos/2/edit

3.PC布局

http://js.jirengu.com/hahed

4.完美居中

http://js.jirengu.com/yapur

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

推荐阅读更多精彩内容

  • 一、基本概念 理解基本概念Flex 布局(弹性布局),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应...
    微风玉米阅读 674评论 0 2
  • Flex之前我们用什么布局主要使用1、normal flow (正常流,也叫文档流)2、float + clear...
    李奕锦liyijin阅读 810评论 1 11
  • 写在前面 之前一直对于布局有一种迷茫,不知道该如何学习,以及学习到什么程度,在论坛上进行了提问,老师给我做了解答。...
    KoalaT阅读 314评论 0 2
  • 作者:阮一峰文章源自:http://www.ruanyifeng.com/blog/2015/07/flex-gr...
    IT程序狮阅读 1,050评论 0 3
  • 建议大家看完阮一峰老师的Flex 布局教程:语法篇再看这篇文章;另:本文中的思维导图使用新建标签页的方式打开才能看...
    该帐号已被查封_才怪阅读 6,016评论 2 51