flex布局是什么

flex是flexible box的缩写,意为“弹性布局”。

基本概念

flex容器:采用flex布局的元素,称为flex容器,简称容器
flex项目:所有子元素自动成为容器成员,成为flex项目,简称项目
容器默认有两根轴:水平的主轴和垂直的交叉轴

容器的属性

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

flex-direction

决定主轴的方向,即项目的排列方向

  • row 默认值 主轴为水平方向,起点在左端
  • row-reverse 主轴为水平方向,起点在右端
  • column: 主轴为垂直方向,起点在上沿
  • column-reverse :主轴为垂直方向,起点在下沿

flex-wrap

默认情况下,项目都排列在一条线(轴线)上,flex-wrap 属性定义一条轴线排不下,换行方式

  • nowrap 默认,不换行
  • wrap 换行,第一行在上方
  • wrap-reverse 换行,第一行在下方

flex-flow

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

justify-content

定义了项目在主轴上的对齐方式

  • flex-start 默认值,左对齐
  • flex-end 右对齐
  • center 居中
  • space-between 两端对齐,项目之间的间隔都相等
  • space-around 每个项目两侧的间隔相等(项目之间的间隔比项目与边框的间隔大一倍)

align-items

定义项目在交叉轴上如何对齐

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

align-content

定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用

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

inline-flex

行内元素

  1. 居中实现 给父级元素设置
  2. text-align:center

项目的属性

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

order

定义项目的排列顺序,数值越小,排列越靠前,默认为0

flex-grow

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大

flex-shrink

定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

flex-basis

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

flex

是flex-grow flex-shrink 和 flex-basis 的简写。默认值为0 1 auto.
该属性有两个快捷键 auto( 1 1 auto) 和none (0 0 auto)

align-self

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

initial元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器,但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为”flex: 0 1 auto“。

auto元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收 flex 容器中额外的自由空间,也会缩短自身来适应 flex 容器。这相当于将属性设置为 “flex: 1 1 auto

none元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器。相当于将属性设置为”flex: 0 0 auto“。

[flex-grow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow), [flex-shrink](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink)[flex-basis](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis)

flex-grow 定义项目的放大比例。默认为0,即如果存在剩余空间,也不放大
flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis 定义了在分配多余空间之前,项目占据的主轴空间

flex 简写 flex-grow flex-shrink flex-basis 默认值为0 1 auto

单值语法:值必须为以下其中之一

  • 一个无单位数(number):它会被当做的值
  • 一个有效的宽度(width): 它会被当做的值
  • 关键字 none auto 或 initial

双值语法:第一个值必须为一个无单位数,并且它会被当做的值。第二个值为以下其一

  • 一个无单位数:的值
  • 一个有效的宽度值:的值

常用属性以及使用方法

image.png

容器的属性

  1. flex-direction 决定主轴的方向
  2. flex-wrap 换行(默认是一条线的)
  3. flex-flow 属性是flex-direction和flex-wrap的简写 默认值为row nowrap 可设置 wrap
  4. justify-content 定义了项目在主轴上的对齐方式
  5. align-items 定义项目在交叉轴上如何对齐
  6. align-content 定义了多根轴线的对齐方式,如果项目只有一根轴线,则不起作用

项目的属性

  1. order 定义项目的排列顺序,数值越小,排列越靠前,默认为0;
  2. .item{
  3. order:<integer>
  4. }
  5. flex-grow 定义项目的放大比例。默认为0,即如果存在剩余空间,也不放大
  6. flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
  7. flex-basis 定义了在分配多余空间之前,项目占据的主轴空间
  8. flex 简写 flex-grow flex-shrink flex-basis 默认值为0 1 auto
  9. align-self(单个) 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

flex: 三值语法

  • 第一个值必须为一个无单位数,并且它会被当作 [<flex-grow>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow) 的值。
  • 第二个值必须为一个无单位数,并且它会被当作 [<flex-shrink>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink) 的值。
  • 第三个值必须为一个有效的宽度值, 并且它会被当作 [<flex-basis>](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis) 的值。

场景:网页端需要元素大小自适应时

  1. flex: 1 1 0% ;

常见实际应用

商品分类的布局 一行三个或者一行四个的排列
九宫格的布局排列

资料链接
https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/

九宫格布局

一行n个,且有间隔的布局

image.png

注意:

  • 当外层容器有高度的时候, align-content 这个属性需要设置,不然会导致每行的内容在整个盒子中不是接着下面排列的。
  • 当外层容器没有高度时,一切正常。

使用margin的情况来 让子元素之间有间隙

  1. .content{
  2. width: 500px;
  3. height: 500px; //高度
  4. border: 1px solid black;
  5. display: flex;
  6. flex-wrap: wrap;
  7. align-content: flex-start;
  8. }
  9. .item{
  10. width: 20%;
  11. height: 100px;
  12. background-color: red;
  13. margin-right: 10px;
  14. margin-bottom: 10px;
  15. }
  16. <div class="content">
  17. <div class="item"></div>
  18. <div class="item"></div>
  19. <div class="item"></div>
  20. <div class="item"></div>
  21. <div class="item"></div>
  22. <div class="item"></div>
  23. <div class="item"></div>
  24. </div>

九宫格布局

实则跟上面的布局是一样的结构。
如果不使用margin来让子元素之间有间隙。

  1. .content{
  2. width: 500px;
  3. border: 1px solid black;
  4. display: flex;
  5. flex-wrap: wrap;
  6. justify-content: space-between;
  7. }
  8. .item{
  9. width: 30%;
  10. height: 100px;
  11. background-color: red;
  12. margin-bottom: 10px;
  13. }
  14. <div class="content">
  15. <div class="item"></div>
  16. <div class="item"></div>
  17. <div class="item"></div>
  18. <div class="item"></div>
  19. <div class="item"></div>
  20. <div class="item"></div>
  21. <div class="item"></div>
  22. <div class="item"></div>
  23. <div class="item"></div>
  24. </div>

jusitify-content 对齐问题

https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/
场景:最后一行的列表的个数不满,则就会出现这种问题

flex 布局 - 图3

模拟space-between 和 间隙

  1. .container {
  2. display: flex;
  3. flex-wrap: wrap;
  4. }
  5. .list {
  6. width: 24%; height: 100px;
  7. background-color: skyblue;
  8. margin-top: 15px;
  9. }
  10. .list:not(:nth-child(4n)) {
  11. margin-right: calc(4% / 3);
  12. }

flex布局设置单个子元素靠右

  1. flex布局中 父元素设置了
  2. display: -webkit-flex;
  3. display: flex;
  4. align-items: center;
  5. 子元素是水平轴对齐的,如果想设置单个子元素靠右
  6. 1.
  7. flex: 1;
  8. text-align: right;
  9. 2.
  10. margin-left: auto;

(常)最后一行元素对齐问题

flex 布局 - 图4

1.添加几个空item
根据布局列数添加空item,比如每行最大n列,那么在最后添加n-2个空item即可

  1. <html>
  2. <style>
  3. .item {
  4. width: 32%;
  5. background-color: #00abff;
  6. height: 60px;
  7. margin-top: 10px;
  8. }
  9. .itemempty {
  10. height: 0px;
  11. width: 32%;
  12. }
  13. .box {
  14. display: flex;
  15. justify-content: space-between;
  16. flex-wrap: wrap;
  17. }
  18. </style>
  19. <body>
  20. <div class="box">
  21. <div class="item"></div>
  22. <div class="item"></div>
  23. <div class="item"></div>
  24. <div class="item"></div>
  25. <div class="item"></div>
  26. <div class="item"></div>
  27. <div class="item"></div>
  28. <div class="item"></div>
  29. <div class="itemempty"></div>
  30. <div class="itemempty"></div>
  31. <div class="itemempty"></div>
  32. </div>
  33. </body>
  34. </html>

2.利于after(适用于每行列数确定的场景)
注意:是给最外层的元素添加 不是里面的子元素

  1. .box:after {
  2. content: "";
  3. flex: auto;
  4. }

还可以使用 margin并且去除最后一行margin-right 实现

flex页面整体布局

场景:上下布局

  1. <div class="container">
  2. <div class="header"></div>
  3. <div class="content">
  4. <div class="left"></div>
  5. <div class="center"></div>
  6. <div class="right"></div>
  7. </div>
  8. </div>
  9. <style>
  10. .container{
  11. display: flex;
  12. flex-direction: column;
  13. }
  14. .header{
  15. height: 100px;
  16. }
  17. .content{
  18. flex:1;
  19. /* 重点 */
  20. height: 0;
  21. }
  22. /* left区域当超出时可以滚动 */
  23. .right{
  24. height: 100%;
  25. overflow: hidden;
  26. overflow-y: scroll;
  27. }
  28. </style>

flex 布局 - 图5

flex:1 代表什么

flex: 1 === flex: 1 1 任意数字+任意长度单位;

https://zhuanlan.zhihu.com/p/136223806

flex 中固定宽度不生效

  1. <view class="intro">
  2. <view class="list">
  3. <view class="grid">1</view>
  4. <view class="grid">2</view>
  5. <view class="grid">3</view>
  6. <view class="grid">4</view>
  7. <view class="grid">5</view>
  8. <view class="grid">6</view>
  9. <view class="grid">7</view>
  10. </view>
  11. </view>
  12. .list {
  13. display: flex;
  14. overflow-x: scroll;
  15. }
  16. .grid {
  17. margin-left: 10rpx;
  18. width: 150rpx;
  19. height: 58rpx;
  20. border: 1rpx solid #e5e5e5;
  21. flex-shrink:1; //add
  22. }

flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值

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


左侧固定,右侧自适应

  1. .container{
  2. display: flex;
  3. /* width: 800px; */
  4. }
  5. .left{
  6. border: 1px solid black;
  7. width: 600px;
  8. flex-shrink: 0
  9. }
  10. .right{
  11. border: 1px solid black;
  12. flex: 1;
  13. }
  14. flex-shrink,默认值是1,修改为0,就不会因为右侧内容太多,被压缩。