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. Windows环境下搭建MosQuitto服务器

    Windows环境下搭建MosQuitto服务器 2018年04月16日 22:00:01 wistronpj 阅读数:1185  摘自:https://blog.csdn.net/pjlxm/art ...

  2. 谈谈Spring 注入properties文件总结

    本篇谈谈Spring 注入properties文件总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 spring提供了多种方式来注入properties文件,本文做一个 ...

  3. 下拉菜单--JavaScript触发方法

    1. $(function(){ $(".dropdown-toggle").one("click",function(){ $(this).dropdown( ...

  4. tomcat启动报错：java.lang.IllegalStateException: ContainerBase.addChild: start: org.apache.catalina.LifecycleException:

    tomcat日志: ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start com ...

  5. [GO]有缓冲通道

    有缓冲通道就是在有能力保留数据的通道,那么通道在满的时候或者通道是空的时候,存数据和取数据就会发生阻塞 package main import ( "fmt" "time ...

  6. Linux下oracle定时备份

    1. 设置数据库空表可导出(oracel11g) 用PL/SQL登录数据库(或者其他工具) 执行: select 'alter table '||table_name||' allocate exte ...

  7. 阿里云ECS云服务器编译安装PHP遇到virtual memory exhausted: Cannot allocate memory

    阿里云编译安装php时遇到virtual memory exhausted: Cannot allocate memory 买了个服务器, 1G 的内存阿里云服务器,编译东西按说应该够了,安装相关的内 ...

  8. union 和 all union

    sql union用法和sql union all用法,sql union效率 1.sql union用法 sql union在查询中可以将两个SQL 语句的结果合并起来.如果这样看的话, UNION ...

  9. layui中折叠面板的使用

    运用折叠面板后 可以让页面更加整洁 有什么不懂的可以留言 代码放到底部 需要引入的文件 JQuery代码: html代码 <div class="layui-colla-item&qu ...

  10. Verilog HDL VGA Driver for Xilinx Nexys 4 适用于Nexys4的VGA驱动

    /* * Function: VGA Timing Generator * Author: Liutianchen * Date: 2016-12-5 * Version: 6.0 * Environ ...