Flex 基础语法(一)

2018-06-24 01:04:52来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

任何一个容器都可以指定为Flex布局。


.box{
  display: flex;
}

行内元素也可以使用Flex布局。


.box{
  display: inline-flex;
}

Webkit内核的浏览器,必须加上-webkit前缀。


.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,设为Flex布局以后,子元素的floatclearvertical-align属性将失效。

采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于网站建设之清除浏览器默认样式

下一篇:frameset标签设计页面