[flex 布局]——flex教程

简介：2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex布局是什么？

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

 

Flex 学习之路开始

1:我经常遇到，垂直居中的布局问题。以前我都是用盒子模型做的，但总是出现各种各样的问题。浏览器的兼容性特别让人心碎。

这次我都是在我自己开发中遇到的问题来学习flex。我需要它给我解决问题，所以贴出来的代码 都是我在项目中经常遇到。

 

html 代码

<div class='first'>
  <div class='box'>
    <div class='item'>flex</div>
  </div>
  <div class='box'>
    <div class='item'>flex</div>
  </div>
  <div class='box'>
    <div class='item'>flex</div>
  </div>
  <div class='box'>
    <div class='item'>flex</div>
  </div>
</div>

 

css代码

.first{
  width:500px;
  display:flex;
  border:1px solid #000;
  justify-content:center;
}
.box{
  width:100px;
  height:100px;
  border:1px solid #000;
  display:flex;
  justify-content: center;
  align-items: center;
  margin-left:10px;
}
.box:first-child{
  margin-left:0px;
}
.item{
  color:red;
}

 

效果展示

效果展示源码链接：https://jsfiddle.net/Fannie/wwd96oez/1/

 

解析

display:flex;                            这是flex 的容器

justify-content: center;           定义了项目在主轴上的对齐方式。

align-items: center;                 属性定义项目在交叉轴上如何对齐。

 

参考链接：阮一峰的网络日志 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

就是如此简单哦！