转载于：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. ORACLE 最后表数据更新的时间

    SELECT SCN_TO_TIMESTAMP(MAX(ora_rowscn)) from myTable;

  2. 删除重复节点 Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  3. k8s 超详细总结，面试必问

    一个目标:容器操作:两地三中心:四层服务发现:五种Pod共享资源:六个CNI常用插件:七层负载均衡:八种隔离维度:九个网络模型原则:十类IP地址:百级产品线:千级物理机:万级容器:相如无亿,K8s有亿 ...

  4. Directx教程(29) 简单的光照模型(8)

    原文:Directx教程(29) 简单的光照模型(8)      现在我们新建一个工程myTutorialD3D_23,在这个工程中,对前面一章的代码进行一些整理: 1.我们在顶点属性中增加材质的的漫 ...

  5. 使用virtualenv使得Python2和Python3并存

    1:下载python3源码并安装 wget https://www.python.org/ftp/python/3.6.4/Python-3.6.4.tgz .tgz cd Python-.tgz . ...

  6. Android Binder设计与实现 – 设计篇

    摘要 Binder是Android系统进程间通信(IPC)方式之一.Linux已经拥有管道,system V IPC,socket等IPC手段,却还要倚赖Binder来实现进程间通信,说明Binder ...

  7. IIS 设置 FTP 服务器 添加多个账户

    我们有很多童鞋经常开不动IIS自带的FTP如何创建,就算创建了也不会实现多用户,下面我来分享一下我的经验吧: 使用 IIS 设置 FTP 服务器 依次单击“开始”按钮.“控制面板”和“添加或删除程序” ...

  8. Oracle使用——Oracle表字段的增加、删除、修改和重命名

    增加字段 语法 alter table tablename add (column datatype [default value][null/not null]); 说明:alter table 表 ...

  9. ubuntu 代理配置

    1.安装Python 2.安装shadowsocks客户端 sudo pip install shadowsocks 3.配置shadowsocks客户端配置 vim /etc/shadowsocks ...

  10. phpexcel使用说明3

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...