转载于：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. JSP Web第六章整理复习 JavaBean技术

    P183 什么是JavaBean,JavaBean有哪些特点? javabean是一种特殊的java类 特点:属性private,方法public P184 JavaBean封装数据,例6-1,6-2 ...

  2. pymysql.err.OperationalError: (2013, 'Lost connection to MySQL server during query')

    pymysql错误: pymysql.err.OperationalError: (2013, 'Lost connection to MySQL server during query') pymy ...

  3. QLabel添加Click信号

    使用自定义label来实现此功能 其他控件可参照此例. #include "customerqlabel.h" CustomerQlabel::CustomerQlabel(QWi ...

  4. web框架起源

    web框架 python三大主流web框架 django 大而全,自带的组件和功能极多, 缺点:写小项目时候会比较笨重(杀鸡用牛刀),大并发不行,3000撑死 flask 小而精 自带的组件和功能极少 ...

  5. ajax嵌套陷阱

    ajax嵌套陷阱 $('.ajaxupd').click(function () { $('.shadow1').show(); $('.update').show(); var tds=$(this ...

  6. vue_qqmapdemo1

    腾讯地图vue组件,实现异步加载腾讯地图,坐标拾取器,支持按城市名称搜索. 搜索框样式依赖elementUI,不需要可删除顶部,地图部分无依赖项 //qqmap.vue <template> ...

  7. python 文本文件的读取

  8. C#面向对象基础 —— 类与对象

    文章来源: https://www.cnblogs.com/huluobozu/p/5070500.html 一.类与对象 类是面向对象编程的基本单元:类造出来的变量叫对象. 一个类包含俩种成员:字段 ...

  9. python for 循环结构

  10. 是时候了解React Native了

    文章首发于简书,欢迎关注 随着科技的发展,手机开发也在向好的方向不停的转变.IOS和Android两大手机操作横空出世,称霸江湖.我们每开发一个手机软件最少都需要开发这两个终端. 两大操作系统都在不断 ...