一、flex-direction（元素排列方向）

1、flex-direction:row；//从左到右排列

2、flex-direction:column；//从上往下排列

二、flex-wrap（内容一行容不下的时候才有效）

1、flex-wrap:nowrap //超出不换行，很奇怪里面的宽度会变成100%

2、flex-wrap:wrap //超出按父级的高度平分）

三、justify-content //水平对齐方式

1、justify-content:flex-start; （水平左对齐）

2、justify-content:flex-end; （水平右对齐）

3、justify-content:center; （居中对齐）

4、justify-content:space-between; （两端对齐）

5、justify-content:space-around; （两端对齐，并且两端有间距）

四、align-items （垂直对齐方式）

1、align-items:flex-start; （上对齐，和默认差不多）

1、align-items:flex-end; （下对齐）

1、align-items:center;（居中对齐）

以上是对flex的简单介绍。下面有个小例子，

大家经常用到的，某个div里面水平垂直居中，

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #box{

                display: flex;

                display: -webkit-flex;

                border: 1px solid #0000FF;

                height: 200px;

                width: 400px;

                align-items:center;

                justify-content:center;

            }

            .item{

                width: 50px;

                height: 40px;

                border: 1px solid #00C1B3;

            }

        </style>

    </head>

    <body>

        <div id="box">

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

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

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

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

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

        </div>

    </body>

</html>

flex 属性的更多相关文章

  1. flex属性

    一.flex属性的归纳 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.1 flex-di ...

  2. CSS3-flex弹性布局之flex属性

    flex属性 前置

  3. CSS布局学习（二） - flex属性

    flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...

  4. flexbox子盒子flex属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css属性之flex属性

    flex属性 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间.是一个简写属性,可以同时设置flex-grow, flex-shrink, flex-basis三个子属性. /* Basic ...

  6. css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记

    最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...

  7. 小程序flex属性两边边距自适应

    使用flex属性两边边距自适应解决方案   Justify-content:center   文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有 ...

  8. [20190618]日常学习记录(二)-flex属性及vue实战

    早上在看flex属性,总结一下它的优缺点 为什么使用flex, 她和浮动相比,代码更少.浮动要考虑左浮动右浮动,有时还要去清除浮动.flex一行代码就搞定了. 她更灵活,实现平均分配,根据内容大小分配 ...

  9. 伸缩容器-display：flex设置flex属性的理解

    1.flex属性 1.1 flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto. flex-grow: 定义项目的放大比例,默认为0,即 ...

  10. 详解 Flexible Box 中的 flex 属性

    导读: 弹性盒子是 CSS3 的一种布局模式,一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式.其中 flex 属性用于指定弹性子元素如何分配空间. flex 属性的值 ...

随机推荐

  1. [Redis-CentOS7]Redis哈希操作(五)

    哈希相当于下面Python代码 { "person":{ "name": "peigy", "age": "1 ...

  2. vue-cli项目传到服务器后打不开的问题

    1.vue-cli项目执行dev可以打开网站,直接点击文件或发布后却打不开的问题   webpack.prod.conf.js: output: { ....... publicPath:'./'  ...

  3. 对象级别锁 vs 类级别锁（Java）

    前言 对于多线程(并发)和Spring Boot这两块在同步进行学习中,在看到使用synchronized关键字使操作同步时,看到和C#中不一样的东西,所以这里呢,就深入学习了下,若有错误之处,还望指 ...

  4. SpringCloud学习之—Eureka集群搭建

    Eureka集群的搭建 上次说过了在SpringCloud应用中使用Eureka注册中心,用来对服务提供者进行服务注册与发现,但同时,它也是一个"微服务",单个应用使用空间有限,因 ...

  5. 在虚拟机中使用NetToPLCSim和PLC相连.

    1,虚拟机...系统Win10...里面安装了VS. 2,本机...系统Win10...里面安装了博图15. 3,转换软件:NetToPLCSIM. 4,本机和虚拟机连接同一个路由器.注意: 5,设置 ...

  6. CommunityServer的编译

    1. 简介 Community Server是一个免费的开源协作系统,用于管理文档.项目.客户关系和电子邮件通信,可以在私有服务器上安装和配置.它的组成分为: 1. OnlyOfficeJabber  ...

  7. 通过LD_PRELOAD绕过disable_functions

    今天做靶场时遇到了一个情形:拿到了webshell,却不能执行任何命令,如图 后来百度知道了disable_functions功能,这类服务器针对命令执行函数做了防范措施 一般绕过思路是利用漏掉的函数 ...

  8. 全文检索以及Lucene的应用

    全文检索 一.什么是全文检索? 就是在检索数据,数据的分类: 在计算机当中,比如说存在磁盘的文本文档,HTML页面,Word文档等等...... 1.结构化数据 格式固定,长度固定,数据类型固定等等, ...

  9. 使用TensorRT对人脸检测网络MTCNN进行加速

    前言 最近在做人脸比对的工作,需要用到人脸关键点检测的算法,比较成熟和通用的一种算法是 MTCNN,可以同时进行人脸框选和关键点检测,对于每张脸输出 5 个关键点,可以用来进行人脸对齐. 问题 刚开始 ...

  10. python选课系统作业

    # 选课系统# 角色:学校.学员.课程.讲师# 要求:# 1. 创建北京.上海 2 所学校# 2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海 ...