CSS弹性布局(display:flex)

参考：

主要内容：

父级：

    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)的更多相关文章

弹性盒布局display:flex详解
一:弹性盒子随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...
弹性盒模型display:flex
Flex布局意为"弹性布局",用来为盒模型提供更多灵活性.此外,Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex ...
弹性盒布局（flex）
一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...
CSS弹性盒布局
<html> <head> <meta charset="utf-8"/> <title></title> <st ...
弹性盒布局详解(display: flex;)
弹性盒布局详解弹性盒介绍弹性盒的CSS属性开启弹性盒弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...
css怪异盒模型和弹性盒布局(flex)详解及其案例
一.怪异盒模型怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...
css笔记 - flex弹性盒布局
flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...
CSS弹性盒模型(flex box)
本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...
弹性盒模型，flex布局
弹性盒模型弹性盒子是css3的一种新布局模式,由容器(父元素)和项目(子元素)组成. 弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒模型的 ...

随机推荐

一目了然了解JAVA集合体系
在编程中,常常需要集中存放多个数据.从传统意义上讲,数组是我们的一个很好的选择,前提是我们事先已经明确知道我们将要保存的对象的数量.一旦在数组初始化时指定了这个数组长度,这个数组长度就是不可变的,如果 ...
【PHP】解析PHP中的错误和异常处理
目录结构: contents structure [-] 错误级别自定义处理器设置异常日志自定义异常类在这篇文章中,笔者将会阐述PHP中的异常处理,希望能够对你有所帮助. 1.错误级别 PHP ...
【转载】Linux下查看CPU、内存占用率
不错的文章(linux系统性能监控--CPU利用率):https://blog.csdn.net/ctthuangcheng/article/details/52795477 在linux的系统维护中 ...
VNC Viewer 设置屏幕分辨率
1.第一种方法:使用geometry参数进行调整 vncserver -geometry 1280x1024即可,之后通过window下vnc连接后的ubuntu分辨率即为1280x1024了,注意这 ...
appium 报错
2018-11-27 18:05:56:313 - [Logcat] Logcat terminated with code 0, signal null 2018-11-27 18:05:56:31 ...
SQL Server does not purge row versioning records even the transaction are committed if there are other open transaction running in the databases with read-committed snapshot enabled .
This is a by-design behavior. There is only one allocation unit in tempdb that istracking the versio ...
SQL Server 2016新特性：Live Query Statistics
SSMS可以提供可以查看正在执行的计划.live query plan可以查看一个查询的执行过程,从一个查询计划操作到另外一个查询计划操作.live query plan提供了整体的查询运行进度和操作 ...
强化学习-时序差分算法（TD）和SARAS法
1. 前言我们前面介绍了第一个Model Free的模型蒙特卡洛算法.蒙特卡罗法在估计价值时使用了完整序列的长期回报.而且蒙特卡洛法有较大的方差,模型不是很稳定.本节我们介绍时序差分法,时序差分法不 ...
hdoj：2084
数塔 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...
怎样写一个PC端使用的操盘手软件（用来买卖股票，查看报表，行情）
我们想写一个操盘手软件,对于操盘而言,首先是快,然后是资料尽可能丰富,最好能看到行情,报表什么的.只是windows上写软件看似基础,实际上都不怎么好弄,用C++开发确实可以实现所有功能,估计光研发费 ...

CSS弹性盒布局(display:flex)

CSS弹性布局(display:flex)

练习案例：

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

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

随机推荐

热门专题