提供Verge3D教程和Web3D开发技术服务

【web】flex布局教程

1.语法篇

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$

(1)容器的属性

  • flex-direction:主轴方向。
  • flex-wrap:是否变形。
  • flex-flow:前两个属性的简写。
  • justify-content:项目在主轴上的分布方式。
  • align-items:项目在交叉轴的对方方式。
  • align-content:多条轴线的对齐方式,align-items属性失效。

(2)项目的属性

  • order:<number>; /*定义项目在主轴上的顺序,值越小越靠前,默认0。 */
  • flex-grow:<number>; /*定义项目的放大比例,默认0。 */
  • flex-shrink:<number>;/*定义项目的缩小比例,默认1。*/
  • flex-basis:<length> | auto; /*定义在分配多余空间之前,项目占据的主轴空间,默认auto */
  • flex:none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]/*三个属性的简写。默认0 1 auto*/
  • align-self:auto | flex-start | flex-end | center | baseline | stretch;/*项目有自己的对齐方式,可覆盖align-items属性*/

在交叉轴方向上只有一行的时候,align-items属性起作用;在交叉轴方向上有多行时,align-content属性起作用。原文:“This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.”

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2.实例篇

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

3.flex box演示站

https://xluos.github.io/demo/flexbox/

flexbox

zjbcool

zjbcool
关闭菜单