flex是■啥及flex合理布局英语的语法实例教程详细

日期:2021-03-24 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

Flex合理布局

Flex 是 Flexible Box 的简称,意思是"延展性合理布局",用于为盒状实体模型出示较大的灵便性,随意的实际操作器皿中原素(新项目)的排序方法

一切一个器皿都可以以特定为 Flex 合理布局。

.box{ 
      display: flex;
 }

内行人原素还可以应用 Flex 合理布局。

 .box{  
      display: inline-flex; 
  }

Webkit 核心的访问器,务必再加-webkit作为前缀。

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

留意,设成 Flex 合理布局之后,子原素的float、clear和vertical-align特性将无效。

定义

选用 Flex 合理布局的原素,称之为 Flex 器皿(flex container),通称"器皿"。它的全部子原素全自动变成器皿组员,称之为 Flex 新项目(flex item),通称"新项目"。

器皿默认设置存有二根轴:水准的主轴(main axis)和竖直的交叉式轴(cross axis)。主轴的刚开始部位(与外框的交叉式点)称为main start,完毕部位称为main end;交叉式轴的刚开始部位称为cross start,完毕部位称为cross end。

新项目默认设置沿主轴排序。单独新项目占有的主轴室内空间称为main size,占有的交叉式轴室内空间称为cross size。

器皿的特性

器皿的6个特性

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

1、flex-direction特性

flex-direction特性决策主轴的方位(即新项目的排序方位)。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

值将会为4个

  • row(默认设置值):主轴为水准方位,起始点在左方。
  • row-reverse:主轴为水准方位,起始点在右端。
  • column:主轴为竖直方位,起始点在上沿。
  • column-reverse:主轴为竖直方位,起始点在下沿。

2、flex-wrap特性

默认设置状况下,新项目都排到一根线(别称"轴线")上。flex-wrap特性界定,假如一条轴线排不下,怎样换行。

 

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它将会取三个值。

(1)nowrap(默认设置):不换行。

(2)wrap:换行,第一行在上边。

(3)wrap-reverse:换行,第一行在正下方。

3、flex-flow特性

flex-flow特性是flex-direction特性和flex-wrap特性的缩写方式,默认设置数值row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4、justify-content特性

justify-content特性界定了新项目在主轴上的两端对齐方法。

.box {
    justify-content: flex-start | flex-end | center |
    space-between | space-around;
}

它将会取五个值,实际两端对齐方法与轴的方位相关。下边假定主轴为从左往右。

  • flex-start(默认设置值):左两端对齐
  • flex-end:右两端对齐
  • center: 垂直居中
  • space-between:两边两端对齐,新项目中间的间距都相同。
  • space-around:每一个新项目两边的间距相同。因此,新项目中间的间距比新项目与外框的间距大一倍。

5、align-items特性

align-items特性界定新项目在交叉式轴上怎样两端对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它将会取五个值。实际的两端对齐方法与交叉式轴的方位相关,下边假定交叉式轴从上到下。

  • flex-start:交叉式轴的起始点两端对齐。 flex-end:交叉式轴的终点站两端对齐。 center:交叉式轴的中点两端对齐。 baseline:
  • 新项目的第一写作字的基准线两端对齐。 stretch(默认设置值):假如新项目未设定高宽比或设成auto,将占满全部器皿的高宽比。

6、align-content特性

align-content特性界定了多根轴线的两端对齐方法。假如新项目仅有一根轴线,该特性不了功效。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该特性将会取6个值。

  • flex-start:与交叉式轴的起始点两端对齐。
  • flex-end:与交叉式轴的终点站两端对齐。
  • center:与交叉式轴的中点两端对齐。
  • space-between:与交叉式轴两边两端对齐,轴线中间的间距均值遍布。
  • space-around:每根轴线两边的间距都相同。因此,轴线中间的间距比轴线与外框的间距大一倍。
  • stretch(默认设置值):轴线占满全部交叉式轴。

参照文本文档 :http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

小结

到此这篇有关flex是啥及flex合理布局英语的语法实例教程详细说明的文章内容就详细介绍到这了,大量有关flex合理布局英语的语法內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!