<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Flex</title>

    <style>

        .box {

            width: 400px;

            display: flex;

            /*flex-wrap: wrap-reverse;*/

            margin: 20px;

            line-height: 40px;

            font-size: 20px;

            color: #fff;

            background: #963297;

        }

        .item {

            width: 300px;

            margin: 10px;

            padding: 0 12px;

            line-height: 40px;

            text-align: center;

            background-color: #c99702;

        }

    </style>

</head>

<body>

    <div class="box">

        <!-- 只有在文档流中的子元素才是弹性元素 -->

        <div class="item item-1">1</div>

        <div class="item item-2">2</div>

        <div class="item item-3">3</div>

        <div class="item item-4">4</div>

        <div class="item item-5">5</div>

        <!-- <div>

            <div>grandson</div>

        </div> -->

    </div>

    <!--

    1. 方向

    (1) flex-direction: row | row-reverse | column | column-reverse

    (2) flex-wrap: nowrap | wrap | wrap-reverse

    (3) flex-flow: <'flex-direction'> || <'flex-wrap'>

    (4) order: <interger> (相对值)

    2. 弹性

    (1) *flex-grow: <number> initial:0 设置元素能够分到的剩余空间

        弹性布局的元素宽度 = flex-basis + flow-grow/wum(flow-grow)*remain

    (2) flex-shrink: <number> initial:1

    (3) flex-basis: main-size | <width> 设置flex item的初始宽/高

    (4) flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>

        flex: 1 1 0;

    3. 对齐

    (1) justify-content: flex-start | flex-end | center | space-between | space-around (设置主轴方向上的对齐方式(间隔分配方式))

    (2) align-items: flex-start | flex-end | center | baseline | stretch (设置辅轴方向上对齐方式)

    (3) align-self: auto | flex-start | flex-end | center | baseline | stretch (设置单个flex item在辅轴方向上的对齐方式)

    (4) align-content: felx-start | flex-end | center | space-between | space-around | stretch (设置辅轴方向上的行对齐方式) （出现多行时，容器上出现剩余空间）

    -->

</body>

</html>

更新一张笔记图：

flex 的总结的更多相关文章

  1. OpenCASCADE Expression Interpreter by Flex & Bison

    OpenCASCADE Expression Interpreter by Flex & Bison eryar@163.com Abstract. OpenCASCADE provide d ...

  2. Flex 布局教程：语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  3. Flex 布局教程：实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  4. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  5. Flexible 弹性盒子模型之flex

    实例 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟 ...

  6. 信息系统实践手记6-JS调用Flex的性能问题一例

    说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题.笔者对其中比较典型的加以收集,描述,归纳和分享. 摘要:此文描述了笔者接触过的部分信息系统 ...

  7. flex自适应高度内容高度超出容器高度自动出现滚动条的问题

    在容器中设置 flex-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应. 内容高度不固定,无法出现滚动条,然后在容器中添加height:0,出现滚动 ...

  8. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  9. flex学习小结

    接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...

  10. flex实验总结

    1.父元素 .box{ display:flex; flex-direction: column;//铺满垂直排列 flex-direction: column-reverse;//铺满垂直反向排列 ...

随机推荐

  1. 利用脚手架vue cli搭建vue项目

    vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装n ...

  2. 160427、CSS3实战笔记--多列布局

    通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5   多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...

  3. CMS 收集器整理

    基本说明: 目标:获取最短回收停顿时间 算法:标记-清除算法 线程:并发 步骤: 初始标记:(会STP) 标记一下 GC Roots 能直接关联到的对象,速度很快 并发标记:(耗时最长,且可与用户线程 ...

  4. Oracle的启动与关闭

    启动数据库的前提条件: 环境变量定义好($ORACLE_HOME,$ORACLE_SID,$PATH) 能密码文件认证或OS认证(确保能登入sys) 有正确的参数文件(启动数据库需要查找参数文件,默认 ...

  5. 第六周小组作业 软件测试与评估：百词斩VS扇贝单词

    被测产品说明: A:百词斩 B:扇贝单词 一.基本任务 1.测试进度表 | 项目 | 内容说明 | 预估耗时(分钟) | 实际耗时 (分钟) | | -------------- | -------- ...

  6. 并发编程 - 线程 - 1.开启线程的两种方式/2.进程与线程的区别/3.Thread对象的其他属性或方法/4.守护线程

    1.开启线程的两种方式: 进程,线程: 进程只是用来把资源集中到一起(进程只是一个资源单位,或者说资源集合)而线程才是cpu上的执行单位) 1.同一个进程内的多个线程共享该进程内的地址资源 2.创建线 ...

  7. RESTful API 设计最佳实践【转】

    背景 目前互联网上充斥着大量的关于RESTful API(为了方便,后面API和RESTful API 一个意思)如何设计的文章,然而却没有一个“万能”的设计标准:如何鉴权?API格式如何?你的API ...

  8. html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

    开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...

  9. 在android上跑 keras 或 tensorflow 模型

    https://groups.google.com/forum/#!topic/keras-users/Yob7mIDmTFs http://talc1.loria.fr/users/cerisara ...

  10. SDUT3141：Count（哈希）好题

    题目:传送门 题目描述 You are given an integer array s[] and are asked to count how many positions a, b, c and ...