flex布局学习
2017-09-18 本文已影响73人
前端小兵
flex布局基础知识
- main axis(主轴): Flex容器的主轴主要用来配置Flex项目。它不一定是水平，这主要取决于flex-direction属性
- main-start|main-end(主轴起点|主轴终点): Flex项目的配置从容器的主轴起点开始,往主轴终点结束
- main size(主轴方向长度):Flex项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
- cross axis(侧轴):与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
- cross-start | cross-end(侧轴起点|侧轴终点):伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
- cross size(侧轴方向长度):Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是width或height属性，由哪一个对着侧轴方向决定。
Flex容器属性(主容器)
-
display: 定义一个Flex容器，根据其取的值来决定是内联还是块。Flex容器会为其内容建立新的伸缩格式化上下文。(定义成flex容器不等于定义成块级容器) -
flex-direction: 定义主轴方向，Flex项目在Flex容器中放置的方向-
row(默认值): Flex项目从左向右排列 -
row-reverse: 与row相反，Flex项目从右向左排列 -
column: Flex项目从上向下排列 -
columne-reverse: 与column相反，Flex项目从下向上排列
-
-
flex-wrap: 定义Flex项目是否多行显示-
nowrap(默认值): 单行显示，从左向右排列 -
wrap: 多行显示，从左向右排列 -
wrap-reverse: 多行显示，从右向左排列
-
-
flex-flow:flex-direction和flex-wrap属性的缩写 默认值是row nowrap
-
justify-content: 定义主轴方向的对齐方式-
flex-start(默认值): Flex项目主轴起点对齐，伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐，同时所有后续的伸缩项目与其前一个项目对齐 -
flex-end: Flex项目主轴终点对齐，伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐，同时所有前面的伸缩项目与其后一个项目对齐。 -
center: Flex项目主轴居中对齐，伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐，同时第一个项目与该行在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离（如果剩余空间是负数，则保持两端溢出的长度相等）。著作权归作者所有。 -
space-between: Flex项目主轴两端对齐，伸缩项目会平均地分布在行里。如果剩余空间是负数，或该行只有一个伸缩项目，则此值等效于flex-start。在其它情况下，第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐，同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐，而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布。 -
space-around: Flex项目主轴平均分布对齐，伸缩项目会平均地分布在行里，两端保留一半的空间。如果剩余空间是负数，或该行只有一个伸缩项目，则该值等效于center。在其它情况下，伸缩项目在确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半下平均分布。
-
-
align-items: 定义侧轴方向的对其方式-
flex-start: flex项目侧轴起点对齐，伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边 -
flex-end: flex项目侧轴终点对齐,伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。 -
center: flex项目侧轴居中对齐，伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。 -
baseline: flex项目侧轴基线对齐，如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。 -
stretch: 如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。
-
-
align-content: 定义Flex项目多行的对齐方式，本属性在只有一行的伸缩容器上没有效果-
flex-start: 各行向伸缩容器的起点位置堆叠。伸缩容器中第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点的边，之后的每一行都紧靠住前面一行。 -
flex-end:各行向伸缩容器的结束位置堆叠。伸缩容器中最后一行在侧轴终点的边会紧靠住该伸缩容器在侧轴终点的边，之前的每一行都紧靠住后面一行。 -
center:各行向伸缩容器的中间位置堆叠。各行两两紧靠住同时在伸缩容器中居中对齐，保持伸缩容器在侧轴起点边的内容边和第一行之间的距离与该容器在侧轴终点边的内容边与第最后一行之间的距离相等。（如果剩下的空间是负数，则行的堆叠会向两个方向溢出的相等距离。） -
space-between:各行在伸缩容器中平均分布。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于flex-start。在其它情况下，第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点边的内容边，最后一行在侧轴终点的边会紧靠住伸缩容器在侧轴终点的内容边，剩余的行在保持两两之间的空间相等的状况下排列。 -
space-around:各行在伸缩容器中平均分布，在两边各有一半的空间。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于center。在其它情况下，各行会在保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半的状况下排列。 -
stretch(默认值):各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于flex-start。在其它情况下，剩余空间被所有行平分，扩大各行的侧轴尺寸。
-
Flex项目属性
-
order:默认值是0，Flex项目是按文档源的流顺序排列,根据order重新排序伸缩项目。有最小（负值最大）order的伸缩项目排在第一个。若有多个项目有相同的order值，这些项目照文件顺序排。这个步骤影响了伸缩项目生盒树成的盒子的顺序，也影响了后面的演算法如何处理各项目。著作权归作者所有。
.item {
order:<number>
}
-
flex-grow: 定义一个Flex项目的扩大比例。它接受一个没有单位的值作为一个比例。它可以使用Flex项目完全占用Flex容器可用的空间。如果所有Flex项目的flex-grow设置为1时，表示Flex容器中的Flex项目具有相等的尺寸。如果你给其中一个Flex项目设置flex-grow的值为2，那么这个Flex项目的尺寸将是其他Flex项目两倍（其他Flex项目的flex-grow值为1）。flex-grow取负值将失效。 -
flec-shrink: 可以定义Flex项目的缩小比例,flex-shrink取负值将失效。 -
flex-basis: 定义主轴方向的长度(width|height)。定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。main-size值使它具有匹配的宽度或高度，不过都需要取决于flex-direction的值。如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。 -
flex: 是flex-grow，flex-shrink和flex-basis三个属性的缩写。第二个和第三个参数(flex-shrink和flex-basis)是可选值。其默认值是0 1 auto。 -
align-self: 用来在单独的伸缩项目上覆写默认的对齐方式。（对于匿名伸缩项目，align-self的值永远与其关联的伸缩容器的align-items的值相同)。-
flex-start: 伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。 -
flex-end: 伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。 -
center: 伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。 -
baseline:如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。 -
stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。
-
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
