<!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. 浏览器中使用 ES6 import

    html 中的 head 标签引入: <script src="test.js" type="module"></script> tes ...

  2. PAT 甲级 1104 sum of Number Segments

    1104. Sum of Number Segments (20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CAO, Pen ...

  3. util 常用方法

    C:\Program Files\Java\jdk1.8.0_171\src.zip!\java\lang\System.java /** * Returns the current time in ...

  4. C程序编译过程浅析（转）

    前几天看了<程序员的自我修养——链接.装载与库>中的第二章“编译和链接”,主要根据其中的内容简单总结一下C程序编译的过程吧. 我现在一般都是用gcc,所以自然以GCC编译hellworld ...

  5. UEFI,BIOS,MBR,

    UEFI启动是一种新的主板引导项,正被看做是有近20多年历史的BIOS 的继任者.顾名思义,快速启动是可以提高开机后操作系统的启动速度.由于开机过程中UEFI的介入 第一:安全性更强 UEFI启动需要 ...

  6. 并发编程 - 协程 - 1.协程概念/2.greenlet模块/3.gevent模块/4.gevent实现并发的套接字通信

    1.协程并发:切+保存状态单线程下实现并发:协程 切+ 保存状态 yield 遇到io切,提高效率 遇到计算切,并没有提高效率 检测单线程下 IO行为 io阻塞 切 相当于骗操作系统 一直处于计算协程 ...

  7. （0.2.3）Mysql安装——二进制安装

    Linux平台下二进制方式安装卸载mysql 本章节:二进制安装mysql 目录: 1.基于Linux平台的Mysql项目场景介绍 2.mysql数据库运行环境准备-最优配置 3.如何下载mysql数 ...

  8. 前端 javascript 变量

    变量: python: name = 'alex' JavaScript: name = 'alex' # 全局变量 声明var var name = 'eric' # 局部变量 写全局变量基本好少J ...

  9. J.U.C Atomic（二）基本类型原子操作

    java.util.concurrent.atomic包中对基本类型进行原子操作的类有:AtomicInteger.AtomicBoolean.AtomicLong. 下面通过一个测试程序来验证一下A ...

  10. 我的第一次NGS分析操作

    部分参考自:生物信息学100个基础问题 —— 番外2: 用Anaconda快速搭建生物信息学分析平台 - 孟浩巍的文章 - 知乎 https://zhuanlan.zhihu.com/p/357114 ...