Flex弹性盒子（一篇带你掌握潮流 Flex 布局）

Posted 2021-06-19 辉常努腻

文章目录

• • Flex弹性盒子
  • • 1.说在前头
    • • 1.1.Flex布局出现之前
      • 1.2.Flex布局出现后
    • 2.什么是Flex布局?
    • 3.Flex container/item（父/子容器）的常用属性
    • 4.Let's Codeing（父容器的属性）
    • • 4.1.display:flex;
      • 4.2.flex-direction ~ ~ ~ 容器排列方式
      • 4.3.flex-wrap……子项目多行
      • 4.4.justify-content……用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
      • 4.5.align-content……副轴（竖轴）对齐方式（适用于多行）
      • 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
      • 4.6.align-items……垂直对齐方式（适用于单行）
      • 4.7.align-items 和 align-content 的区别
    • 5.当切换容器排列方式后，水平对齐以及垂直对齐的 应用 变化（重点、难点⭐⭐⭐⭐⭐）
    • 6.Let's Codeing（子项目的属性）
    • • 6.1.order: number ; 顺序指定
      • 6.2.flex-grow……子项目延伸比率
      • 6.3.flex-basis……子项目的==基本宽度==
      • 6.3.flex-shink……子项目收缩比率
      • 6.4.flex: …… ; 再来一个实用的吧
      • 6.5.align-self……子元素垂直对齐（self 子项目 自己 单独的排列方式）
    • 7.弹性盒子总结图（你的备忘录⭐⭐⭐）

Flex弹性盒子

1.说在前头

1.1.Flex布局出现之前

• 我们知道传统的页面布局依赖于 盒状模型
• 依赖于display、position、float属性
• 对于某些特殊布局来说特别不方便，比如垂直居中（比较不容易实现）

1.2.Flex布局出现后

• 2009年，W3C提出Flex布局
• 简便、完整、响应式的各种实现页面布局（目前已得到所有主流浏览器的支持）
• 意味着我们能很安全的使用这个功能

2.什么是Flex布局?

• Flex就是弹性布局

  1. 弹性布局中弹性容器三个子元素，可以在任何方向上排布，可以任意伸缩它的尺寸
  2. 一个Flexbox只能处理一个维度的布局

• 基本构造

3.Flex container/item（父/子容器）的常用属性

针对于容器的	针对于item的
flex-direction	flex-grow
flex-wrap	flex-shrink
flex-flow	flex-basis
align-items	flex
align-content	align-self
justify-content	order

4.Let’s Codeing（父容器的属性）

4.1.display:flex;

• 当父元素设置为display:flex;的时候，它所有的子元素都成为它特有的成员，有自己的排列方式如图

html

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

css

.container{
    margin:150px auto;
    max-width: 800px;
    height: 400px;
    background-color: rgb(196, 229, 232);
    border: 5px solid rgb(0, 181, 203);
    display: flex;
}
.item{
    background-color: rgb(0, 181, 203);
    color: white;
    width: 100px;
    height: 100px;
    margin: 2px;
    font-weight: bold;
    font-size: 5em;
    text-align: center;
}

(王爷)演示

加入display:flex;

.container{
    margin:150px auto;
    max-width: 800px;
    height: 400px;
    background-color: rgb(196, 229, 232);
    border: 5px solid rgb(0, 181, 203);
    display: flex; <-----
}

然后我们再看一下王爷

4.2.flex-direction ~ ~ ~ 容器排列方式

• flex-direction: row(默认值 横向 从左至右))
  

• flex-direction: row-reverse(横向 从右至左)
  

• flex-direction: column(竖向 从上至下)
  

• flex-direction: column-reverse(竖向 从下至上)
  

4.3.flex-wrap……子项目多行

• flex-wrap: nowrap ;（默认值 不换行）
  

• flex-wrap: wrap ;（换行）
  

• flex-wrap: wrap-reverse ;（倒序换行）
  

我们试试两个属性一起使用

• 将排列设置横向倒序排列（row-reverse）

• 将换行设置为自动换行（wrap）

  • flex-flow: row-reverse wrap;
    

4.4.justify-content……用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

• justify-content: flex-start ;(默认值 水平开始位置)
  

• justify-content: flex-end;( 水平结束位置)
  

• justify-content: flex-end;(水平局中位置)
  

• justify-content: space-around;(两边留有1/2间距，中间水平分布)
  

• justify-content: space-between;(两边不留间距，中间水平分布)
  

• justify-content: space-evenly;(水平分布 部分浏览器兼容性不好)
  

• 我们再看一下 space-around 和 space-between 的区别
  

• 综上所述 - - 可能有人会觉得发明这两个属性的人一定闲的蛋疼 😂

4.5.align-content……副轴（竖轴）对齐方式（适用于多行）

属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

• align-content: stretch ；( 默认值 )
  

• align-content: flex-start ； ( 多行子项目 位于垂直顶部位置 )
  

• align-content: flex-end ； (多行子项目 位于垂直尾部位置)
  

• align-content: center ;(多行子项目 一起垂直居中)
  

• align-content: space-around ;(两边留有1/2间距，中间水平分布)
  

• align-content: space-between ;(两边不留距离 ，且垂直平均分布)
  

4.6.align-items……垂直对齐方式（适用于单行）

• align-items: stretch ;(默认值 当子项目没有设置高度时 高度自动延申充满)
  

• align-items: flex-start ;(垂直方向 顶部位置)
  

• align-items: flex-end ;(垂直方向 尾部位置)
  

• align-items: center ;(垂直方向 居中位置)
  

• align-items: baseline ;(垂直方向 基线对齐)
  

4.7.align-items 和 align-content 的区别

5.当切换容器排列方式后，水平对齐以及垂直对齐的 应用 变化（重点、难点⭐⭐⭐⭐⭐）

• 当使用flex-direction: (例 column) ;时 justify-content 、 align-content 、align-items发生的变化

• 当排列为column / column-reverse 时，其实容器的主轴发生了变化

• 主轴现在是竖轴，副轴是横轴
  

• 这时候 justify-content 控制的不再是横向的，而是竖向的排列

• 这时候 align-content / align-items 控制的不再是竖向的，而是横向的排列

6.Let’s Codeing（子项目的属性）

java程序员可省略…

6.1.order: number ; 顺序指定

• order: 0 ;(默认值都为 0 )

• 当我将每个子项目的order修改后 order

  • 父：justify-content: space-evenly ;
    父：align-items : center ;
    
    子：.item:nth-child(1){    order: 0;}
    子：.item:nth-child(2){    order: 1;}
    子：.item:nth-child(3){   order: -1;}
    子：.item:nth-child(4){    order: 3;}
    子：.item:nth-child(5){    order: 2;}
    子：.item:nth-child(6){    order: 2;}
    

  • 看效果
    

6.2.flex-grow……子项目延伸比率

所谓grow就是当排列元素没有占满一行时，会有剩余空间，

子元素通过设置这个属性，声明要占取剩余空间的剩余份数，

默认所有子元素为0

这里我举两个例子

父： /* 水平对齐方式 */
    justify-content: space-evenly ;
    /* 垂直对齐方式 */
    align-items : center ;

子：.item:nth-child(1){ margin: 10px; flex-grow: 2; }
子：.item:nth-child(2){ margin: 10px; }
子：.item:nth-child(3){ margin: 10px; }

父： /* 水平对齐方式 */
    justify-content: space-evenly ;
    /* 垂直对齐方式 */
    align-items : center ;

子：.item:nth-child(1){ margin: 10px; flex-grow: 3; }
子：.item:nth-child(2){ margin: 10px; }
子：.item:nth-child(3){ margin: 10px; flex-grow: 1.5;  }

6.3.flex-basis……子项目的基本宽度

• 会覆盖之前设置的width属性

• 看代码

  • 父： /* 水平对齐方式 */
        justify-content: space-evenly ;
        /* 垂直对齐方式 */
        align-items : center ;
    
    子：.item:nth-child(1){  flex-basis: 100px;  }
    子：.item:nth-child(2){  flex-basis: 100px;  }
    子：.item:nth-child(3){  flex-basis: 200px;  }
    

6.3.flex-shink……子项目收缩比率

• flex-shink跟flex-grow 正好相反 是当子项目容不下时，设置当前子项目收缩的比例

• flex-shink：1 ；（默认值为1） ，也就是说每个子项目在容不下时，都会的去均匀收缩

• 可以试着把第一个设置为0看看

  • 父： max-width: 700px;
    	/* 水平对齐方式 */
        justify-content: space-evenly ;
        /* 垂直对齐方式 */
        align-items : center ;
    
    子：.item:nth-child(1){  flex-basis: 300px; flex-shrink: 0;   }
    子：.item:nth-child(2){  flex-basis: 300px;  }
    子：.item:nth-child(3){  flex-basis: 300px;  }
    

• 再来一个扯一点的案例

• 好了，还没有理解的话，再写一个，没事沃不累！

• 终于整完了

6.4.flex: …… ; 再来一个实用的吧

• flex: 0 1 30% ;

  • grow shink basis
  • 第一个表示延伸比率为 0（不延伸）
  • 第二个表示收缩比率为 1 (不收缩)
  • 第三个表示基本宽度为 30% （以父级容器宽度为标准的30%）

• 看实战

• 子：.item:nth-child(1){   flex: 0 1 20% ;   }
  子：.item:nth-child(2){   flex: 1 0 30% ;   }
  子：.item:nth-child(3){   flex: 0 1 20% ;   }
  

6.5.align-self……子元素垂直对齐（self 子项目 自己 单独的排列方式）

• 默认值 auto auto会接受父级带来的排列方式，

• 设置后，会覆盖父级的排列方式

• align-self: flex-start ；（单个自己进行顶部排列 ：据主轴而变化）
  

• align-self: flex-start ；（单个自己进行居中排列 ：据主轴而变化）
  

• align-self: flex-start ；（单个自己进行底部排列 ：据主轴而变化）
  

• align-self: flex-start ；（单个自己进行高度充满排列 ）
  

• align-self: baseline ;(单独基线排序 一般多个配合使用 )
  

7.弹性盒子总结图（你的备忘录⭐⭐⭐）