一、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. vue hash模式下微信分享后打开首页，三种完美解决方案

    微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播.所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能.但是,前几天在对接微信分享 API ...

  2. SSM/SSH框架的MySQL 读写分离实现的一种简单方法

    简介 MySQL已经是使用最为广泛的一种数据库,往往实际使用过程中,为实现高可用及高性能,项目会采用主丛复制的方式实现读写分离.MySQL本身支持复制,通过简单的配置即可实现一主多从的配置,具体实现可 ...

  3. Leetcode面试题17.20_连续中值

    题目地址 实现一个数列的动态添加和查询中位数. 复杂点的话应该可以写个平衡树什么的,然后查询第k大,还可以删除数字. 简单点的话显然可以维护两个堆,一个大顶堆一个小顶堆,而且大顶堆最多比小顶堆多一个, ...

  4. Redis的“假事务”与分布式锁

    关注公众号:CoderBuff,回复"redis"获取<Redis5.x入门教程>完整版PDF. <Redis5.x入门教程>目录 第一章 · 准备工作 第 ...

  5. Swift 枚举-从汇编角度看枚举内存结构

    一.基本使用 先看枚举的几种使用(暂不要问,看看是否都能看懂,待会会逐一讲解) 1.操作一 简单使用 //第一种方式 enum Direction { case east case west case ...

  6. go每日新闻--2020-02-19

    gocn_news_2020-02-19 1.使用 t.Cleanup 做测试收尾 https://ieftimov.com/post/testing-in-go-clean-tests-using- ...

  7. Shiro知识初探(更新中)

    Shiro 是当下常见的安全框架,主要用于用户验证和授权操作. RBAC 是当下权限系统的设计基础,同时有两种解释:一: Role-Based Access Control,基于角色的访问控制即,你要 ...

  8. python笔记23（面向对象课程五）

    今日内容 上节作业 单例模式 class Foo: pass obj1 = Foo() # 实例,对象 obj2 = Foo() # 实例,对象 日志模块(logging) 程序的目录结构 内容回顾 ...

  9. 微信小程序入门笔记-审核上线（5）

    1.点击上传 2.填写版本号.备注 3.https://mp.weixin.qq.com/回到微信公众平台,点击版本管理就可以看到开发版本 4.点击提交审核(提交之前填写小程序基本资料,才可提交审核) ...

  10. 二、GLTF模型支持

    1.安装ColladaToGltf.exe 2. @echo off cd C:\Users\wangc04\Desktop\daeconverting\ColladaToGltfcollada2gl ...