前端Flex布局笔记整理

前端开发技能描述 前端开发技能树 web前端开发技能测试

网页布局（layout是css的一个重点应用），布局的传统解决方案，基于盒子模型，依赖display属性+position属性+float属性。传统的能满足一些普遍页面的需求，但是对于需要特殊布局非常不方便，比如：垂直居中就不太容易实现。
2009年，W3C（万维网）提出了一种新的方案——flex布局，可以简便、完整、响应式的实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全的使用。
一、flex布局是什么？
flex是flexble box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容易都能指定为flex布局
块元素使用：.box{display:flex;}
行内元素使用：a{display:inline-flex}
webkit内核的浏览器，必须加上-webkit前缀
.box{display:-webkit-flex;display:flex;}
注意：设为flex布局以后，子元素的float。clear和vertical-align属性将失效
一、基本概念
采用flex布局的元素，称为flex容器（flex-container），简称容器，它的所有子元素自动成为容器成员，成为（flex item），简称“项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边康的交叉点）叫做main start，结束位置叫做main end；交叉轴的位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴叫做main size，占据的交叉轴空间叫做cross size
三、容器的属性
以下6个属性设置在容器上。

3.1、flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）
.box{
flex-direction（四个值）:
row （默认值）：主轴为水平方向，起点在左端
row-reverse ：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse ：主轴为垂直方向，起点在下沿
}
3.2、flex-wrap属性
默认情况下，项目都排在一条线上（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap （三个值）：
nowrap（默认不换行）
wrap（换行，第一排在上方）
wrap-reverse（换行，第一排在下方）
}
3.3、flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的间歇方式，默认值为row nowrap；
.box{
flex-flow：<flex-direction> || <flex-wrap>
}
3.4、justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。

.box{
justify-content（5个值）：
flex-start（默认值左对齐）
flex-end（右对齐）
space-between（两端对齐，项目之间的间隔都相等）
space-around（每个项目两侧的间隔相等。所有，项目之间的间隔比项目与边框的间隔大一倍）
}

3.5、align-items属性
align-items属性定义项目在交叉轴上如何对齐。

.box{
align-items（4个值）：
flex-start（交叉轴的起点位置）
flex-end（交叉轴的终点对齐）
center（交叉轴的中点对齐）
baseline（项目的第一行文字的基线对齐）
stretch（默认值，如果项目未设置高度或者设置auto，将占满整个容器的高度）
}

3.6、align-content属性
align-content属性定义了多根多轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box{
align-content（6个值）：
flex-start（与交叉轴的起点对齐）
flex-end（与交叉轴的终点对齐）
center（与交叉轴的中点对齐）
space-between（与交叉轴两端对齐，轴线之间的间隔平均分布）
space-around（每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍。）
stretch（默认值，轴线占满真个交叉轴）
}

四、项目的属性
以下6个属性设置在项目上。

4.1、order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0.

.item{order:<number>}

4.2、flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
注意：如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项目一倍。

.item{flex-grow:<number> 默认为0}

4.3、flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果存在空间不足，该项目将缩小。

.item{flex-shrink:<number>默认为1}

注意：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时， 前者不缩小，负值对该属性无效。
4.4、flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。该浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item{flex-basis:<length> | auto（默认为auto）}
注意：它可以设为width或height属性一样的值（比如350px），则该项目将占据固定空间。
4.4、flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。该浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item{flex-basis:<length> | auto（默认为auto）}
注意：它可以设为width或height属性一样的值（比如350px），则该项目将占据固定空间。
4.5、flex属性
flex属性时flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item{
flex:none |[<‘flex-grow’><‘flex-shrink’> ?|| <‘flex-basis’> ]
}
该属性有两个快捷值：auto（1 1 auto）和none（0 0 auto）。
建议优先只用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

4.6、align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖，
align-items属性。默认值为auto，表示集成父元素的align-items属性，如果没有父元素，则等同于stretch。

.item{align-self: auto|flex-start|flex-end|center|baseline|stretch}

先大概的了解每个属性的意义，然后再根据自己的理解参考一些网站做对应的布局练习。

前端开发技能 web前端开发涉及的专业技能 web前端开发技能介绍