flex布局

基本概念

意为”弹性布局”。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

.box{
  display: flex;
}

//行内元素也可以使用Flex布局。
.box{
  display: inline-flex;
}

//Webkit内核的浏览器，必须加上-webkit前缀。
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

容器的属性

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

flex-direction主轴的方向（即项目的排列方向）

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

row （默认值）:从左到右横向
row-reverse：反序横向
同理列向column 、column-reverse

flex-wrap换行

实现如果一条轴线排不下，如何换行

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

nowrap（默认）：不换行（会导致宽度压缩）
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

flex-flow流形式

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow:  || ;
}

justify-content主轴上的对齐

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

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧margin相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items交叉轴上的对齐

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

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。！！
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content多根轴线的对齐方式，如只有一根轴线，该属性不起作用

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

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

项目的属性

以上是用于容器，此处则是具体到用于项目的。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order项目的排列顺序

数值越小，排列越靠前，默认为0。

.item {
  order: 数字;
}

flex-grow存在剩余空间之下项目的放大比例

默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: 大于等于0的数字;
}

flex-shrink存在空间不足之下项目的缩小比例

默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: 大于等于0的数字;
}

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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)。

align-self允许单个项目有与其他项目不一样的对齐方式

可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

#快捷链接
全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~