flex布局是什么？

不想写代码1
244 阅读4分钟

1.flex布局是什么

flex布局意为弹性布局；
任何一个容器都可以指定为flex布局

.box{
   display:flex; 
}

行内元素也可以使用flex布局

.box{
   display:inline-flex; 
}
  • 要注意的是：设置flex布局后float,clear和vertical-align属性将失效

2.flex容器(container)上的属性

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

2.1 flex-direction属性

flex-direction决定主轴的流动方向
flex-directon有四个取值:

  • flex-directon：row(默认值):从左往右排(主轴为水平方向)
  • flex-directon：row-reverse:从右往左排(主轴为水平方向)
  • flex-directon：column：从上往下排(主轴为垂直方向)
  • flex-directon：column-reverse:从下往上排(主轴为垂直方向)

2.2 flex-wrap属性

flex-wrap属性定义了如何换行

  • flex-wrap: nowrap;默认值，不换行
  • flex-wrap:wrap; 换行
  • flex-wrap:wrap-reverse;换行，第一行在下方

image.png

2.3 flex-flow

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

2.4 justify-content

justify-content定义了主轴的对齐方式
justify-content的取值有：

  • justify-content: flex-start;尽量往前靠(默认值)
  • justify-content: flex-end;尽量往后靠
  • justify-content: center;居中
  • justify-content: space-between;两端对齐，项目之间的间隔相等
  • justify-content: space-around;每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  • justify-content: space-evenly; 每个flex子项两侧空白间距完全相等。

image.png

image.png

2.5 align-items

align-items属性定义了交叉轴(次轴)的对齐方式
align-items的取值有：

  • align-items: stretch;如果项目未设置高度或设为auto，将占满整个容器的高度(都往两边顶)(默认值)
  • align-items: flex-start;次轴的起点对齐(默认次轴为纵轴就往上顶)
  • align-items: flex-end;次轴的终点对齐(默认次轴为纵轴就往下顶)
  • align-items: center;居中
  • align-items: baseline;项目的第一行文字的基线对齐(具体见下图)

image.png

2.6 align-content

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

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

image.png

3.flex项目上(item)的属性

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self

3.1 order

order可以改变显示顺序，从小到大排列,取值就是数字(包括负数)

  • .item:first-child{order:数字；}
  • .item:nth-child(2){order:1}
  • .item:nth-child(n){order:-1}
  • .item:last-child{order:2}

image.png

3.2 flex-grow

flex-grow控制item分配多余的空间，数字越大，分配的空间越多

  • flex-grow:0;不分
  • flex-grow:1;分一份
  • flex-grow:2;分两份

image.png 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.3 flex-shrink

flex-shrink用来控制在空间不够的时候让谁缩小
felx-shrink 的取值默认是1(大家一起瘦);

  • flex-shrink:0;(我不想变瘦)
    数字越大瘦的越快

image.png 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

3.4 flex-basis

flex-basis它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

3.5 flex

flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可设置也可不设置。

3.6 align-self

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

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

image.png 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

avatar
文章
阅读
粉丝