<!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. 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners

    偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...

  2. 基于k8s的promethus监控

    没有监控 就没有眼睛. 除了k8s的基本监控外(pod运行状况.占用内存.cpu).为了对微服务项目中的(1)各种参数线程池.QPS.RT.业务指标(2)系统负载.thread.mem.class.t ...

  3. FZU 2140 Forever 0.5（找规律，几何）

    Problem 2140 Forever 0.5 Accept: 371 Submit: 1307 Special Judge Time Limit: 1000 mSec Memory Limit : ...

  4. HDU2842—Chinese Rings

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2842 题目意思:一把一个n连环的前n个拿下来,一个个n连环,要把第k个拿下来,需要把前n-2个拿下来, ...

  5. null array mysqli_fetch_assoc ( mysqli_result $result ) void mysqli_free_result ( mysqli_result $result )

    w取最大db_id. if($row=null){ var_dump(123); } var_dump($row); if($rowb=array('ww','w123')){ var_dump(23 ...

  6. IBM DEVOPS IN CLOUD--chaos monkey

  7. Apache Kafka源码分析 – ReplicaManager

    如果说controller作为master,负责全局的事情,比如选取leader,reassignment等那么ReplicaManager就是worker,负责完成replica的管理工作 主要工作 ...

  8. 前端开发 - HTML - 简介

    一.web1.0时代的网页制作 静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为"牛皮癣"网页.例如一篇QQ日志.一篇博文等展示性文章. 网页三剑 ...

  9. Ponds----hdu5438（拓扑排序）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5438   题意:有n个池塘和m个管道:每个池塘的价值是v, 现在由于资金问题要删除池塘:但是删除的池塘 ...

  10. Python并行编程(八)：with语法

    1.基本概念 当有两个相关的操作需要在一部分代码块前后分别执行的时候,可以使用with语法自动完成.同时,使用with语法可以在特定的地方分配和释放资源,因此,with语法也叫作"上下文管理 ...