CSS3属性：这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。

Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。

属性介绍：

创建Flex容器

.container{

    display:-webkit-flex;

    display:-moz-flex;

    display:flex;

    display:-ms-flexbox;

}

 

Flex-direction（旋转主轴、容器属性）：一个主轴（main axis）和一个侧轴（cross axis）

  • row：
  • 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
  • row-reverse：
  • 对齐方式与row相反。
  • column：
  • 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
  • column-reverse：
  • 对齐方式与column相反。

#container {

  display: flex;

  flex-direction: column;

}

justify-content（容器属性）:设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

flex-start：
　　弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
flex-end：
　　弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
center：
　　弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
space-between：
　　弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around：
　　弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

align-self（子项属性）:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS:flex</title>

    <style type="text/css">

        /*float、clear和vertical-align 属性将失效。*/

        .flex-content{

            display: flex;

            display: -webkit-flex;

            border:1px solid #c0c0c0;

            width: 400px;

            height:400px;

            margin:auto;

        }

        .flex-box{

            width:100px;

            height:100px;

            background:black;

            margin:10px;

        }

        .flex-self{

            align-self:baseline;

        }

    </style>

</head>

<body>

<div class="flex-content">

    <div class="flex-box flex-self">1</div>

    <div class="flex-box">2</div>

    <div class="flex-box">3</div>

    <div class="flex-box">4</div>

</div>

</body>

</html>

flex-grow（子项属性）:用数值来定义扩展比率。不允许负值

<ul class="flex">

    <li>a</li>

    <li>b</li>

     <li>c</li>

</ul>

<style>

.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;} .flex li:nth-child(1){width:200px;}

.flex li:nth-child(2){flex-grow:1;width:50px;}

.flex li:nth-child(3){flex-grow:3;width:50px;}

</style>

flex-basis（子项属性）: (<length> | <percentage> | auto | content)设置或检索弹性盒伸缩基准值。

length:用长度值来定义宽度。不允许负值

percentage:用百分比来定义宽度。不允许负值

content：基于内容自动计算宽度

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>flex-basis_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

<style>

h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}

.box{

    display:-webkit-flex;

    display:flex;

    width:600px;margin:0;padding:10px;list-style:none;background-color:#eee;}

.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}

#box li:nth-child(3){

    -webkit-flex-basis:600px;

    flex-basis:600px;

}

</style>

</head>

<body>

<h1>flex-basis示例：</h1>

<ul id="box" class="box">

    <li>a</li>

    <li>b</li>

    <li>c</li>

    <li>d</li>

    <li>e</li>

</ul>

</body>

</html>

Flexbox（弹性盒子）的更多相关文章

  1. flexbox 弹性盒子

    flexbox 弹性盒子 1.基本知识 container(容器)属性 flex-direction: row | row-reverse | column | column-reverse 属性决定 ...

  2. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  3. flexbox弹性盒子模型

    这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...

  4. css FlexBox 弹性盒子常用方法总结

    总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...

  5. CSS3 -- FlexBox(弹性盒子)

    盒子模型 CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析. 在盒模型中主要包括width.height.border.background.padding和margin这 ...

  6. flexbox弹性盒子布局

    混合划分 demo1,css: #demo1{ width: 100%; background: #ccc; display: -webkit-flex;/*表示使用弹性布局*/ } #demo1 . ...

  7. 理解Flexbox弹性盒子

    http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档 1:要开始使用Flexbo ...

  8. 弹性盒子布局flexbox

    弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局 设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可 相关 ...

  9. 弹性盒子FlexBox简介（二）

    弹性盒子属性 一.align-content属性 属性作用:用于修改flex-wrap属性行为.类似于justify-content,但它不是设置弹性子元素的对齐,而是设置各个行的对齐. 属性值: f ...

随机推荐

  1. Spring Boot☞ 配置文件详解：自定义属性、随机数、多环境配置等

    自定义属性与加载 我们在使用Spring Boot的时候,通常也需要定义一些自己使用的属性,我们可以如下方式直接定义: application-dev.yml com.didispace.blog: ...

  2. HUST软工1506班第2周作业成绩公布

    说明 本次公布的成绩对应的作业为: 第2周个人作业:WordCount编码和测试 如果同学对作业成绩存在异议,在成绩公布的72小时内(截止日期4月26日0点)可以进行申诉,方式如下: 毕博平台的第二周 ...

  3. 白盒测试实践-任务进度-Day02

    所使用静态代码检查工具 阿里巴巴Java开发代码检测IDE插件 小组成员 华同学.郭同学.覃同学.刘同学.穆同学.沈同学 任务进度 在经过任务分配阶段后,大家都投入到了各自的任务中,以下是大家今天任务 ...

  4. Inno Setup创建快捷方式跟快速运行栏快捷方式

    [Tasks] Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescrip ...

  5. javascript总结30 :DOM事件

    事件: 1 在js中可以说一整套事件能完成一个功能: 事件的定义:当什么时候执行什么事: 使用事件的基本结构:事件源+事件类型=执行的指令 2 事件三要素:事件源 事件类型, 驱动程序(匿名函数). ...

  6. UVa 1608 Non-boring sequences (分治)

    题意:给你一个长度为n序列,如果这个任意连续子序列的中都有至少出现一次的元素,那么就称这个序列是不无聊的,判断这个序列是不是无聊的. 析:首先如果整个序列中有一个只出过一次的元素,假设是第 p 个,那 ...

  7. POJ 1985 Cow Marathon （树形DP，树的直径）

    题意:给定一棵树,然后让你找出它的直径,也就是两点中的最远距离. 析:很明显这是一个树上DP,应该有三种方式,分别是两次DFS,两次BFS,和一次DFS,我只写了后两种. 代码如下: 两次BFS: # ...

  8. 设计模式13：Template Method 模板方法模式（行为型模式）

    Template Method 模板方法模式(行为型模式) 变与不变 变化——是软件永恒的主题,如何管理变化带来的复杂性?设计模式的艺术性和复杂度就在于如何分析,并发现体系中的变化点和稳定点,并使用特 ...

  9. Linux或者window装svn

    Centos7搭建SVN Server手记 安装svn和依赖模块 yum install httpd httpd-devel subversion mod_dav_svn mod_auth_mysql ...

  10. oracle 非sys用户创建新用户 授权后 plsql看不到视图

     问题: oracle 非sys用户创建新用户 授权后  plsql看不到视图 答案: 新用户查询视图时,视图名称前需要添加 视图所属用户. 如user用户新建newUser用户,newUser用户查 ...