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. C#序列化效率对比

    原文出处:https://www.cnblogs.com/landeanfen/p/4627383.html 从使用序列化到现在,用到的无非下面几种方式:(1)JavaScriptSerializer ...

  2. Perl语言编程>>学习笔记2

    1. Perl中变量的常用表示  ${var} 相当于 $var  $Dog::days  在Dog包里面的变量$days  $#days  @days 的最后一个索引  ]  $days 引用的数组 ...

  3. 使用 ServiceStack 构建跨平台 Web 服务(转)

    出处:http://www.cnblogs.com/shanyou/p/3348347.html 本文主要来自MSDN杂志<Building Cross-Platform Web Service ...

  4. ubuntu 16.04快速建lvm

    1.准备2块虚拟硬盘 在执行下面之前先安装:lvm和mkfs.xfs apt install lvm2 -y apt install xfsprogs dd if=/dev/zero of=ceph- ...

  5. 【转载】Mysql中的Btree与Hash索引比较

    转载地址:http://www.jb51.net/article/62533.htm 这篇文章主要介绍了Mysql中的Btree与Hash索引比较,本文起讲解了B-Tree 索引特征.Hash 索引特 ...

  6. mybatis 输入、输出映射

    一.输入映射 mapper.xml的参数只有一个.可以传参数,基本简单类型,hashmap和javabean (一).Javabean的方法. 需求:通过小说名和作者模糊找书. 1.定义Javabea ...

  7. Ubuntu重复循环启动的快速解决方法

    如果因为在配置java或者adb环境变量时修改profile文件导致的在登录界面输入密码后重复循环启动的问题,下面总结网上和实践找到快速解决的方法啦! 1.在登录界面按下ctrl+alt+F1进入命令 ...

  8. FileInputStream和FileOutStream的使用——文件字节输入/输出流

    最近又退回到java EE的学习,这篇博客就来讲解一下字节流中最重要的两个类FileInputStream和FileOutputStream的用法: FileInputStream:全称是文件字节输入 ...

  9. 从swing分发线程机制上理解多线程[转载]

    本文参考了 http://space.itpub.net/13685345/viewspace-374940,原文作者:javagui 在多线程编程当中,总会提到图形编程,比如java中的swing, ...

  10. Application.DoEvent和定时刷新控件

    我们写一个textbox,让其依循环递增,但每次都会出现假死现象,等循环结束后,变为最终值.今天总结一下: private void button3_Click(object sender, Even ...