CSS弹性布局(display:flex)

参考：

http://www.runoob.com/w3cnote/flex-grammar.html

https://www.jianshu.com/p/5856c4ae91f2

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

https://www.cnblogs.com/xuyuntao/articles/6391728.html

主要内容：

父级：

    display:flex;

    (兼容绝大部分浏览器)：-webkit-     真实工作下使用postCss插件-自动添加浏览器兼容

    display: -webkit-flex; /* Safari */

    display: flex;

    *如果使用了弹性布局，子元素不需要使用浮动float

    父级身上的常用属性：

        justify-content：    子元素水平排列

            flex-start（默认）    从左开始

            flex-end    从右开始

            center    居中！！

            space-between    两端对齐

            space-around    子元素张开手分布

        align-items        子元素垂直排列

            flex-start（默认）    从上开始

            flex-end    从下开始

            center    居中！！

            stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

            baseline: 项目的第一行文字的基线对齐

        align-content        多行子元素垂直排列

            flex-start：        与交叉轴的起点对齐。

            flex-end：            与交叉轴的终点对齐。

            center：            与交叉轴的中点对齐。

            space-between：     与交叉轴两端对齐，轴线之间的间隔平均分布。

            space-around：        每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

            stretch（默认值）：    轴线占满整个交叉轴。

        flex-flow（基本不用，面试可能会提到）

            flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

            flex-flow: <flex-direction> <flex-wrap>;

            举例：flex-flow:column wrap;

        flex-direction    子元素排列方向

            row（默认值）：主轴为水平方向，起点在左端。

            row-reverse：主轴为水平方向，起点在右端。

            column：主轴为垂直方向，起点在上沿。

            column-reverse：主轴为垂直方向，起点在下沿。

        flex-wrap        子元素一行排不下如何换行

            nowrap（默认）：不换行

            wrap：换行，第一行在上方

            wrap-reverse：换行，第一行在下方

    子集身上的属性：

        flex    是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

            将行分为定义比例的几份

            *子元素在划分父元素宽度，先刨除固定宽度

        align-self        允许单个子元素有与其他项目不一样的垂直对齐方式，可覆盖align-items属性

            .item {

                align-self: auto | flex-start | flex-end | center | baseline | stretch;

                    }

        flex-grow        定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大

            .item {

                flex-grow: <number>;     /* default 0 */        <number>只代表缩放系数

                    }

        order        定义子元素的排列顺序。数值越小，排列越靠前，默认为0

            .item {

                  order: <integer>;

                }

练习案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>flex布局案例-淘宝底部导航栏</title>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .footer-nav{

            width: 100%;

            height: 60px;

            background-color: grey;

            display: flex;

            position: absolute;

            left: 0;

            bottom: 0;

        }

        .footer-nav .tab{

            width: 20%;

            box-sizing: border-box;

            border-left: 1px solid red;

            flex: 1;

            text-align: center;

            line-height: 30px;

            font-size: 16px;

            color: white;

        }

        .footer-nav .tab .tab-icon{

           height: 30%;

        }

    </style>

</head>

<body>

<div class="footer-box">

<div class="footer-nav">

    <span class="tab">

        <span class="tab-icon glyphicon glyphicon-home"></span>

        <p class="text">首页</p>

    </span>

    <span class="tab">

        <span class="tab-icon glyphicon glyphicon-shopping-cart"></span>

        <p class="text">购物车</p>

    </span>

    <span class="tab">

        <span class="tab-icon glyphicon glyphicon-list-alt"></span>

        <p class="text">订单列表</p>

    </span>

    <span class="tab">

        <span class="tab-icon glyphicon glyphicon-user"></span>

        <p class="text">我的淘宝</p>

    </span>

    <span class="tab">

        <span class="tab-icon glyphicon glyphicon-option-horizontal"></span>

        <p class="text">更多</p>

    </span>

    <span class="tab">

        <span class="tab-icon glyphicon glyphicon-grain"></span>

        <p class="text">欢度清明</p>

    </span>

</div>

</div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="style/flex-1.css">

</head>

<body>

    <div class="outer">

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

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

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

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

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

        <div class="item">6</div>

        <div class="item">7</div>

    </div>

</body>

</html>

HTML代码

*{

    margin:;

    padding:;

    list-style: none;

}

.outer{

    width: 500px;

    height: 500px;

    border: 1px solid red;

    margin: 30px auto;

    display: flex;

    flex-wrap: wrap;

    align-content:flex-start;

}

.item{

    width: 125px;

    border: 1px solid #ff1bbe;

    background-color: #0D47A1;

    height: 125px;

    box-sizing: border-box;

    font-size: 32px;

    color: white;

    line-height: 125px;

    text-align: center;

    align-content: flex-start;

}

css代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .outer {

            width: 500px;

            height: 500px;

            border: 1px solid red;

            margin: 30px auto;

            display: flex;

            flex-wrap: wrap;

            align-content: flex-start;

        }

        .item {

            border: 1px solid #ff1bbe;

            background-color: #0D47A1;

            height: 125px;

            box-sizing: border-box;

            font-size: 32px;

            color: white;

            line-height: 125px;

            text-align: center;

        }

        .div1{width: 80px}

        .div2{flex: 1}

        .div3{flex: 2}

    </style>

</head>

<body>

    <div class="outer">

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

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

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

    </div>

</body>

</html>

<!DOCTYPE=html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>

关于文档元素测试

</title>

<style>

#father{

    width:200px;

    display:flex;

    flex-direction:row;

    flex-wrap:wrap;

    align-content:center;

    height:200px;

    background-color:grey;

}

.son1{

    height:30px;

    width:100px;

    background-color:orange;

}

.son2{

    height:30px;

    width:100px;

    background-color:red;

}

.son3{

    height:30px;

    width:100px;

    background-color:#08a9b5;

}

.son4{

    height:30px;

    width:100px;

    background-color:#9ad1c3;

}

.son5{

    height:30px;

    width:100px;

    background-color:rgb(21,123,126);

}

</style>

</head>

<body>

<div id="father">

    <div class="son1">q</div>

    <div class="son2">w</div>

    <div class="son3">e</div>

    <div class="son4">e</div>

    <div class="son5">e</div>

</div>

</body>

</html>

flex布局换行空白间隙之align-content

参考：https://blog.csdn.net/txfyteen/article/details/82663029

CSS弹性盒布局(display:flex)的更多相关文章

  1. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  2. 弹性盒模型display:flex

    Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...

  3. 弹性盒布局（flex）

    一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...

  4. CSS弹性盒布局

    <html> <head> <meta charset="utf-8"/> <title></title> <st ...

  5. 弹性盒布局详解(display: flex;)

    弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...

  6. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

  7. css笔记 - flex弹性盒布局

    flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...

  8. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  9. 弹性盒模型，flex布局

    弹性盒模型   弹性盒子是css3的一种新布局模式,由容器(父元素)和项目(子元素)组成. 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒模型的 ...

随机推荐

  1. golang编译库文件方式

    // as c-shared library $ go build -buildmode=c-shared -o nautilus.a nautilus.go // as c-archive $ go ...

  2. 【C#】C#线程_I/O限制的异步操作

    目录结构: contents structure [+] 为什么需要异步IO操作 C#的异步函数 async和await的使用 async和Task的区别 异步函数的状态机 异步函数如何转化为状态机 ...

  3. 物联网架构成长之路(26)-Docker构建项目用到的镜像2

    0. 前言 前面介绍的都是一些标准的第三方中间件,基本都是有现成的Dockerfile或者Image,不需要我过多的关心,这一篇要介绍一些自己构建的Docker Image了.刚开始学,Dockerf ...

  4. 【原创 Hadoop&Spark 动手实践 10】Spark SQL 程序设计基础与动手实践（下）

    [原创 Hadoop&Spark 动手实践 10]Spark SQL 程序设计基础与动手实践(下) 目标: 1. 深入理解Spark SQL 程序设计的原理 2. 通过简单的命令来验证Spar ...

  5. php项目踩到的empty函数的一个坑

    报错信息: PHP Fatal error: Can't use function return value in write context in /目录省略.../XXService.php on ...

  6. 流媒体之HLS——综述

    [时间:2018-01] [状态:Open] [关键词:流媒体,stream,HLS] 0 HLS背景及初衷 HLS是由苹果公司发起的流媒体网络传输协议,可参考rfc8261 HTTP Live St ...

  7. 【OCR技术系列之七】端到端不定长文字识别CRNN算法详解

    在以前的OCR任务中,识别过程分为两步:单字切割和分类任务.我们一般都会讲一连串文字的文本文件先利用投影法切割出单个字体,在送入CNN里进行文字分类.但是此法已经有点过时了,现在更流行的是基于深度学习 ...

  8. centos7.3安装nvidia驱动和cuda9

    一, 挂载本地源镜像 1) 下载操作系统镜像 所有服务器操作系统必须统一,本平台只支持 CentOS 7.3 1611,镜像下载地址. 2) 上传镜像到服务器 ,假设上传在 root 下 3) 建立挂 ...

  9. dos 打开计算机管理

    一. 首先打开[运行]程序:二. 运行中输入‘CMD’:三. 然后在上面输入‘compmgmt.msc’,就可以打开“计算机管理”命令了.

  10. Golang遇到的一些问题总结

    当类成员是struct指针.map.slice 时,默认初始化的值是 nil,在使用前需要提前初始化,否则会报相关的 nil 错误.引用类型的成员,默认会初始化为 nil,但对 nil 的切片进行 l ...