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. 居中实现  给父级元素设置
  3.  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 决定主轴的方向
  3. flex-wrap 换行（默认是一条线的）
  5. flex-flow 属性是flex-direction和flex-wrap的简写 默认值为row nowrap  可设置 wrap
  7. justify-content 定义了项目在主轴上的对齐方式
  9. align-items 定义项目在交叉轴上如何对齐
  11. align-content 定义了多根轴线的对齐方式，如果项目只有一根轴线，则不起作用

项目的属性

  2. order 定义项目的排列顺序，数值越小，排列越靠前，默认为0；
  3. .item{
  4.     order:<integer>
  5. }
  7. flex-grow 定义项目的放大比例。默认为0，即如果存在剩余空间，也不放大
  9. flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
  11. flex-basis 定义了在分配多余空间之前，项目占据的主轴空间
  13. flex  简写 flex-grow flex-shrink flex-basis 默认值为0 1 auto
  15. 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. }
  17. <div class="content">
  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 class="item"></div>
  25. </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. }
  15. <div class="content">
  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 class="item"></div>
  25. </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布局中  父元素设置了 
  3. display: -webkit-flex;
  4. display: flex;
  5. align-items: center;
  7. 子元素是水平轴对齐的，如果想设置单个子元素靠右 
  9. 1.
  10. flex: 1;
  11. text-align: right;
  13. 2.
  14. 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.   }
  10.   .itemempty {
  11.     height: 0px;
  12.     width: 32%;
  13.   }
  15.   .box {
  16.     display: flex;
  17.     justify-content: space-between;
  18.     flex-wrap: wrap;
  19.   }
  20. </style>
  22. <body>
  23.   <div class="box">
  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="item"></div>
  30.     <div class="item"></div>
  31.     <div class="item"></div>
  32.     <div class="itemempty"></div>
  33.     <div class="itemempty"></div>
  34.     <div class="itemempty"></div>
  35.   </div>
  36. </body>
  38. </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>
  10. <style>
  11.     .container{
  12.         display: flex;
  13.         flex-direction: column;
  14.     }
  15.     .header{
  16.         height: 100px;
  17.     }
  18.     .content{
  19.         flex:1;
  20.         /* 重点 */
  21.         height: 0;  
  22.     }
  23.     /* left区域当超出时可以滚动 */
  24.     .right{
  25.         height: 100%;
  26.         overflow: hidden;
  27.         overflow-y: scroll;
  28.     }
  29. </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>
  14. .list {
  15.   display: flex;
  16.   overflow-x: scroll;
  17. }
  18. .grid {
  19.   margin-left: 10rpx;
  20.   width: 150rpx;
  21.   height: 58rpx;
  22.   border: 1rpx solid #e5e5e5;
  23.   flex-shrink:1; //add
  24. }

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. }
  15. flex-shrink，默认值是1，修改为0，就不会因为右侧内容太多，被压缩。