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

随机推荐

APP微信支付Java后台的实现（springmvc）
第一次做微信支付,阅读完开发文档后,下了个官方demo,摸索了好久,期间也出现了好多问题,终于是实现生成预支付订单以及支付成功后接收微信服务器通知,不多说了,直接上代码: 一.工具类 Constant ...
redis应用-sortedset实现排行榜(转载)
package site.zy9.redisApp.test; import java.util.HashMap; import java.util.List; import java.util.Ma ...
html input 文本框只能输入数字,包含输小数点.
<input type="text" id="source_tds" name="source_tds" value="&l ...
Springboot整合二集成 rabbitmq
1.在application.yml文件中进行RabbitMQ的相关配置先上代码 spring: rabbitmq: host: 192168.21.11 port: username: guest ...
SNF软件开发机器人-子系统-功能-数据录入方式
数据录入方式数据录入方式是指新增数据时是直接在列表上添加或者弹出表单增加数据. 1.效果展示: (1)列表 (2)表单弹出 2.使用说明: 打开显示页面,点击开发者选项的简单配置按钮.在功能表信息中 ...
在 java 开发接口中需要注意的问题
1 在开发过程中免不了对接上游或下游,有合作就要保证入参.出参的准确性.一个接口一般只能处理有限情况下的情况,因此在逻辑处理前要对入参进行校验. 2 在自己的逻辑处理过程中,要时刻持有怀疑的态度.假设 ...
新书出版 |《Oracle程序员面试笔试宝典》
新书出版 |<Oracle程序员面试笔试宝典> <Oracle程序员面试笔试宝典> 丛书[数据库面试笔试宝典]已在京东.淘宝和天猫预售,一共 5 本,目前市场上已有4本,丛 ...
鼠标交互插件threex.domevents介绍
threex.domevents是一个three.js的扩展库,支持3D场景的交互.和我们操作DOM树的事件相似,名称都是一样的.所以使用起来非常方便.另外他也提供了连接操作.单击网格可实现跳转功能. ...
媳妇要转java开发，我该怎么办？
我是一名5年的java开发者,媳妇是一个5年的软件实施工程师,我们结婚快一年了,这几天她突然对我说,她想转java开发,让我辅导她学习java,我该怎么弄,我心底是不愿意她转开发的,毕竟她年龄也不小了 ...
opencv利用Cascade Classifier训练人脸检测器
opencv默认提供了haar特征和lbp特征训练的人脸分类器,但是效果不太好,所以我们可以用opencv提供的跑opencv_traincascade函数来训练一个LBP特征的分类器.(由于open ...

CSS弹性盒布局(display:flex)

CSS弹性布局(display:flex)

练习案例：

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

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

随机推荐

热门专题