一、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. ISC BIND DNS

    win10,安装BIND9.15.5.x64 安装完成后,计算机服务里启动,总是报无法登陆,但服务属性登陆里设置了密码了啊,就是named,但就是一直报错.后来用下面方法避开了该问题. 安装完成后,服 ...

  2. rc.local 启动内容不生效

    系统版本  CentOS Linux release 7.2.1511 问题 :/etc/rc.local  中的内容 启动机器后不生效 经过检查 /etc/rc.local 是 /etc/rc.d/ ...

  3. Date() 按条件打印当前日期的月份和周

    条件:打印 月份-第几周 若本月前七天不在全在第一周则这一周计入到上月第五周. 分析: 1.条件判断分别处理前七天和大于等于七天的数据: 2.当前月的7号是关键,如果在周天就不需要放到上月,如果不在周 ...

  4. transition 过渡的兼容性处理

    transition兼容性: 封装一个js来验证浏览器是否兼容transition,以及选择兼容的写法 以下是transition.js (function(){ //判断transition属性是否 ...

  5. Android5.0和Android6.0适配

    gradle配置项 compileSdkVersion 用哪个 Android SDK 版本编译你的应用.因此我们强烈推荐总是使用最新的 SDK 进行编译.在现有代码上使用新的编译检查可以获得很多好处 ...

  6. Rx基础

    >>返回<C# 并发编程> 1. 转换.NET事件 1.1. 进度通知 1.2. 定时器示例 1.3. 错误传递 2. 发通知给上下文 3. 用窗口和缓冲对事件分组 4. 用限 ...

  7. SpringCloud踩坑

    今天在使用 SpringCloud 时遇到了一个问题,感觉有不少小伙伴会遇到,所以记录下来 版本说明 SpringBoot 2.2.4.RELEASE SpringCloud Greenwich.SR ...

  8. kaks calculator批量计算多个基因的选择压力kaks值

    欢迎来到"bio生物信息"的世界 今天给大家带来"批量计算kaks值"的技能. 关于kaks的背景知识我就不介绍了,感兴趣的自行搜索,这里直接开始讲怎么批量计算 ...

  9. LeetCode 面试题 02.07. 链表相交

    题目链接:https://leetcode-cn.com/problems/intersection-of-two-linked-lists-lcci/ 给定两个(单向)链表,判定它们是否相交并返回交 ...

  10. 【spring boot】SpringBoot初学（9.1）– 简单配置corsFilter对跨域请求支持

    前言 只是简单的配置实现了cors,并没有讲任何东西.(有兴趣的可看: CORS 跨域 实现思路及相关解决方案) github: https://github.com/vergilyn/SpringB ...