学习笔记六flex

---

flex弹性盒

代替浮动
当想要成一排排列时 用flex
要使用弹性盒必须先设置弹性容器

弹性容器

1. display:flex;
2. display:inline-flex;行内弹性容器

弹性容器的属性

写在弹性容器里 和display在一起
1.
flex-direction: row;水平左向右 主轴从左向右
flex-direction: column;纵向 主轴从上向下

注意！！!

column一般用于让元素垂直排列的时候 这时主轴是纵向的 如果想要设置垂直方向的留白 用justity-conten而不是align-content
2.
flex-wrap: wrap;换行
wrap-reverse 循环换行
3.
flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。
flex-flow: row wrap;
4.
justify-content 水平（主轴） 如何分配弹性容器空白

center 值将 flex 项目在容器的中心
flex-start 靠在容器起边
space-around 空白分部到每个元素两侧 此时每个元素中的留白重叠 会不均匀
space-between此时均匀
space-evenly 分部元素的单侧

.flex-container {
  display: flex;
  justify-content: center;
}

align-content 垂直（副轴）分配容器留白空间
用于有多行 每一回行的元素大小不一样那么 这一行的留白怎么分配 若拉伸 一行一样高 若center 在这一行的中间
align-content: stretch;拉伸 占满剩余空间 此时每一行一样高
align-content: center;
6.
align-items 属性用于垂直对齐 flex 项目
align-items: center;

注意！！！ align-content是看留白 align-items是看对齐
align-content: center; 上下留白一样多 拉伸元素 元素在中间
align-items: center; 元素以中线对齐 不拉伸元素 留白不一样 元素在中间

6. 居中！！！

justify-content: center;
  align-items: center;

不能用align-cuntent 会拉伸元素
弹性项目在弹性盒里面居中

---

关于 align-items和align-content

1. align-items

• 属性可以应用于所有的flex容器，它的单位 是每个flex子项 用于设置元素在垂直方向的对齐方式
• 默认为顶部对齐
• 当单行且没有设置高度时center会 高度为最高子项的高度，在一行的所有子项全都在交叉轴上居中对齐(留白不均匀)
• 当单行设置高度时 会在高度上对齐
• 当多行没有设置高度时 每一行都以最高项对齐
• 当多行设置了高度时 平均分成两行 每一行内部对齐

2. align-content

属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行，只在两种情况下有效果：①子项多行且flex容器高度固定 ②子项单行，flex容器高度固定且设置了flex-wrap:wrap;(哪怕单行因为换行也认为是多行了)

• 多行没有高度 会以最大为高度 没有留白所以不起效
• 多行高度固定 设置center
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qiL0fbKK-1652877978492)(https://note.youdao.com/favicon.ichttps://img-blog.csdnimg.cn/20190304213024271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjMTg4Njg4NzY4Mzc=,size_16,color_FFFFFF,t_70o)]
• 单行设置wrap且有高度
  

弹性元素

弹性容器的 子元素 不是后代元素
一个元素可以是弹性容器和弹性元素

弹性元素的属性

1
flex-grow 在弹性容器中有剩余的部分弹性项目增长多少
flex-grow: 8；没有单位 比其他的快8倍
flex-grow: 1;每个元素都一样大的占满容器
默认为0
2.
flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。
默认为0
3.
flex-basis 元素基础的长度
若主轴是横向 长度 纵向 宽度
若有数值了 width height将被覆盖
4.
order 属性规定 flex 项目的顺序。

---

合着写 flex:1 1 auto;增长 缩减 基础

flex的实例

必须得设置伸展才能有效
flex-flow: row wrap;

当用于移动端时，需要适配屏幕大小

1. 祖先元素是width：20%每个元素都width：100%
   然后给容器 设置拉伸效果 （只要不是0就行）
   这时容器就会配合网页大小 弹性元素会跟着容器一起变化

   width：20% 在子元素
   flex在容器

2. 容器宽度100% 子元素flex：auto；

   width:20% 在容器
   flex在子元素

这种情况不太常用 因为这样子元素会太大

3. 在移动端中要实现左右滑动

.wrapper{
    display:flex;
    overflow:auto;
    
}
.yuansu{
    flex:none;
}

当容器的大小固定或与屏幕同宽 且没有设置flex-direction时 容器将不会撑开
而元素默认不会放大会缩小 所以此时设置 flex：none 使元素不会缩小 这时候元素就会横向排列 并且溢出屏幕 再设置溢出滚动