<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <h1>CSS3支持box-flex弹性布局</h1>

    <p>

    Flexbox 为 display 属性赋予了一个新的值（即 box 值），还为我们提供了 8 个新的属性：

        box-orient

        box-pack

        box-align

        box-flex

        box-flex-group

        box-ordinal-group

        box-direction

        box-lines

    </p>

    display:box;将此元素及直系子代加入弹性框模型。FlexBox只适用于直系子代

box-orient值：horizontal | vertical | inherit

框的子代是如何排列的？还有两个值：inline-axis（真正的默认值）和 block-axis，但是它们分别映射到水平和垂直方向。

box-pack值：start | end | center | justify

设置沿 box-orient 轴的框排列方式。因此，如果 box-orient 是水平方向，就会选择框的子代的水平排列方式，反之亦然。

box-align值：start | end | center | baseline | stretch

基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。

box-flex

<pre>

1.如果想水平排列，且要求多列无论内容多少，高度一致。过去用float以及overflow:hidden;

现在用Flexbox解决。

</pre>

<div id="flexbox">

  <p>child 1</p>

  <p>child 2</p>

  <p>child 3</p>

</div>

<h5>该元素只有在框的轴向上是具有弹性的；在本例中，也就是在水平方向上具有弹性。</h5>

<style>

#flexbox{

    /**告知父元素进行Flexbox模型，并水平排列**/

    display:-webkit-box;-webkit-box-orient:horizontal;

    width:400px;heigth:200px;background:green;

}

#flexbox p{background:#ff7300;}

#flexbox p:nth-child(2){background:#a7f513;}

#flexbox p:nth-child(3){background:blue;}

#flexbox > p{

  height:200px;

  -webkit-box-flex: 1;/*弹性布局。。默认非弹性，故设置*/

}

</style>

<script>

var elem=document.querySelector('#flexbox');

var elemP=document.querySelectorAll('#flexbox>p');

elem.onmouseover=function(){

    elemP.forEach(function(elem,ind,arr){

        elem.style.cssText="-webkit-box-flex:"+(ind+1)*2+";";

    })

}

elem.onmouseleave=function(){

    elemP.forEach(function(elem,ind,arr){

        elem.style.cssText="-webkit-box-flex:1;";

    })

}

</script>

<pre>

垂直居中的解决方案

</pre>

<div class="op">

    <div class="main">222</div>

</div>

<style>

.op{width:300px;height:300px;background:#1e52ec;position:relative;}

.main {

  position: absolute; width: 100px;height: 100px;background:#ff7300;

  top: calc(50% - 50px);left: calc(50% - 50px);

}

</style>

问题：

    我们有时不能选用绝对定位，因为它对整个布局的影响太过强烈。

        如果需要居中的元素已经在高度上超过了视口，那么它的顶部会被视口裁剪掉。有一些办法可以绕过这个问题，但hack味道过浓。

    在某些浏览器中，这个方法可能会导致元素的显示有一些模糊，因为元素可能被放置在半个像素上。

        这个问题可以用 transform-style: preserve-3d 来修复，不过这个修复手段也可以认为是一个hack，而且很难保证它在未来不会出问题。

<pre>

Flexbox（伸缩盒）解决水平、垂直居中

</pre>

<div class="op22">

    <div class="main22">Flexbox（伸缩盒）解决水平、垂直居中</div>

</div>

<style>

.op22{

    width:300px;height:300px;background:#1e52ec;

    display:-webkit-flex;/**new **/

}

.main22 {

  width: 100px;height: 100px;background:#ff7300;

  margin:auto;

}

</style>

<pre>

请注意，当我们使用Flexbox时，margin: auto不仅在水平方向上将元素居中，垂直方向上也是如此。

    还有一点，我们甚至不需要指定任何宽度（当然，如果需要的话，也是可以指定的）：这个居中元素分配到的宽度等于 max-content。

</pre>    

Flexbo 的另一个好处在于，它还可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。    

main26固定大小，然后借助Flexbox 规范引入的align-items和justify-content属性，

可以让它内部的文本也实现居中（我们可以对body使用相同的属性来使main26元素居中，但margin: auto方法要更加优雅一些，并且同时起到了回退的作用）。

<div class="main26">

    文字内容居中

</div>

<style>

.main26 {

  background:#ff7300; width: 300px;height:300px;

  display: flex;align-items: center;justify-content: center;

}

</style>

</body>

</html>

CSS3支持box-flex弹性布局的更多相关文章

  1. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  2. flex弹性布局学习总结

    本文首次发布在我的个人博客:Claiyre的个人博客 https://claiyre.github.io/ 博客园地址:http://www.cnblogs.com/nuannuan7362/如需转载 ...

  3. css进阶之二：flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  4. flex弹性布局学习

    一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: ...

  5. css flex弹性布局学习总结

    一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支 ...

  6. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  7. 记一下flex弹性布局

    flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...

  8. java基础之Flex弹性布局、JSP错误处理以及Log4J

    一.Flex弹性布局 1.产生的比较晚,目前在移动网页开发中可以使用,而且逐渐成为主流. 在桌面网页开发中使用的比较少(主要是桌面浏览器的兼容性问题更加严重) 2.开启方法: 在容器标签上加上 dis ...

  9. flex弹性布局的基本介绍

    最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...

  10. flex弹性布局心得

    概述 最近做项目用flex重构了一下网页中的布局,顺便学习了一下flex弹性布局,感觉超级强大,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Solved by Flexbo ...

随机推荐

  1. angular_ui-router ——依赖注入

    Angularjs ui-router - 组件: $state / $stateProvider:管理状态定义.当前状态和状态转换.包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更 ...

  2. 【转】Tomcat 的三种(bio,nio.apr) 高级 Connector 运行模式

    转载地址:http://www.oschina.net/question/54100_16195   tomcat的运行模式有3种.修改他们的运行模式.3种模式的运行是否成功,可以看他的启动控制台,或 ...

  3. PHP三元运算符 isset($_GET['id']) ? $_GET['id'] : ”

    $id = isset($_GET['id']) ? $_GET['id'] : ''; ?> 这是一个php的三元运算符 (条件) ? (值1):(值2); 解释:如果条件成立(为真),则执行 ...

  4. 2017年1月3日 星期二 --出埃及记 Exodus 21:29

    2017年1月3日 星期二 --出埃及记 Exodus 21:29 If, however, the bull has had the habit of goring and the owner ha ...

  5. 【RabbitMQ】RabbitMQ的一些基础概念

    工作中使用的是RabbitMQ,需要对其进行熟悉.使用之前,弄清楚它是什么东西,解决什么问题. 场景 一些不必实时执行的任务 开发中,有一些任务并无须实时执行,比如: 会员更新个人信息,更新会员信息之 ...

  6. 利用PhantomJS进行网页截屏，完美解决截取高度的问题

    关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS ...

  7. ShareSDK 集成 Google+ 登录 400. Error:redirect_uri_mismatch 和 Error Domain=ShareSDKErrorDomain Code=204

    最近在集成ShareSDK中 Google+ 登录授权时候 出现了如下几个问题 1.    400.  Error:redirect_uri_mismatch 出现这种情况, redirectUri应 ...

  8. Cocos2d-x 核心概念 - 导演（Director）

    导演类(Director) 用于管理场景对象,采用的是单例模式(单例模式能保存一致的配置信息,方便管理场景对象) 获得导演实例的语句如下 local director = cc.Director:ge ...

  9. 使用react做的聊天对话列表

    刚刚接触react   可能写的地方有错误或者不完善的地方欢迎大家给指正 下面开始正题 首先分析页面基于react的特性--把页面中所有显示内容看做模块加载 本页面可以看做一个大的模块,我们暂且命名为 ...

  10. A little bit about Handlers in JAX-WS

    by Rama Pulavarthi Handlers are message interceptors that can be easily plugged in to the JAX-WS run ...