flex-shrink:0;

或width:0;

flex-grow:0;

将子div自动伸缩取消

flex-grow;此属性为是否自动增长空间，

flex-shrink;此属性为是否自动缩小空间

flex-grow:0;
flex-shrink:0;
 子div

flex-direction:row;

row：子div横向排列

column：子div纵向排列

 父div

justify-content:

(主轴的对齐方式)

flex-start：元素从左到右排列，最后空白

flex-end 元素从右向左排列

center 元素居中排列

space-around 平分空间

space-between 两头固定，中间一部分

space-evenly 把空白分布到元素的单侧

 父div

align-items

（侧轴的对齐方式）

（单行）

stretch：默认值：将元素的长度设置为相同的值

flex-start 元素不会拉伸，从上到下对齐

flex-end:从下向上对齐

center：居中对齐

 父div

flex-wrap:wrap;

wrap：超出宽度，自动换行

nowrap：默认值，元素不自动换行

wrap-reverse：元素沿着辅轴反方向换行

--------------------------------------

注意：父容器加入align-content：flex-start

防止换行后，多一个空白行

 父div

align-content:

（侧轴，多行）

flex-start：元素侧轴从上到下排列，最后空白

flex-end 元素从下向上排列

center 元素居中排列

space-around 侧轴平分空间

space-between 两头固定，中间平分

stretch 子元素高度一部分父元素高度

 父DIV
flex-flow 复合属性，相当于同时设置了Flex-direction和flex-wrap 父div

align-self

（控制某个子DIV）

flex-start：元素从左到右排列，最后空白

flex-end 元素从右向左排列

center 元素居中排列

space-around 平分空间

space-between 两头固定，中间一部分

space-evenly 把空白分布到元素的单侧

 子DIV

【Css】移动端用flex实现DIV高度自适应屏幕和带滚动条效果（代码示例）_敦厚的曹操的博客-CSDN博客一、手机移动端的默认设置像素，宽度为980px也可以利用meta来设置像素<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=200px“ />二、设计图的宽度一般 是750px 或 1125px...https://blog.csdn.net/dxnn520/article/details/122405070

一、justify-content属性（对齐方式）

1、从左向右对齐排列

justify-content:flex-start;   /*  从左向右对齐排列  */

<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>轮播图案例</title><script src="js/vue/vue.js"></script>
</head>
<style>* {margin: 0;padding: 0;}.box {width: 100%;height: 200px;background-color: rgb(241, 241, 241);display: flex;  // 默认左对齐}.box div{height: 100px;text-align: center;line-height: 100px;font-size: 25px;}.box_1{width: 100px;background-color: rgb(250, 220, 220);}.box_2{width: 100px;background-color: rgb(232, 248, 202);}.box_3{width: 100px;background-color: rgb(190, 210, 248);}.box_4{width: 100px;background-color: rgb(248, 209, 194);}
</style><body><div class="box"><div class="box_1">1</div><div class="box_2">2</div><div class="box_3">3</div><div class="box_4">4</div></div>
</body>

2、从右向左对齐

justify-content:end; /* 从右向左排 */

3、居中对齐

        display: flex;justify-content:center; /* 居中对齐 */

4、平均分配每个空白空间

        display: flex;justify-content:space-around; /* 平均分配剩余空间 */

5、两边固定贴边，中间再一部分剩余空间

        display: flex;justify-content:space-between; /* 两边贴固定，中间再均分配空白空间 */

6、两边固定贴边，中间两个自动平均填充

<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>轮播图案例</title><script src="js/vue/vue.js"></script>
</head>
<style>* {margin: 0;padding: 0;}.box {width: 100%;height: 200px;background-color: rgb(241, 241, 241);display: flex;justify-content:space-between; /* 两边贴固定，中间再均分配空白空间 */}.box div{height: 100px;text-align: center;line-height: 100px;font-size: 25px;}.box_1{width: 100px;background-color: rgb(250, 220, 220);}.box_2{width: 50%;background-color: rgb(192, 248, 185);}.box_3{width: 50%;background-color: rgb(190, 210, 248);}.box_4{width: 100px;background-color: rgb(248, 209, 194);}
</style><body><div class="box"><div class="box_1">1</div><div class="box_2">2</div><div class="box_3">3</div><div class="box_4">4</div></div>
</body>

二、align-items属性（对侧轴的对齐方式）

如果：

flex-direction: row;  那么align-items就是操作【侧轴】上下垂直的对齐

flex-direction: column;  那么align-items就是操作【侧轴】水平的对齐

1、比如：垂直和水平（上下左右）居中

        display: flex;justify-content:center;  /* 水平居中  */align-items: center;  /*  垂直居中  */

三、align-content属性（对侧轴的对齐方式，垂直多行）

1、flex-start：元素侧轴从上到下排列，最后空白

        display: flex;flex-wrap: wrap;   /*  换行  */justify-content:space-between;  /* 水平居中  */align-content: flex-start; /*垂直从上到下*/

2、flex-end 元素从下向上排列

        display: flex;flex-wrap: wrap;   /*  换行  */justify-content:space-between;  /* 水平居中  */align-content: flex-end; /*垂直从下到上*/

3、center 元素居中排列

        display: flex;flex-wrap: wrap;   /*  换行  */justify-content:space-between;  /* 水平居中  */align-content: center; /*垂直居中 */

4、 space-around 侧轴平分空间

        display: flex;flex-wrap: wrap;   /*  换行  */justify-content:space-between;  /* 水平居中  */align-content: space-around; /*垂直平分 */

5、space-between 下下两头固定，中间平分

        display: flex;flex-wrap: wrap;   /*  换行  */justify-content:space-between;  /* 水平居中  */align-content: space-between; /*垂直两头固定，中间平分 */

6、stretch 子元素高度一部分父元素高度

暂时还不太懂！

四、align-self属性（控制某个子div对齐方式 ）

flex-start：元素从左到右排列，最后空白

flex-end 元素从右向左排列

center 元素居中排列

space-around 平分空间

space-between 两头固定，中间一部分

space-evenly 把空白分布到元素的单侧

比如： align-self:flex-end

<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>轮播图案例</title><script src="js/vue/vue.js"></script>
</head>
<style>* {margin: 0;padding: 0;}.box {width: 100%;height: 200px;background-color: rgb(241, 241, 241);display: flex;flex-wrap: wrap;   /*  换行  */justify-content:space-between;  /* 水平居中  */align-content: stretch; /*垂直两头固定，中间平分 */}.box div{height: 100px;width: 200px;text-align: center;line-height: 100px;font-size: 25px;}.box_1{width: 100px;background-color: rgb(250, 220, 220);}.box_2{width: 100px;background-color: rgb(192, 248, 185);align-self: flex-end;}.box_3{width: 100px;background-color: rgb(190, 210, 248);}</style><body><div class="box"><div class="box_1">1</div><div class="box_2">2</div><div class="box_3">3</div></div>
</body>

五、按比例实现flex分布

<!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>flex - 弹性盒</title>
</head>
<style>body {background-color: rgb(255, 255, 255);margin: 0;padding: 0;}.box_1 {height: 50px;display: flex;flex-direction: row;}.box_1 div:nth-child(1) {width: 0;flex-grow: 2;height: 50px;line-height: 50px;text-align: center;background-color: rgb(199, 247, 199);}.box_1 div:nth-child(2) {width: 0;flex-grow: 4;height: 50px;line-height: 50px;text-align: center;background-color: rgb(243, 201, 252);}.box_1 div:nth-child(3) {width: 0;flex-grow: 2;height: 50px;line-height: 50px;text-align: center;background-color: rgb(168, 200, 248);}
</style><body><h2> 1.标准，注意：加上width:0</h2><div class="box_1"><div>我是flex_1</div><div>我是flex_2</div><div>我是flex_3</div></div>
</body></html>

注意：虽然flex设定了平均分配，但如果没有平均分配，格子会随着内容撑开，记得输入：width:0;就强制平均分配了，如下图：

六、多行类似瀑布流flex样式的示例

【小程序/Css】通过Flex实现双列商品展示瀑布流效果_敦厚的曹操的博客-CSDN博客【小程序】实现双列商品效果https://blog.csdn.net/dxnn520/article/details/125432194

七、通过flex弹性盒实现头像区的多行、多列效果


【Css】通过flex弹性盒实现头像区的多行、多列效果（图文+完整代码实例）_敦厚的曹操的博客-CSDN博客完整代码：<!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"> <...https://blog.csdn.net/dxnn520/article/details/124732555

四、用flex制作商城双排导航图标

<!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></head><style>.item {margin: 0 auto;width: 100%;/* background-color: burlywood; */}.item-1 {width: 100%;display: flex;justify-content: space-around;/* background-color: rgb(112, 169, 243); */}.tb {width: 10%;text-align: center;/* height: 100px; */}.tb img {width: 100%;}span{font-size: 35px;text-align: center;}</style><body><div class="item"><div class="item-1"><div class="tb"><img src="data:images/tb1.jpg" /><span>名称</span></div><div class="tb"><img src="data:images/tb2.jpg" /><span>名称</span></div><div class="tb"><img src="data:images/tb3.jpg" /><span>名称</span></div><div class="tb"><img src="data:images/tb4.jpg" /><span>名称</span></div><div class="tb"><img src="data:images/tb5.jpg" /><span>名称</span></div></div><div class="item-1"><div class="tb"><img src="data:images/tb6.jpg" /><span>名称</span></div><div class="tb"><img src="data:images/tb7.jpg" /><span>名称</span></div><div class="tb"><img src="data:images/tb8.jpg" /><span>名称</span></div><div class="tb"><img src="data:images/tb9.jpg" /><span>名称</span></div><div class="tb"><img src="data:images/tb10.jpg" /><span>名称</span></div></div></div></body>
</html>

十、两边固定，中间可以自动伸缩的实现方法

<!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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><title>flex - 弹性盒 - 两边固定，中间伸缩</title></head>
<style>body {margin: 0 0;}.box {height: 100px;background-color: antiquewhite;display: flex;justify-content: space-between;}.box_left {width: 150px;max-width: 150px;height: 100px;line-height: 100px;text-align: center;background-color: rgb(176, 240, 163);}.box_right {width: 150px;max-width: 150px;height: 100px;line-height: 100px;text-align: center;background-color: rgb(175, 202, 238);}.box_center {width: 100%;height: 100px;text-align: center;background-color: rgb(248, 248, 248);font-size: 22px;border-radius: 10px;border: 1px red solid;}</style><body><div class="box"><div class="box_left">左边固定</div><div class="box_center">中间随着窗口大小自动伸缩</div><div class="box_right">右边固定</div></div></body></html>

【Css\flex】css中关于弹性布局flex的综合用法（示例展示）相关推荐

  1. CSS 的弹性布局(flex) ，是什么？

    一.弹性布局 是什么? 元素根据窗口大小变化而自动伸长或缩短,使得整个页面格式保持不变. 二.怎么使用? 1.使用方法 /* 1.父元素中增加 display 属性:*/ display: flex; ...

  2. css布局之弹性布局flex

    1. 弹性布局作用 作用:弹性布局flex能按照我们的设置自动计算各子元素之间的间距并将之布局好,而不需要像定位那样手动计算布局. 2.弹性布局的定义和属性 弹性布局是定义在一个父容器中,加上disp ...

  3. 弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content

    弹性布局(flex布局.伸缩布局) 一.什么是弹性布局 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为fl ...

  4. CSS3/ 弹性布局flex

    需知: flex布局表示弹性布局 任何一种元素都可以设置且当它设置 display:flex ,则开启了弹性布局,它成为弹性容器,它的所有子元素成为待排布的项目 开启弹性布局后,容器内待排布的项目的f ...

  5. 关于弹性布局flex

    @HelloZxy9527flex弹性布局的使用 关于弹性布局的简介 在之前的学习中,对页面布局有了大概的了解,发现许多页面的布局都是遵循几个盒子水平排列,或是竖直排列:竖直排列还好,水平方向则需要使 ...

  6. 弹性布局(Flex布局)

    弹性布局(Flex布局) 文章目录 弹性布局(Flex布局) 绪论 Flex布局是什么? Flex布局的基本概念 Flex容器的属性 以下六个属性设置在Flex容器上 flex-direction属性 ...

  7. (二)弹性布局Flex

    弹性布局Flex 本周在逆战班学习了布局方面的知识,作为前端开发布局是最关键的,此文章用来写自己对弹性布局知识点的理解,和想法, 弹性布局分为两部分父元素和子元素,在父元素上设置弹性布局而控制子元素 ...

  8. Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow

    用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...

  9. CSS3多列布局 columns 弹性布局 flex

    多列布局columns 多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局. 属性 示例 含义 column-count column-count: 3; 将元素内部分割成3 ...

最新文章

  1. 基于线段的激光雷达和单目联合曲面重建
  2. 程序员做产品需要知道
  3. LeetCode-77-Combinations
  4. oracle12c不能进入到http://localhost:1158/em的解决办法
  5. leetcode 58. Length of Last Word 题解【C++/Java/Python/JS】
  6. systemctl常用命令
  7. 程序员美团面试挂了，7天后去腾讯面试，见到面试官：好巧啊！！
  8. php 添加透明水印,php加水印的代码(支持半透明透明打水印，支持png透明背景)
  9. oracle的LAG和LEAD分析函数
  10. ansile(2)模块之get_url
  11. Log4j.properties 属性详解以及 LOG4J日志级别详解
  12. C# NModbus4 TCP 主从站通信样例
  13. Linux下串口编程总结
  14. 多核cpu与多线程理解
  15. android 模拟器监听短信,android模拟器用命令和DDMS模拟来电和短信
  16. Windows 10更新 virtualbox（应用）不兼容问题（isn‘t compatible with Windows 10）
  17. jQuery日历插件FullCalendar使用方法
  18. 旅行app(游记、攻略、私人定制) | 顺便游旅行H5移动端实例
  19. 在endnote中做笔记
  20. 宁波计算机程序初赛,宁波市27届中小学生计算机程序设计竞赛初赛在鄞州实验中学举行...

热门文章

  1. ZyLob.Ali1688.Op 阿里巴巴 开发平台SDK
  2. Human Brain Mapping：基于BOLD-Delay的脑灌注成像
  3. CRM成功的关键是以客户为中心
  4. 基于JAVA大学生心理健康系统计算机毕业设计源码+系统+lw文档+部署
  5. 装修前必看系列|冰箱也有大学问，万元级冰箱选购攻略
  6. 6-8 在数组中查找指定元素 (15 分)
  7. winform怎样设置comboBox默认值
  8. 乒乓球比赛人员对战比赛名单
  9. 网络IO之NIO的演变过程
  10. 前端项目开发经验总结（持续更新）