w4n9hu1/IFE

Flexbox 布局

Opened this issue · 2 comments

w4n9hu1 commented

Flexbox模型及术语

  flex布局模型不同于块和内联模型布局，块和内联模型的布局计算依赖于块和内联的流方向，而flex布局依赖于flex directions.简单的说：Flexbox是布局模块，而不是一个简单的属性，它包含父元素(flex container)和子元素(flex items)的属性。

属性

1.display（flex container）

display: other values | flex | inline-flex;

2.lex-direction（flex container）

flex-direction: row | row-reverse | column | column-reverse
  • row(默认值)：在“ltr”排版方式下从左向右排列；在“rtl”排版方式下从右向左排列。
  • row-reverse：与row排列方向相反，在“ltr”排版方式下从右向左排列；在“rtl”排版方式下从左向右排列.
  • column：类似 于row，不过是从上到下排列.
  • column-reverse：类似于row-reverse，不过是从下到上排列。

3.order（flex items） 默认情况下，伸缩项目是按照文档流出现先后顺序排列。然而，“order”属性可以控制伸缩项目在他们的伸缩容器出现的顺序。

order: <integer>

4.flex-wrap（flex container） 这个主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向。

flex-wrap: nowrap | wrap | wrap-reverse
  • nowrap(默认值)：伸缩容器单行显示，“ltr”排版下，伸缩项目从左到右排列；“rtl”排版上伸缩项目从右向左排列。
  • wrap：伸缩容器多行显示，“ltr”排版下，伸缩项目从左到右排列；“rtl”排版上伸缩项目从右向左排列。
  • wrap-reverse：伸缩容器多行显示，“ltr”排版下，伸缩项目从右向左排列；“rtl”排版下，伸缩项目从左到右排列。（和wrap相反）

5.flex-flow（flex container） 这个是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。其默认值为“row nowrap”。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

6.justify-content（flex container） 这个是用来定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

justify-content: flex-start | flex-end | center | space-between | space-around;
  • flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
  • flex-end：伸缩项目向一行的结束位置靠齐。
  • center：伸缩项目向一行的中间位置靠齐。
  • space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。
  • space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

7.align-content（flex container） 这个属性主要用来调准伸缩行在伸缩容器里的对齐方式。类似于伸缩项目在主轴上使用“justify-content”一样。

 align-content: flex-start | flex-end | center | space-between | space-around | stretch;

8.align-items（flex container）

align-items: flex-start | flex-end | center | baseline | stretch
  • flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
  • flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
  • center：伸缩项目的外边距盒在该行的侧轴上居中放置。
  • baseline：伸缩项目根据他们的基线对齐。
  • stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

9.align-self（flex items） 用来在单独的伸缩项目上覆写默认的对齐方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

10.flex-grow（flex items） 根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

flex-grow: <number>; /* default 0 */

如果所有伸缩项目的“flex-grow”设置了“1”，那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了“flex-grow”值为“2”，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。
11.flex-shrink（flex items） 根据需要用来定义伸缩项目收缩的能力。[注意：负值同样生效。]

flex-shrink: <number>; /* default 1 */

12.flex-basis（flex items） 这个用来设置伸缩基准值，剩余的空间按比率进行伸缩。

flex-basis: <length> | auto; /* default auto */

13.flex（flex items） 这是“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写。其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。默认值为“0 1 auto”。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Example

在Flex容器中，当项目边距设置为“auto”时，设置自动的垂直边距将使该项目完全集中两个轴。

.parent {
  display: flex;
  height: 300px; /* Or whatever */
  background-color: black;
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
  background-color: white;
}

Flexbox详解