转载于：https://blog.csdn.net/weixin_41342585/article/details/80140513

1. flex-direction：设置伸缩容器中成员的排列方式

2. justify-content：用来指定主轴的对齐方式

3. align-items：用来指定侧轴的对齐方式

4. align-content：用来控制换行堆叠的元素

  1. flex-start 起始点对齐

  2. flex-end 终止点对齐

  3. center 居中对齐

  4. space-around 各行平均分布

  5. space-between 两端对齐

  6. stretch 拉伸

5. align-self：（用于处于伸缩布局的子元素，覆盖伸缩盒子的align-items属性）

6. flex伸缩比例

7. flex-wrap： 控制伸缩盒子里面的元素是否换行

nowrap————不换行（默认值） 
不换行情况下，当成员的总宽度超出容器的宽度时，成员的宽度会发生改变

wrap——————换行 
换行情况下，成员的总宽度超出容器的宽度时，会自动换行，不会影响成员的宽度

8. order： 用来控制伸缩布局盒子的子元素的顺序

CSS 伸缩布局的更多相关文章

  1. CSS伸缩布局

    1. 伸缩布局应用: 伸缩布局应用 主轴: Flex容器的主轴用来配置Flex项目,默认是水平方向 侧轴: 与主轴垂直的轴称为侧轴,默认还是垂直方向 方向: 默认是主轴从左向右, 侧轴默认是从上到下 ...

  2. CSS 小结笔记之伸缩布局 (flex)

    CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...

  3. css学习_css3伸缩布局 flex布局

    1.flex布局 案例一: 案例二:   保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例  -----用fle ...

  4. CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

    新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域 ...

  5. CSS3伸缩布局Flex学习笔记

    如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...

  6. 第 29 章 CSS3 弹性伸缩布局[上]

    学习要点: 1.布局简介 2.旧版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．布局简介 CSS3 提供一种崭新的 ...

  7. CSS3弹性伸缩布局（二）——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  8. flexbox 伸缩布局盒

    Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计. Flexbox 由 伸缩容器 和 伸缩项目 组成.通过设置元素的 display 属性为   ...

  9. CSS3弹性伸缩布局（上）——box布局

    布局简介 CSS3提供了一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box)用来提供一个更加有效的方式实现响应式布局. 由于这种布局还处于W3C的草案阶段,并且它分为 ...

随机推荐

  1. 实现一个vue的图片预览插件

    vue-image-swipe 基于photoswipe实现的vue图片预览组件 安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...

  2. node.js（二）各种模块

    我们知道Node.js适合于IO密集型应用,不适合于CPU密集型应用.    JS和Node.js区别:         JS运行于客户端浏览器中,存在兼容性问题:数据类型:值类型+引用类型(ES+D ...

  3. 如何用Excel打开CSV文件

    如何用Excel打开CSV文件? CSV文件一般是MS-SQL 导出查询数据的一种格式.格式结构是 用逗号分隔数据,如果直接用Excel打开那么数据不会自动分列.需要进行一定的设置.下面是设置过程. ...

  4. GenericServlet vs HttpServlet

     1>>>>>>>> Difference between HttpServlet vs Generic Severlet javax.servlet. ...

  5. 将数组对象转换成DataSet

    public static DataSet ObjectArrayToDataSet(object[] objArr) { if (objArr.Length == 0) return null; D ...

  6. php的一些误解

    1.php函数和方法是不用的:类的方法可以设定访问权限,需要通过对象或者类来调用:函数是公共的,都可以使用.

  7. docker search

    命令:docker search [root@iZ943kh74qgZ ~]# docker search --help Usage: docker search [OPTIONS] TERM Sea ...

  8. Linux用户、群组和权限命令总结

    新建用户natasha,uid为1000,gid为555,备注信息为“master”   groupadd -g 555 natasha useradd -u 1000 -g 555 -c maste ...

  9. Directx11学习笔记【八】 龙书D3DApp的实现

    原文:Directx11学习笔记[八] 龙书D3DApp的实现 directx11龙书中的初始化程序D3DApp跟我们上次写的初始化程序大体一致,只是包含了计时器的内容,而且使用了深度模板缓冲. D3 ...

  10. 洛谷P3286 [SCOI2014]方伯伯的商场之旅

    题目:洛谷P3286 [SCOI2014]方伯伯的商场之旅 思路 数位DP dalao说这是数位dp水题,果然是我太菜了... 自己是不可能想出来的.这道题在讲课时作为例题,大概听懂了思路,简单复述一 ...