一、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. 某oa系统的审计

    title: 某oa系统的审计 date: 2018-03-07 17:18:16 tags: --- 信呼OA 闲着没事,java学累了来整理下以前审的一个觉得很有意思的cms,这个作者写的比较灵活 ...

  2. Oracle 重启监听

    对于DBA来说,启动和关闭oracle监听器是很基础的任务,但是Linux系统管理员或者程序员有时也需要在开发数据库中做一些基本的DBA操作,因此了解一些基本的管理操作对他们来说很重要. 本文将讨论用 ...

  3. 广西Ukey登录需求

    1.前端控制浏览器用户安装证书[1.检测,2,提示用户强制安装] JITComVCTK_S.exe 2.前端调用接口获取认证原文 3.对前端认证原文处理,提交请求到后端 摘算法处理后的认证原文 认证原 ...

  4. Android获取CPU编号

    /** * 获取CPU序列号 * * @return CPU序列号(16位) * 读取失败为"0000000000000000" */ private static String ...

  5. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  6. ES6 - 基础学习(4): 模板字符串和字符串新增方法

    模板字符串 模板字符串:我理解为将字符串格式化.模板化,将字符串加强处理,此处的模板有动词的意思. 字符串模板基本格式: `xxxxxx`(前后都用反引号[tab键上面按键]引起来).除了作为普通字符 ...

  7. Windows应急响应和系统加固(2)——Windows应急响应的命令使用和安全检查分析

    Windows应急响应的命令使用和安全检查分析 1.获取IP地址: ·ipconfig /all,获取Windows主机IP地址信息: ·ipconfig /release,释放网络IP位置: ·ip ...

  8. 修改PR Cs6,PS Cs6,AU Cs6的启动界面

    转载来源:https://jingyan.baidu.com/article/09ea3ede00aeedc0aede39ca.html 百度了很多,只见PS Cs6的启动界面修改教程,PR,AU C ...

  9. Python常用模块sys,os,time,random功能与用法，新手备学。

    这篇文章主要介绍了Python常用模块sys,os,time,random功能与用法,结合实例形式分析了Python模块sys,os,time,random功能.原理.相关模块函数.使用技巧与操作注意 ...

  10. Dijkstra算法2

    // 再来一手精髓的Dijkstra // 复杂度O( E*log(V) ) #include <cstdio> #include <iostream> #include &l ...