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. ethtool -p eth0 物理口一个灯在不停的闪烁

    摘自:https://blog.csdn.net/morigejile/article/details/78598645 你的  服务器有多个网卡并且已经配置好运行当中,你却没记得eth0.eth1. ...

  2. HttpClient 上传/下载文件计算文件传输进度

    1.使用ProgressMessageHandler 获取进度 using namespace System.Net.Http; HttpClientHandler hand = new HttpCl ...

  3. hdu 折线分割平面（递推）

    题解: 首先我们考虑直线的情况: 当n=1时原来的1个平面被分割成了2个: 当n=2时原来的2个平面被分割成了4个: 当n=3时原来的4个平面被分割成了7个: 也就是说F(n)=F(n-1)+n且n= ...

  4. linux系统学习（二）

    文件,目录 pwd:查看当前目录 Print Working Directory cd,ls(ll),mkdir -p Change Directory List Make Directory du ...

  5. SpringMVC错误集中营

    1.eclipse里的错误提示为The import javax.servlet.http.HttpServletRequest cannot be resolved 1.这是因为工程里面web-in ...

  6. 设计模式14：Command 命令模式（行为型模式）

    Command 命令模式(行为型模式) 耦合与变化 耦合是软件不能抵御变化的根本性原因.不仅实体对象与实体对象之间存在耦合关系,实体对象与行为操作之间也存在耦合关系. 动机(Motivation) 在 ...

  7. 编写高质量代码改善C#程序的157个建议——建议130：以复数命名枚举类型，以单数命名枚举元素

    建议130:以复数命名枚举类型,以单数命名枚举元素 枚举类型应该具有负数形式,它表达的是将一组相关元素组合起来的语义.比如: enum Week { Monday, Tuesday, Wednesda ...

  8. Activity Fragment转场动画

    Activity转场动画 先介绍个动画的好例子:https://github.com/lgvalle/Material-Animations Activity的转场动画是通过overridePendi ...

  9. poj2480——Longge's problem（欧拉函数）

    Longge's problem Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9190   Accepted: 3073 ...

  10. MVC4 View 的呈现

    一 ActionResult: 1. EmptyResult: Action方法返回的ActionResult对象被ActionInvoker 调用以实现对当前请求的响应,不论Action方法是否具有 ...