目录

基本介绍

添加在父元素上的属性(添加在flex容器上的)

（一）设置为弹性布局（display：flex；）

（二）修改主轴的属性（flex-direction）

（三）设置子元素是否折换（flex-wrap）

（四）设置主轴的对齐方式（justify-content）

（五） 侧轴对齐（align-itmes，align-content）

添加在子元素上的属性(添加在flex项目上的)

（一）设置子元素前后顺序（order）

（二）设置子元素的放大比例（flex-grow）

（三）设置子元素的缩小比例（flex-shrink）

基本介绍

Flex容器：采用 Flex 布局的元素的父元素；

Flex项目：采用 Flex 布局的元素的父元素的子元素；

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

添加在父元素上的属性(添加在flex容器上的)

（一）设置为弹性布局（display：flex；）

display:flex;    display:inline-flex;

特点：

  1. 所有的子元素都横着排列的。
  2. 如果子元素的高度没有设置,则高度是默认拉伸的。
  3. 如果所有子元素的宽度之和大于父元素,默认情况下,子元素不会超出,宽度会被压缩。
  4. 如果子元素的高度大于父元素,则高度会超出。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}ul{width: 500px;height: 500px;border: 2px solid black;/* 设为弹性盒子 */display: flex;}li{/* 去除默认样式 */list-style: none;width: 200px;border: 2px solid red;}</style>
</head>
<body><ul><li></li><li></li><li></li><li></li><li></li></ul>
</body>
</html>

运行结果：

（二）修改主轴的属性（flex-direction）

flex-direction:row; 默认值
flex-direction:row-reverse 横着反方向
flex-direction:column 主轴为竖着
flex-direction:column-reverse 竖着反方向

代码展示：

<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}ul{width: 500px;height: 200px;margin: 20px;border: 2px solid black;/* 设为弹性盒子 */display: flex;}li{/* 去除默认样式 */list-style: none;width: 50px;border: 1px solid red;text-align: center;font-size: 20px;}ul:nth-of-type(1){/* 默认值 */flex-direction: row;}ul:nth-of-type(2){/* 横轴取反 */flex-direction: row-reverse;}ul:nth-of-type(3){/* 改变主轴为竖轴 */flex-direction: column;}ul:nth-of-type(3) li{height: 40px;}ul:nth-of-type(4) li{height: 40px;}ul:nth-of-type(4){/* 改变主轴为竖轴并取反 */flex-direction: column-reverse;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>

运行结果：

（三）设置子元素是否折换（flex-wrap）

flex-wrap:nowrap; 默认值
flex-wrap:wrap; 换  常用值
flex-wrap:wrap-reverse; 换且反向

代码展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {width: 600px;height: 400px;margin: 10px;border: 1px solid black;display: flex;}li {text-align: center;font-size: 30px;list-style: none;width: 250px;border: 2px solid red;box-sizing: border-box;}ul:nth-of-type(1) {/* 设置折换属性 */flex-wrap: wrap;}ul:nth-of-type(2) {/* 设置折换反方向属性 */flex-wrap: wrap-reverse;}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body></html>

运行结果：

（四）设置主轴的对齐方式（justify-content）

justify-content:flex-start; 主轴开始对齐
justify-content:flex-end; 主轴结束对齐
justify-content:center; 居中
justify-content:space-between; 2端对齐
justify-content:space-around; 2边间距和中间间距的比值是1:2
justify-content:space-evenly; 2边间距和中间间距的比值是1:1

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}ul{width: 500px;height: 200px;margin: 20px;border: 2px solid black;/* 设为弹性盒子 */display: flex;}li{/* 去除默认样式 */list-style: none;width: 50px;border: 1px solid red;text-align: center;font-size: 20px;}ul:nth-of-type(1){/* 主轴开始对齐(默认值)*/justify-content: flex-start;}ul:nth-of-type(2){/* 主轴结束对齐 */justify-content: flex-end;}ul:nth-of-type(3){/* 主轴居中对齐 */justify-content:center;}ul:nth-of-type(4){/* 主轴两端对齐 */justify-content:space-between;}ul:nth-of-type(5){/* 2边间距和中间间距的比值是1:2 */justify-content:space-around;}ul:nth-of-type(6){/* 2边间距和中间间距的比值是1:1 */justify-content:space-evenly;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

运行结果：

（五） 侧轴对齐（align-itmes，align-content）

注意：align-content属性必须搭配flex-wrap使用！！！

align-itmes
align-itmes:stretch ;  默认值
align-itmes:flex-start; 开始对齐
align-itmes:flex-end; 结束对齐
align-itmes:center; 居中
align-content
align-content:stretch ;  默认值
align-content:flex-start; 开始对齐
align-content:flex-end; 结束对齐
align-content:center; 居中
align-content:space-between; 2端对齐
align-content:space-around; 2边间距和中间间距的比值是1:2
align-content:space-evenly; 2边间距和中间间距的比值是1:1

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}body{display: flex;flex-wrap: wrap;width: 1700px;}ul{width: 500px;height: 500px;margin: 20px;border: 2px solid black;/* 设为弹性盒子 */display: flex;flex-wrap: wrap;}li{/* 去除默认样式 */list-style: none;width: 200px;height: 100px;border: 1px solid red;text-align: center;font-size: 20px;}ul:nth-of-type(1){/* 侧轴开始对齐 */align-content:flex-start;}ul:nth-of-type(2){/* 侧轴结束对齐 */align-content:flex-end;}ul:nth-of-type(3){/* 侧轴居中对齐 */align-content:center;}ul:nth-of-type(4){/* 侧轴两端对齐 */align-content:space-between;}ul:nth-of-type(5){/* 2边间距和中间间距的比值是1:2 */align-content:space-around;}ul:nth-of-type(6){/* 2边间距和中间间距的比值是1:1 */align-content:space-evenly;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

运行结果：

添加在子元素上的属性(添加在flex项目上的)

（一）设置子元素前后顺序（order）

order：默认值是0，数值越小越靠前，可以给负数。

代码展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {width: 600px;height: 400px;margin: 10px;border: 1px solid black;display: flex;}li {text-align: center;font-size: 30px;list-style: none;width: 250px;border: 2px solid red;box-sizing: border-box;}ul>li:nth-of-type(1){/* 默认为零，数值越小越靠前 */order: 1;}ul>li:nth-of-type(2){/* 数值最大在最后面 */order: 5;}ul>li:nth-of-type(3){/* 比第一个大比第二个小，所以在中间 */order: 3;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

运行结果：

（二）设置子元素的放大比例（flex-grow）

默认值为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

代码展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {width: 1000px;height: 400px;margin: 10px;border: 1px solid black;display: flex;}li {text-align: center;font-size: 30px;list-style: none;width: 100px;border: 2px solid red;box-sizing: border-box;flex-grow:1;}ul>li:nth-of-type(1){/* 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 */flex-grow:2;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

运行结果：

（三）设置子元素的缩小比例（flex-shrink）

默认值为1。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。（适合移动端溢出出滚动条的效果，前提是利用弹性布局写）

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

代码展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {width: 400px;height: 400px;margin: 10px;border: 1px solid black;display: flex;}li {text-align: center;font-size: 30px;list-style: none;width: 100px;border: 2px solid red;box-sizing: border-box;/* 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。 */flex-basis:1;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
</html>

运行结果：

码字不易，点个赞再走吧~~~

弹性盒子（Flex）相关属性全解析相关推荐

  1. CSS3弹性盒子Flex

    CSS3弹性盒子Flex 基础知识和术语 原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 父级(flex容器)的属性 #显示 ...

  2. 弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转

    <!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...

  3. css 弹性盒子 flex布局

    目录 css弹性盒子flex 布局 什么是flex 常见父项属性 概念与案例 主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...

  4. html弹性盒子布局,div+css3弹性盒子(flex box)布局

    一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...

  5. 简述弹性盒子flex布局及rem布局

    简述弹性盒子flex布局及rem布局 flex布局方式 采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴 水平主轴 主轴的开始位置(与边框的交叉点)叫做m ...

  6. 弹性盒子 Flex 子元素高度塌陷

    弹性盒子 Flex 子元素高度塌陷 数据来源:https://blog.csdn.net/sinat_36539161/article/details/81663971 先看看页面整体布局: · wr ...

  7. CSS3 弹性盒子(Flex Box)

    目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...

  8. 认识弹性盒子flex

    认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1.定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -we ...

  9. html盒子页面居中,网页布局盒子(box)相关属性和盒子居中

    网页布局中盒子的相关属性: 一.盒子的基础属性: 1.width和height:设置盒子的宽度和高度:常见单位:px,em,rem,vh/vm等 2.background:color(设置背景颜色), ...

最新文章

  1. ORB-SLAM3在windows下的编译使用
  2. iOS UTI(统一类型标识)
  3. apache下用expires_module让浏览器缓存静态文件
  4. 解决VMware虚拟机安装的ubuntu显示屏幕小的问题
  5. 智能检测营销是否合规，网易易盾发布广告合规检测解决方案
  6. windows 8   远程桌面（RemoteFX ）
  7. k均值例子 数据挖掘_人工智能、数据挖掘、机器学习和深度学习的关系
  8. spring cloud服务发现注解之@EnableDiscoveryClient与@EnableEurekaClient 1
  9. 微软请你学Linux，最后4节课，即将收官,错过了就没有了！
  10. django1.8读书笔记模版高级进阶
  11. mysql 8.0 ga_mysql 8.0 GA发布了
  12. Android 5.0 十大新特性
  13. BZOJ 1715: [Usaco2006 Dec]Wormholes 虫洞
  14. 聊聊mac系统的 secoclient和iTerm2
  15. 保存特定模式的snp文件
  16. 数据分析：RFM模型
  17. matlab freqz m,freqz(freqz和freqs区别)
  18. 机械手基础知识（2）之机械手的正运动学和逆运动学问题
  19. mysql崩 数据同步_MySQL5.7 大大降低了半同步复制-数据丢失的风险
  20. 侯捷 C++11/14 笔记

热门文章

  1. postman导出请求url_Postman使用手册1——导入导出和发送请求查看响应
  2. mysql 学习课堂笔记 第二天（值得学习、收藏！）
  3. Android常用命令行指令
  4. 中原消费金融7.5亿银团贷款落地
  5. Preference使用
  6. 苏州初中生计算机学校有哪些,盘点苏州有哪些优秀寄宿中学
  7. docker镜像保存为文件与文件载入为docker镜像
  8. 短视频APP是如何开启你的美好生活的？
  9. “右键点文件电脑假死机”处理方法
  10. 成年人应该说“我不去了”，而不是“我去不了”