菜单 搜索
首页 前端知识 flex布局看这一篇就够了

flex布局看这一篇就够了

2024-03-05 09:03:20 前端知识 前端哥 337 3 我要收藏

flex布局知识点

    • 知识体系
    • 1、flex概述
    • 2、flex布局的作用
    • 3、flex基本概念
      • 3.1、容器与项目
      • 3.2、主轴与交叉轴
    • 4、容器属性
      • 4.1、主轴方向 flex-direction
      • 4.2、换行 flex-wrap
      • 4.3、简写 flex-flow
      • 4.4、项目群对齐 justify-content align-items
      • 4.6、多行对齐 align-content
      • 4.7、间距 gap row-gap column-gap
    • 5、项目属性
      • 5.1、排序位置 order
      • 5.2、弹性成长 flex-grow
      • 5.3、弹性收缩 flex-shrinik
      • 5.4、弹性基值 flex-basis
      • 5.5、弹性简写 flex
      • 5.6、自我对齐 align-self
    • 6、兼容性
    • 7、实战样例
      • 7.1、骰（tou）子
      • 7.2、百分比布局
      • 7.3、圣杯布局
    • 8、经验技巧

知识体系

在这里插入图片描述

1、flex概述

全称为 “Flexible Box Layout”，即 “弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化

声明定义
容器里面包含着项目元素，使用 display:flex 或 display:inline-flex 声明为弹性容器

.container {
  display: flex | inline-flex;
}

2、flex布局的作用

  • 在父内容里面垂直居中一个块内容
  • 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度 / 高度可用
  • 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同

3、flex基本概念

3.1、容器与项目

采用 flex 布局的区域，称为 “容器”（ container ），应用元素 display: flex，容器内部的元素，称为 “项目”（ item ）

.container{
	display: flex;
}
<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

上面代码中， 最外层的 div 就是容器，内层的三个 div 就是项目。

注意：项目只能是容器的顶层子元素（直属子元素），不包含项目的子元素，比如上面代码的 p 元素就不是项目。flex布局只对项目生效。

3.2、主轴与交叉轴

flex 布局内的容器元素将按照主轴 main axis 或交叉轴 cross axis 排列。
在这里插入图片描述
主轴（main axis）
沿其布置子容器的从 main-start 开始到 main-end ，请注意，它不一定是水平的；这取决于 flex-direction 属性（见下文）， main size 是它可放置的宽度，是容器的宽或高，取决于 flex-direction

交叉轴（cross axis）
垂直于主轴的轴称为交叉轴，它的方向取决于主轴方向，是主轴写满一行后另起一行的方向，从 cross-start 到 cross-end ， cross size 是它可放置的宽度，是容器的宽或高，取决于 flex-direction

4、容器属性

在这里插入图片描述

容器container的属性如下

1. flex-direction   主轴方向
2. flex-wrap        主轴一行满了换行
3. flex-flow        1和2的组合
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

4.1、主轴方向 flex-direction

定义主轴的方向，也就是子项目元素排列的方向

  • row （默认）：从左到右 ltr ；从右到左 rtl
  • row-reverse ：从右到左 ltr ；从左到右 rtl
  • column: 相同， row 但从上到下
  • column-reverse: 相同， row-reverse 但从下到上
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

在这里插入图片描述

在这里插入图片描述

4.2、换行 flex-wrap

设置子容器的换行方式，默认情况下，子项目元素都将尝试适合一行 nowrap

  • nowrap （默认）不换行
  • wrap 一行放不下时换行
  • wrap-reverse 弹性项目将从下到上换行成多行
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

在这里插入图片描述

4.3、简写 flex-flow

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

.container {
  flex-flow: column wrap;
}

取值情况
在这里插入图片描述

4.4、项目群对齐 justify-content align-items

justify-content 决定子元素在主轴方向上的对齐方式，认是 flex-start

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

在这里插入图片描述

align-items 决定子元素在交叉轴方向上的对齐方式，默认是 stretch

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

在这里插入图片描述

4.6、多行对齐 align-content

当容器内有多行时，align-content 定义多行的对齐方式

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

在这里插入图片描述

4.7、间距 gap row-gap column-gap

设置容器内项目之间的间距，只控制项目与项目的间距，对项目与容器的间距不生效

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

在这里插入图片描述

这设置的是最小间距，因为 just-content 导致的间距变大

5、项目属性

在这里插入图片描述
项目item 的属性如下

1.	order 			排序
2.	flex-grow		长大
3.	flex-shrinik 	缩小
4.	align-self 		覆盖container 的 align-items 属性
5.	flex-basis 		宽度

5.1、排序位置 order

  • 每个子容器的order属性默认为0
  • 通过设置order属性值，改变子容器的排列顺序
  • 可以是负值，数值越小的话，排的越靠前
.item1 {
  order: 3; /* default is 0 */
}

在这里插入图片描述

5.2、弹性成长 flex-grow

在容器主轴上存在剩余空间时, flex-grow才有意义
定义的是可放大的能力，0 （默认）禁止放大，大于 0 时按占的比重分放大，负数无效

.container{
    border-left:1.2px solid black;
    border-top:1.2px solid black;
    border-bottom: 1.2px solid black;
    width: 100px;
    height: 20px;
    display: flex;
}
.item{
	border-right:1.2px solid black;
    width: 20px;height: 20px;
}
.item1{
    /* 其他的都是0，这一个是1，1/1所以能所有剩下的空间都是item1的 */
    flex-grow: 1; /* default 0 */
}

<div class="container">
    <div class="item item1" style="background-color: #7A42A8;"></div>
    <div class="item" style="background-color: #8FAADC;"></div>
    <div class="item" style="background-color: #DAE3F3;"></div>
</div>

在这里插入图片描述

5.3、弹性收缩 flex-shrinik

当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
定义的是可缩小的能力，1 （默认）等大于 0 的按比例权重收缩， 0 为禁止收缩，负数无效

.container{
    width: 100px;
    height: 20px;
    display: flex;
    flex-wrap: nowrap;
}
.item{
    width: 50px;height: 20px;
}
.item1{/*收缩权重1/3,总空间50，所以它占33.33，为原本的2/3*/
    flex-shrink: 1; /* default 1 */
}
.item2{/*收缩权重2/3,总空间50，所以它占16.67，为原本的1/3*/
    flex-shrink: 2; /* default 1 */
}
.item3{
    flex-shrink: 0; /* default 1 */
}

<div class="container">
    <div class="item item1" style="background-color: #7A42A8;"></div>
    <div class="item item2" style="background-color: #8FAADC;"></div>
    <div class="item item3" style="background-color: #DAE3F3;"></div>
</div>

在这里插入图片描述

5.4、弹性基值 flex-basis

flex-basis 指定了 flex 元素在主轴方向上的初始尺寸,它可以是长度（例如 20% 、 5rem 等）或关键字。felx-wrap根据它计算是否换行，默认值为 auto ，即项目的本来大小。它会覆盖原本的width 或 height

.item {
  flex-basis: <length> | auto; /* default auto */
}

5.5、弹性简写 flex

flex-grow , flex-shrink 和 flex-basis 组合的简写，默认值为 0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

取值情况
在这里插入图片描述

建议您使用此速记属性，而不是设置单个属性。速记智能地设置其他值。

5.6、自我对齐 align-self

这允许为单个弹性项目覆盖默认的交叉轴对齐方式 align-items

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

在这里插入图片描述

注意：flexbox布局和原来的布局是两个概念，部分css属性在flexbox盒子里面不起作用，eg：float ， clear 和 vertical-align 等等

6、兼容性

基本上所有浏览器都兼容flex布局
在这里插入图片描述

点击查看兼容性

7、实战样例

7.1、骰（tou）子

在这里插入图片描述

点击查看源码

7.2、百分比布局

开发中会用到的百分比布局

在这里插入图片描述

点击查看源码

7.3、圣杯布局

圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，这是一种非常常见的布局方式

在这里插入图片描述

点击查看源码

8、经验技巧

问题
有时我们既希望just-content: space-between，又希望最后一行可以按序排列而不是空间环绕

<div class="box">
  <div class="item"></div> * 8
</div>
<style>
  .box {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 520px;
    height: 220px;
  }
  .item {
    background-color: blueviolet;
    width: 100px;
    height: 100px;
  }
</style>

在这里插入图片描述
解决办法是加入许多有宽的<i>标签

<div class="box">
  <div class="item"></div> * 8
   <!-- 解决flex最后一行的bug -->
   <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<style>
  i{
    width: 100px;
  }    
</style>

在这里插入图片描述

参考资料
flex1
flex2
视频
在线测试地址

转载请注明出处或者链接地址：https://www.qianduange.cn//article/3249.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

前端使用jquery传递对象数组给后端说明及总结

2024-03-27 10:03:30

jQuery实现轮播图

2024-02-26 20:02:24

CSS伪元素详解以及伪元素与伪类的区别

2024-03-27 10:03:20

原生Img图片标签图片自适应缩放且不变形

2024-03-27 10:03:14

响应式布局的五种方法

2024-03-27 10:03:14

使用CSS3实现围绕圆心旋转

2024-03-27 10:03:14

html css简单实现九宫格布局，自适应屏幕

2024-03-27 10:03:11

window.onscroll 当页面滚动条、滚动到指定位置时触发

2024-03-27 10:03:11

前端实现3D旋转木马相册

2024-03-27 10:03:07

VScode cssrem插件的安装和使用指南

2024-03-27 10:03:07

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
8

jQuery事件处理

2024-03-12 01:03:32999
9

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999
10

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！