web前端学习笔记--flex弹性布局

web前端学习笔记–flex弹性布局

flex布局

• Flex布局，也称弹性盒子布局，它包括了一套完整的属性。其中有的属性设置在容器（container，也可以称为父元素）上，有的则设置在容器的项目（item,也叫做子元素）上。

• 那么，我们为什么要学习flex布局呢？
  因为它非常的灵活，几行代码，几个属性就可以实现页面的布局。以前我们在学习页面布局时，主要使用float,display以及position，然而随着移动互联网的发展，对于网页布局来说，要求越来越高，这些传统的布局方式对于实现特殊布局非常不方便，比如说垂直居中。

• 2009年，W3C提出了一种新的方案–flex布局，可以简便、完整、响应式的实现各种页面布局。

作用在container上的属性：

display: 这定义了一个flex容器；内联或块，具体取决于给定的值。它为其所有直接子级启用flex上下文。

.container {
  display: flex; /* or inline-flex */
}

flex-direction: 用来控制子项整体布局方向(决定主轴的方向)。

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

• row:默认值，显示为行，方向为当前文档水平流方向，默认情况下从左往右。
  

• row-reverse:显示为行，但方向和row值相反。

• column:显示为列。
  

• column-reverse：显示位列，方向和column属性值相反。
  

flex-wrap:用来控制子项整体单行显示还是换行显示。

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

• nowrap:默认值，表示单行显示，不换行（会根据内容大小适配）。
  
  

• wrap:换行显示。
  

• wrap-reverse:换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。
  

flex-flow:该属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。

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

eg.

  flex-flow:column wrap;

效果：

justify-content: 该属性决定了主轴方向上子项的对齐和分布方式。

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

• flex-start:默认值，表现为起始位置对齐。
  
• flex-end:表现为结束位置对齐。
  
• center:表现为居中对齐。
  
• space-between：表现为两端对齐，between是中间的意思，表示多余的空白间距只在元素中间区域分配。
  
• space-around：around是环绕的意思，表示每个item两侧都环绕互不相关的等宽的空白间距，最终视觉上显示边缘两侧的空白只有中间空白宽度的一半。
  
• space-evenly：evenly是均匀的意思，也就是视觉上每个item两侧空白间距完全相等。
  

align-items：该属性指flex子项们相对于flex容器在侧轴方向上的对齐方式，这定义了当前行上如何沿十字轴布局flex项的默认行为。将其视为横轴（垂直于主轴）的对齐内容版本。

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

• strecch：默认值，flex子项拉伸（拉伸长度等于父容器大小）。
  
• flex-start：表现为容器顶部对齐。
  
• flex-end：表现为容器底部对齐。
  
• center：表现为垂直居中对齐。
  
• baseline：item是对齐的，例如它们的基线对齐。
  
  为说明效果，这里引用css-stricks的一张图：
  

align-content：该属性可以看做是和justify-content相似且对立的属性；align-items指每一个item元素的排列，而align-content表示多行，行与行的对齐方式。
该属性取值和justify-content相同：

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

效果：

作用在item上的属性
order：通过设置order改变某一个flex子项的排序位置，所有flex子项的默认order属性值为0。

.item {
  order: <integer>; /* default is 0 */
}

eg.

.item4 {
  order: -1;
}

效果：

flex-grow：属性中的grow是扩展的意思，扩展的就是flex子项所占的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙，默认值为0。
（这定义了flex项在必要时的增长能力。它接受一个作为比例的无单位值。它规定了项目应该占用flex容器中的可用空间量，如果所有项的flex grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余的空间将占用其他孩子两倍的空间。）

.item {
  flex-grow: <number>; /* default 0 */
}

eg.

.item2{
  flex-grow: 2;
}

效果：

flex-shrink：该属性主要处理当flex容器空间不足时，单个元素的收缩比例，默认值为1。

.item {
  flex-shrink: <number>; /* default 1 */
}

eg.

.item {
  flex-shrink: 2; 
}

flex-basis：定义了元素在分配剩余空间之前元素的默认大小，它可以是长度（例如20%，5rem等）或关键字。

.item {
  flex-basis: <length> | auto; /* default auto */
}

eg.

.item {
  flex-basis: 100px;
}

flex：该属性是flex-grow,flex-shrink儿还flex-basis的结合。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

eg.

.item {
  flex:0 1 auto;
}

align-self：该属性指控制单独某个item的垂直对齐方式（取值于align-items相同）。

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

eg.

.item2{
  align-self: center;
}

效果：

参考网站链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/