转载于：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. onethink上传到服务器（或者迁移）后台登录验证码错误问题

    修改Application\User下面的配置文件config.php, 改成对应服务器上的参数 define('UC_DB_DSN', 'mysqli://root:root@127.0.0.1:3 ...

  2. 深入浅出Cocoa 之动态创建类【转】

    在前文<深入浅出Cocoa之类与对象>一文中,我已经详细介绍了ObjC中的 Class 与 Object 的概念,今天我们来如何在运行 时动态创建类.下面这个函数就是应用前面讲到的Clas ...

  3. 深入理解 Node.js 进程与线程

    原文链接: https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651557398&idx=1&sn=1fb991da ...

  4. 【JZOJ4858】【GDOI2017模拟11.4】Walk

    题目描述 在比特镇一共有n 个街区,编号依次为1 到n,它们之间通过若干条单向道路连接. 比特镇的交通系统极具特色,除了m 条单向道路之外,每个街区还有一个编码vali,不同街区可能拥有相同的编码.如 ...

  5. day4-转自金角大王

    Python之路,Day4   本节大纲 迭代器&生成器 装饰器  基本装饰器 多参数装饰器 递归 算法基础:二分查找.二维数组转换 正则表达式 常用模块学习 作业:计算器开发 实现加减乘除及 ...

  6. BZOJ2802Warehouse Store题解

    链接 我太菜了,连贪心题都不会写... 贪心思路很简单,我们能满足顾客就满足他,如果满足不了,就看之前的顾客中 有没有需求比该顾客多的顾客,如果有的话改为卖给这位顾客会使解更优 所以我们用一个优先队列 ...

  7. List容器-LinkedList链表

    LinkedList--链表 特点: 删除,增加 用LinkedList性能高  层次查找不适合       查询用ArrayList  数组下标查找  插入和删除慢缺点是要做移位操作 总结:Link ...

  8. Flask 第二篇

    Flask 中的 Render Redirect HttpResponse 1.Flask中的HTTPResponse 在Flask 中的HttpResponse 在我们看来其实就是直接返回字符串 2 ...

  9. Spring Boot错误——SpringBoot 2.0 报错: Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.

    背景 使用Spring Cloud搭建微服务,服务的注册与发现(Eureka)项目启动时报错,错误如下 *************************** APPLICATION FAILED T ...

  10. APP UI设计趋势：为好设计而动

    http://www.cocoachina.com/design/20150703/12029.html 作者:bone9 善心悦目的动效已然成为一个app的必备,作为设计师自然要跟随趋势学习.APP ...