Flex布局教程:语法篇(参考文档:阮一峰)(慢慢整理)

参考文档:

• www.ruanyifeng.com/blog/2015/0…
• css-tricks.com/snippets/cs…
• scotch.io/tutorials/a…

• 1.Menu and content dynamic(菜单和内容都是动态的)

• 2.Menu fixed,Content dynamic(菜单是固定的,内容是动态的)

• 3.Menu and content dynamic(菜单和内容是动态的)

• 4.columns,all dynamic(三列都是动态的)

• 5.4 columns,all dynamic(四列,所有的都动态的)

• 6.Menu floating

• 7.Menu fixed,content&header dynamic(菜单固定,内容和头部是动态的)

• 8.3 columns fixed centered(3列固定居中)

• 9.dynamic with header and footer(动态与页眉和页脚)

实例(写项目实际上能用到的):

• 1.justify-content:属性定义了项目在主轴上的对齐方式.
• justify-content:flex-end(右对齐)
  上图上图

转载于:https://juejin.im/post/5c8e4240f265da67e83978c6