<!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. Block Formatting Contexts (块级格式化上下文) 使用参考

    转自:http://kayosite.com/block-formatting-contexts-in-detail.html 在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ...

  2. Netty in action—Netty中的ByteBuf

    Netty in action—Netty中的ByteBuf - 日积月累 - CSDN博客 https://blog.csdn.net/yjw123456/article/details/77843 ...

  3. mysql备份总结

    w汇总对比. mysqldump -u user -p wdbname > /www/wbak.sql pwd CREATE TABLE wbak_w_02071349 LIKE w; INSE ...

  4. JUnit4.12 源码分析之TestClass

    1. TestClass // 源码:org.junit.runners.model.TestClass // 该方法主要提供方法校验和注解搜索 public class TestClass impl ...

  5. 前端 javascript 数据类型 数组 列表

    javascript数组相当于python的列表 创建列表 a = [1,2,3,4]; [1, 2, 3, 4] 获取列表长度 a = [1,2,3,4]; [1, 2, 3, 4] a.lengt ...

  6. 初识Java集合框架（Iterator、Collection、Map）

    1. Java集合框架提供了一套性能优良.使用方便的接口和类,它们位于java.util包中 注意: 既有接口也有类,图中画实线的是类,画虚线的是接口 使用之前须要到导入java.util包 List ...

  7. js-jquery-003-条形码-二维码【QR码】

    一.基本使用 插件地址:https://github.com/jeromeetienne/jquery-qrcode 1.首先在页面中加入jquery库文件和qrcode插件. <script ...

  8. 17.出现fatal signal(SIGSEGV),code 1,fault addr 0x0 in tid 29931的问题

    原因是: 在onCreate方法里面调一些东西的时候,有时候系统相关的东西还没有初始化完,你的代码就已经执行了,会出现一些问题  解决方法: 增加延时1s /一.第一步初始化,此处用的是demo的ap ...

  9. intellij idea 重命名或复制一个项目(不用重启)

    Idea 内无法直接修改Explorer 里文件夹的名称,只能手动改文件夹的名称. 目前找到的最好的方法: 1)重命名一个项目 在Idea 项目关闭状态下,在 Explorer (Windows) / ...

  10. CentOS 7中使用iptables

    1.关闭firewall systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止fir ...