一、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. golang 运算符

    /* 算术运算符 : + - * / % ++ -- 关系运算符 : == != > < >= <= 逻辑运算符 : && || ! 赋值运算符 : = += ...

  2. Idea自定义代码块【学习笔记】

    前言 idea有一个自定义代码块的功能,可以自定义代码块,方便以后工作中减少一些重复操作,这里就简单记录一下idea好用的模板吧,现在有一个关于日志的模板,用于写一个ServiceImpl方法的时候, ...

  3. Transformer 和 Transformer-XL——从基础框架理解BERT与XLNet

    目录写在前面1. Transformer1.1 从哪里来?1.2 有什么不同?1.2.1 Scaled Dot-Product Attention1.2.2 Multi-Head Attention1 ...

  4. [Python]random生成随机6位验证码

    #!/usr/bin/env pyhton # coding:utf-8 # @Time : 2020-02-16 10:07 # @Author : LeoShi # @Site : # @File ...

  5. [shell] shell 变量生命周期, source, export

    1. shell 的派生 用户登录到Linux系统后,系统将启动一个用户shell.在这个shell中,可以使用shell命令, 或声明变量,也可以创建并运行shell脚本程序.运行shell脚本程序 ...

  6. C++ 解决列车重排问题

    问题节选自<<数据结构.算法与应用(C++语言描述)>>, 思路与代码为原创, 如有疏漏及问题欢迎指正 问题描述: 一辆列车有n节车厢, 车厢排列乱序(如: 284657139 ...

  7. 剑指offer-面试题65-不用加减乘除做加法-位运算

    /* 题目: 在不使用加减乘除的前提下,计算两个整数之和. 思路: 不能使用加减乘除则只能考虑位运算. x=num1^num2,则为抹掉进位的结果. y=num1&num2,为只有进位的结果. ...

  8. opencv —— inpaint 图像修补、去除指定区域物体

    实现图像修补.物体去除:inpaint 函数 void inpaint(InputArray src, InputArray inpaintMask, OutputArray dst, double ...

  9. 发布到IIS的php网站，所有的页面打开都是空白，目录权限问题，已解决

    查了下,html可以打开,百度下原因,是网站目录没有写权限所致,修改下权限正常显示

  10. 《手把手教你构建自己的 Linux 系统》学习笔记（2）

    Linux 系统定制原理 虚拟根目录 我们的目标是为了完成目标系统(也就是我们要做的系统),他是一个可以独立运行的系统,不依赖雨主系统和临时系统,根据 Linux 系统的特点它需要存放在根目录下面,但 ...