<!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. WEB项目中使用UEditor(富文本编辑器)

    Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...

  2. where both the key and the value are strings

    Environment Variables (The Java™ Tutorials > Essential Classes > The Platform Environment) htt ...

  3. B. Mike and Fun---cf548B（暴力求解）

    题目链接:http://codeforces.com/problemset/problem/548/B 有一个n*m的矩阵,里面只有0和1,现在有Q个改变,每次都把(x,y)这点变为相反的点(0变1, ...

  4. PHP魔术方法和魔术常量介绍及使用

    魔术方法(Magic methods) PHP中把以两个下划线__开头的方法称为魔术方法,这些方法在PHP中充当了举足轻重的作用. 魔术方法包括: __construct(),类的构造函数 __des ...

  5. 如何制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果

    今天我们来实现烟雨+飞雪效果.首先来说,一款经典的RPG游戏难免需要加入天气的变化.那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它. 本文为该系列文章的第二篇,如果想了解以前的文章可以看 ...

  6. PAT 1093 Count PAT's[比较]

    1093 Count PAT's (25 分) The string APPAPT contains two PAT's as substrings. The first one is formed ...

  7. one hot coding -机器学习

    机器学习 数据预处理之独热编码(One-Hot Encoding) 问题由来 在很多机器学习任务中,特征并不总是连续值,而有可能是分类值. 例如,考虑一下的三个特征: ["male" ...

  8. 实现：左边为菜单导航，当一个菜单中包含多个Tabs，并且不同的Tab要根据权限的不同显示。

    1.前台代码 //当点击左侧菜单时,将访问Controller中的Home方法,这样就会根据用户权限的不同,通过后台的判断来决定显示的页面<li class="@(ViewBag.Se ...

  9. C++必知必会

    C++ Common knowledge Essential Intermediate Programming C++必知必会 [美] StephenC.Dewhurst 著  荣耀 译  人民邮电出 ...

  10. Linux系统——awk命令

    awk命令不仅仅是Linux系统的命令,也是一种编程语言,用来处理数据和生成报告(Exel),处理的数据可以是一个或多个文件(标准输入和管道获取标准输入).可在命令行上编辑操作,也可以写成awk程序运 ...